â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
Server Sent Events Simple Chat Application Example
Basic stand-alone chat application example utilizing SSE and a flat file database. Websocket and a remote host is recommended over SSE for more serious web applications.
chat_example.php
<?php
session_start();
$_SESSION['last_line'] = "";
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
var source, chattext, last_data, chat_btn, conx_btn, disconx_btn, text;
var hr = new XMLHttpRequest();
function connect(){
if(window.EventSource){
source = new EventSource("server.php");
source.addEventListener("message", function(event){
if(event.data != last_data && event.data != ""){
chattext.innerHTML += event.data+"<hr>";
}
last_data = event.data;
});
chat_btn.disabled = false;
conx_btn.disabled = true;
disconx_btn.disabled = false;
} else {
alert("event source does not work in this browser, author a fallback technology");
// Program Ajax Polling version here or another fallback technology like flash
}
}
function disconnect(){
source.close();
disconx_btn.disabled = true;
conx_btn.disabled = false;
chat_btn.disabled = true;
}
function chatPost(){
chat_btn.disabled = true;
hr.open("POST", "chat_intake.php", true);
hr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
chat_btn.disabled = false;
text.value = "";
}
}
hr.send("text="+text.value);
}
var promptValue = prompt('Enter your name:', '');
if(promptValue != null){
hr.open("POST", "chat_intake.php", true);
hr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
if(hr.responseText == "success"){
chattext = document.getElementById("chattext");
chat_btn = document.getElementById("chat_btn");
conx_btn = document.getElementById("conx_btn");
disconx_btn = document.getElementById("disconx_btn");
text = document.getElementById("text");
conx_btn.disabled = false;
alert("Welcome to the chat "+promptValue+", press connect when ready.");
}
}
}
hr.send("uname="+promptValue);
}
</script>
<style>
div#chatbox{
width: 300px;
height: 330px;
padding: 20px;
background:#FFE1A4;
border-radius: 5px;
}
div#chatbox > #chattext{
height: 200px;
padding: 10px;
background: #FFF;
margin: 10px 0px;
overflow-y: auto;
}
div#chatbox > #text{
width: 100%;
}
</style>
</head>
<body>
<div id="chatbox">
<b>SSE Chatbox <small>shared hosting test</small></b>
<div id="chattext"></div>
<textarea id="text"></textarea>
<input type="button" id="chat_btn" onclick="chatPost()" value="Submit Text" disabled>
<input type="button" id="conx_btn" onclick="connect()" value="Connect" disabled>
<input type="button" id="disconx_btn" onclick="disconnect()" value="Disconnect" disabled>
</div>
</body>
</html><?php
session_start();
header('Content-Type: text/event-stream');
header("Cache-Control: no-cache"); // Prevent Caching
$data = file_get_contents("chat.txt");
// Trim the last new line character from the data
$trimmed = rtrim($data, "n");
// Create an array in which each new line is an element
$data_array = explode("n", $trimmed);
// Grab just the last line from the end of the array
$last_line = end($data_array);
// If $last_line is not equal to 'last_line' session variable
if($last_line != $_SESSION['last_line']){
echo "data: $last_linenn";
// Update last line session variable
$_SESSION['last_line'] = $last_line;
}
// Do not make retry less than 15000(15 seconds) on shared hosting
// And limit simultaneous users to prevent exceeding server resources
echo "retry: 15000n";
ob_flush();
flush();
?><?php
session_start();
$text = "";
if(isset($_POST['text']) && isset($_SESSION['uname'])) {
$text = $_SESSION['uname']." said: ".$_POST['text']."n";
$handle = fopen("chat.txt", "a");
fwrite($handle, $text);
fclose($handle);
exit();
}
if(isset($_POST['uname'])) {
$_SESSION['uname'] = $_POST['uname'];
echo "success";
exit();
}
?>