HTML5 WebSockets makes it possible to open a persistent connection to a server within a web-browser via javascript.
UPDATE: Mastering the new Spec-76 WebSockets handshake with PHP.
Websockets works already in the latest Webkit-browsers like Safari 5 and Chrome 5. Firefox 4 Beta 1 knows the Websocket-Object but it can’t open the connection :(
My Websocket test script sends the current mouse position via socket connection to the server and then receives all positions of all current open sockets and prints them to the browser-window. In other words, you can see the mouse cursors of the other users on the page.
var socket; 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.
http://bohuco.net/dev/websocket/
Source Codes:
WebSocketServer.php
server.php
[...] This post was mentioned on Twitter by DerFichtl, DerFichtl. DerFichtl said: @dalmaer hi dion, i have created a nice litte websockets example … maybe you can check it out for Ajaxian: http://bit.ly/bKUaNd thanks [...]
Firefox can’t open the connection for the same reason Chrome 6 dev can’t open the connection. You have implemented version -75 of the protocol (which Safari 5 and Chrome 5 use), while Firefox and Chrome 6 dev support version -76.
[...] / bo! hu? co.Entradas relacionadasWebSockets en HTML5Filtra y recupera de forma segura $_GET y $_POST en [...]
Thanks zcorpan for your advice … i have recoded my class, now it works with the new Firefox 4 Beta too.
[...] Feichtinger has as recent post to his blog talking about HTML5 WebSockets including an example he’s created. HTML5 WebSockets makes it [...]
[...] Feichtinger has as recent post to his blog talking about HTML5 WebSockets including an example he’s created. HTML5 WebSockets makes it [...]
it was very interesting to read.
I want to quote your post in my blog. It can?
And you et an account on Twitter?
Hey, nice introduction to websockets thanks :)
I have successfully implemented some examples but they only work from localhost.
How can i tell apache/php to allow socket connections beyond localhost?
I don’t understand the need for the eval:
[ eval('var data = ' + msg.data + ';'); ]
why can’t you just do a real var data = msg.data?
msg.data contains JSON as string … with eval i convert it to a real javascript object
[...] Enlace Oficial: phpwebsockets Vía: bo! hu? co. [...]