HTML5 WebSockets Example

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

11 Kommentare

  1. [...] 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 [...]

  2. zcorpan says:

    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.

  3. [...] / bo! hu? co.Entradas relacionadasWebSockets en HTML5Filtra y recupera de forma segura $_GET y $_POST en [...]

  4. DerFichtl says:

    Thanks zcorpan for your advice … i have recoded my class, now it works with the new Firefox 4 Beta too.

  5. [...] Feichtinger has as recent post to his blog talking about HTML5 WebSockets including an example he’s created. HTML5 WebSockets makes it [...]

  6. [...] Feichtinger has as recent post to his blog talking about HTML5 WebSockets including an example he’s created. HTML5 WebSockets makes it [...]

  7. deekobraz says:

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  8. skybinary says:

    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?

  9. jsnoob says:

    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?

  10. DerFichtl says:

    msg.data contains JSON as string … with eval i convert it to a real javascript object

  11. [...] Enlace Oficial: phpwebsockets Vía: bo! hu? co. [...]

Neuer Kommentar