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

Published on November 18, 2012

This is the continues part of Simple Chat Engine Using HTML5(Server Sent Events) And PHP. In this, we are going to add new feature _ChatRoom_. The problem with the previous version was if you chatting with your friend and any other user come to chat app, he can see what you and your friend are chatting. The best Solution for this problem is _ChatRooms_. When you go to chat app it will ask you to enter ChatRoom name along with your name. Now you can tell your friend to enter same _ChatRoom_. So you both can have privacy. Since no one knows what’s the _ChatRoom_ name you using no one can see your chat.

Demo

download

###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>

This code is similar to previous one.Here we will call _chat.sentMsg()_ on submitting form.

###Chat.js(ChatEngine)

var ChatEngine = function() {
    var croom = " ";
    var name = " ";
    var msg = "";
    var chatZone = document.getElementById("chatZone");
    var oldata = "";
    var sevr = " ";
    var xhr = " ";
    //initialzation
    this.init = function() {
        if (EventSource) {
            this.setRoom();
            this.setName();
            this.initSevr();
        } else {
            alert("Use latest Chrome or FireFox");
        }
    };
    //Setting Chat Room
    this.setRoom = function() {
        croom = prompt("Please enter Chat Room name:", "ChatRoom");
        if (!croom || croom == "") {
            croom = "ChatRoom";
        }
        croom = croom.replace(/(<([^>]+)>)/ig, "");
    };
    //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 += '  **
            '+name+' **: '+msg+'
        ';
        oldata = '  **
            '+name+' **: '+msg+'
        ';
        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 + '&croom=' + croom, 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?croom=' + croom);
        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();

Here we added a new function setRoom by which you can set the room. In _initSevr_ function, we sending croom parameter to PHP script so that we will get only particular chat room messages.

###chatprocess.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$chatroom = strip_tags($_GET['croom']);
$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($chatroom . "_chat.txt", 'a');
	fwrite($fp, '<div class="chatmsg"><b>' . $name . '</b>: ' . $msg . '<br/></div>' . PHP_EOL);
	fclose($fp);
}

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

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

sendMsg($html);

?>

In the previous version, we only using _chat.txt to store our intermediate chat. But new we are using $chatroom_chat. ###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. That’s it. Hope you like it.