Simple Chat Engine Using HTML5(Server Sent Events) And PHP

Hi Guys, how are you doing? I think HTML5 really amazing. Today I will teach you how to create Chat App using HTML5-SSE (Server Sent Events). This is the best example of how to use HTML5-SSE. In previous days we need to use JavaScript setInerval to make a request to the server certain interval but now HTML5 made our work easy with SSE. Take a look at the demo below.


demo download

Note: To test the demo open the demo in different tabs. When you sent a message in one place other will automatically update. (Or) Tell your friend to open the demo and start chatting.

index.html

<!DOCTYPE html>  
<html lang="en">  
  <head> 
  </head> 
  <body> 
    <div class="container"> 
      <div class="chat"> 
        <div id="chatZone" name="chatZone">
        </div> 
        <form onsubmit="chat.sendMsg(); return false;"> 
          <label for="msg" style="float:left">Message:
          </label> 
          <input type="text" id="msg" name="msg" autofocus="true" placeholder="Type Your Meassage Here" /> 
          <input type="submit" /> 
        </form> 
      </div> 
    </div> 
    <script type="text/javascript" src="chat.js">
    </script> 
  </body> 
</html>  

Here we will call _chat.sentMsg() on submitting form.

Chat.js(ChatEngine)

var ChatEngine = function() {  
    var name = " ";
    var msg = "";
    var chatZone = document.getElementById("chatZone");
    var oldata = "";
    var sevr = " ";
    var xhr = " ";
    //initialzation 
    this.init = function() {
        if (EventSource) {
            this.setName();
            this.initSevr();
        } else {
            alert("Use latest Chrome or FireFox");
        }
    };
    //Setting user name 
    this.setName = function() {
        name = prompt("Enter your name:", "Chater");
        if (!name || name === "") {
            name = "Chater";
        }
        name = name.replace(/(<([^>]+)>)/ig, "");
    };
    //For sending message 
    this.sendMsg = function() {
        msg = document.getElementById("msg").value;
        chatZone.innerHTML += '<div class="chatmsg"><b>' + name + '</b>: ' + msg + '<br/></div>';
        oldata = '<div class="chatmsg"><b>' + name + '</b>: ' + msg + '<br/></div>';
        this.ajaxSent();
        return false;
    };
    //sending message to server 
    this.ajaxSent = function() {
        try {
            xhr = new XMLHttpRequest();
        } catch (err) {
            alert(err);
        }
        xhr.open('GET', 'chatprocess.php?msg=' + msg + '&name=' + name, false);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    msg.value = "";
                }
            }
        };
        xhr.send();
    };
    //HTML5 SSE(Server Sent Event) initilization 
    this.initSevr = function() {
        sevr = new EventSource('chatprocess.php');
        sevr.onmessage = function(e) {
            if (oldata != e.data) {
                chatZone.innerHTML += e.data;
                oldata = e.data;
            }
        };
    };
};
// Createing Object for Chat Engine 
var chat = new ChatEngine();  
chat.init();  

In this code we are createing ChatEngine Class.
init Is beginning of the execution. setName To gather user name. sentMsg Triger when user push sent button. ajaxSent Sent msg to PHP script. initSevr To initialize Server Sent Event.

chatprocess.php

<?php  
// creating Event stream

header('Content-Type: text/event-stream');  
header('Cache-Control: no-cache');  
$name = strip_tags($_GET['name']);
$msg = strip_tags($_GET['msg']);

function sendMsg($msg)  
{
    echo "data: $msg" . PHP_EOL;
    ob_flush();
    flush();
}

if (!empty($name) && !empty($msg))  
{
    $fp = fopen("_chat.txt", 'a');
    fwrite($fp, '<div class="chatmsg"><b>' . $name . '</b>: ' . $msg . '<br/></div>' . PHP_EOL);
    fclose($fp);
}

if (file_exists("_chat.txt") && filesize("_chat.txt") > 0)  
{
    $arrhtml = array_reverse(file("_chat.txt"));
    $html = $arrhtml[0];
}

if (filesize("_chat.txt") > 100)  
{
    unlink("_chat.txt");
}

sendMsg($html);  
?> 

Here we creating event-stream and saving the chat in __chat.txt_ file temporarily.

CSS

body {  
    font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 32px;
    color: #333333;
    font-weight: normal;
}
.container {
    margin: 0 auto;
    width: 600px;
}
.chat-zone {
    padding: 20px;
    height: 400px;
}
.chatmsg {
    margin: 0 5px;
}
.chatmsg b {
    text-transform: uppercase;
    color: orange;
}
.chat {
    margin: 0 auto;
}
.chat #chatZone {
    width: 500px;
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 7px;
    overflow-y: scroll;
    background: #333;
    color: #fff;
}
.chat form {
    margin: 10px 0 0 0;
}
input[type="text"] {  
    border: 1px solid #cccccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    outline: none;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    border-radius: 3px;
    width: 425px;
}
input[type="submit"] {  
    display: block;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 0 0 60px;
    padding: 6px 10px;
    border: 1px solid #777;
    background: #333537;
    border-radius: 5px;
}

This will be used for styling.

Reference

html5rocks Wikipeida W3schools That's it! hope you like it. Please Share it with you friends.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.