HTML5 WebSockets Example with PHP Server

Posted by Fichtl on 11.07.2010

WebSockets makes it possible to open a persistent connection from a browser to a server with javascript. It is currently supported by all major browsers.

Client Side Javascript Code

 

function init() { var host = "ws://84.38.67.247:8080/dev/websocket/server.php"; try { socket = new WebSocket(host); socket.onopen = function(msg){ }; socket.onmessage = function(msg){ eval('var data = ' + msg.data + ';'); for (userId in data) { if (data[userId].position) { var pos = data[userId].position.split(','); var color = data[userId].color; render(userId, pos[0], pos[1], color); } } dump(data); }; socket.onclose = function(msg){ }; } catch(ex){ console.log(ex); } $('body').bind('mousemove', function(evt){ send(evt.clientX, evt.clientY); }); } function render(u, x, y, c) { if ($('#'+u).length == 0) { $(' ').appendTo('body'); } $('#'+u).css('left', x+'px'); $('#'+u).css('top', y+'px'); $('#'+u).css('background', c); } function send(x,y) { var msg = x + ',' + y; socket.send(msg); }

On the server side i use a PHP5 script. I have written my own server-class but it's based on the work of the phpwebsocket project. The server.php instantiate the WebSocketServer object and contains the callback function.