├── README.md
├── chat.css
├── chat.js
├── index.html
└── wsphp
    ├── app.php
    └── cron.php


/README.md:
--------------------------------------------------------------------------------
 1 | <h1>PHP and WebSockets chat</h1>
 2 | 
 3 | <p>This is simple HTML chat with the following features:</p>
 4 | 1) Unlimited number of connections (users).<br>
 5 | 2) Every user may select his/her nickname and color.<br>
 6 | 3) There are notifications wher someone has joined or left the chat.<br>
 7 | 4) Minumum use of PHP.
 8 | 
 9 | <h2>How to setup it</h2>
10 | 1) You will need a <a href="http://wsphp.net">wsphp</a> server installed.<br>
11 | 2) Setup <i>app_path</i> config option to point to app.php<br>
12 | 3) Disable <i>cron_path</i> config option as we do not use it.<br>
13 | 
14 | <h2>Information</h2>
15 | <p>Network communications are done using Websockets.
16 | WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection.
17 | That is why we can read (via <i>ws.onmessage</i> callback) and send messages (via <i>ws.send</i>) using only one websocket connection.
18 | <a href="http://wsphp.net">WSPHP</a> server takes care about websocket protocol actions: handshake, encoding/decoding frames, etc.
19 | PHP role is small - it just re-sends received message to all connected users.
20 | Messages are wrapped to JSON format for convenience.
21 | </p>
22 | 


--------------------------------------------------------------------------------
/chat.css:
--------------------------------------------------------------------------------
1 | .top { background:#E0E0E0; padding:10px; font-weight:bold; }
2 | .top form { margin:0px; }
3 | .top input, .top select { margin-right:10px; }
4 | #chat { font-family:monospace,monospace; }


--------------------------------------------------------------------------------
/chat.js:
--------------------------------------------------------------------------------
 1 | var ws = false;
 2 | var connected = false;
 3 | 
 4 | function Reconnect()
 5 | {	var url=false;
 6 | 
 7 | 	url = document.getElementById("server").innerHTML;
 8 | 	if(!url || !url.length)
 9 | 	{	url = location.host;
10 | 		if(!url || !url.length) url="127.0.0.1:30403";
11 | 		document.getElementById("server").innerHTML = url;
12 | 	}
13 | 
14 | 	if(connected)
15 | 	{	ChatMessage(false, "#999", "disconnected from server");
16 | 		connected = false;
17 | 	}
18 | 	if(ws) ws.close();
19 | 	else ChatMessage(false, "#AAA", "connecting to server...");
20 | 	connected = false;
21 | 	ws = new WebSocket("ws://"+url+"/wsphp");
22 | 	ws.onopen    = function(evt) { onOpen(evt);    };
23 | 	ws.onclose   = function(evt) { onClose(evt);   };
24 | 	ws.onmessage = function(evt) { onMessage(evt); };
25 | 	ws.onerror   = function(evt) { onError(evt);   };
26 | }
27 | 
28 | function onOpen(evt)
29 | {	if(!connected)
30 | 	{	ChatMessage(false, "#999", "connected to server");
31 | 		connected = true;
32 | 	}
33 | }
34 | 
35 | function onClose(evt)
36 | {	setTimeout(Reconnect, 1000);
37 | }
38 | 
39 | function onMessage(evt)
40 | {	try
41 | 	{	onMessageJSON(JSON.parse(evt.data));
42 | 	} catch(e)
43 | 	{	ChatMessage(false, "#999999", "JSON error: "+evt.data.replace(/</g,"&lt;").replace(/>/g,"&gt;"));
44 | 	}
45 | }
46 | 
47 | function onMessageJSON(json)
48 | {	if(window.console) console.log(json);
49 | 	if(json)
50 | 	{	if("undefined" !== typeof json.notification)
51 | 		{	ChatMessage(false, "#999999", "Someone "+(json.notification?"joined the chat":"left the chat"));
52 | 		}
53 | 		if("undefined" !== typeof json.message)
54 | 		{	ChatMessage(json.name, json.color, json.message);
55 | 		}
56 | 	}
57 | }
58 | 
59 | function onError(evt)
60 | {	if(connected) ChatMessage(false, "#999999", "Websocket error");
61 | }
62 | 
63 | function OnServerChange(link)
64 | {	var newServer = prompt("Enter new server name and port number:", link.innerHTML);
65 | 	if(newServer)
66 | 	{	link.innerHTML=newServer;
67 | 		Reconnect();
68 | 	}
69 | 	return false;
70 | }
71 | 
72 | function ChatMessage(nick, color, message)
73 | {	var s = (new Date().toLocaleString())+" ";
74 | 	if(color) s += "<font color="+color+">";
75 | 	if(nick) s += "<i>"+nick+"</i>: ";
76 | 	if(message) s += "<b>"+message+"</b>";
77 | 	if(color) s += "</font>";
78 | 	var chat = document.getElementById("chat");
79 | 	chat.innerHTML = s + "<br>" + chat.innerHTML;
80 | }
81 | 
82 | function OnSay(form)
83 | {	try{
84 | 		if(ws) ws.send("name="+form.name.value+"&message="+form.message.value+"&color="+form.color.value);
85 | 	}catch(e) { if(window.console) console.log("OnSay() "+e); }
86 | 	return false;
87 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <title>PHP Websockets chat</title>
 4 | <script type="text/javascript" src="chat.js"></script>
 5 | <link rel="stylesheet" type="text/css" href="chat.css">
 6 | </head>
 7 | <body bgcolor="white" onload="Reconnect()">
 8 | 	<div class="top">
 9 | 		<form action="#" onsubmit="return OnSay(this)">
10 | 			Server: <a href="#" id="server" onclick="return OnServerChange(this)"></a> |
11 | 			Your name: <input type="text" name="name" size="20" value="Nick">
12 | 			color: <select name="color"><option value="black">black</option><option value="red">red</option><option value="green" selected>green</option><option value="blue">blue</option></select>
13 | 			message: <input type="text" name="message" size="50" value="">
14 | 			<input type="submit" value="Say it!">
15 | 		</form>
16 | 	</div>
17 | 	<div id="chat"></div>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/wsphp/app.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | echo "<WSContent>\n";
 4 | 
 5 | if(isset($_GET['client_notification']))
 6 | {	
 7 | 	switch($_GET['client_notification'])
 8 | 	{	case 'connected':
 9 | 			echo '<WSSend to="all">{"notification":1,"sid":"'.$_SERVER['WSPHP_SESSION'].'"}</WSSend>';
10 | 			break;
11 | 		case 'disconnected':
12 | 			echo '<WSSend to="all">{"notification":0,"sid":"'.$_SERVER['WSPHP_SESSION'].'"}</WSSend>';
13 | 			break;
14 | 	}
15 | }
16 | else if(isset($_GET['message']))
17 | {	$jsonString = '{"message":"'.htmlspecialchars($_GET['message']).'","color":"'.htmlspecialchars($_GET['color']).'","name":"'.htmlspecialchars($_GET['name']).'"}';
18 | 	echo '<WSSend to="all">'.$jsonString.'</WSSend>';
19 | 	// Message will not be delivered to originator client.
20 | 	// If you need to send message to all clients, including originator, uncomment this line:
21 | 	// echo '<WSReply>'.$jsonString.'</WSReply>';
22 | }
23 | 
24 | echo "</WSContent>\n";
25 | 


--------------------------------------------------------------------------------
/wsphp/cron.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 


--------------------------------------------------------------------------------