Artículo

---

1 ¡votar!

Ejemplo de WebSockets con HTML5

WebSockets es una caractarística que incorpora HTML5 que permitirá mejorar las aplicaciones web, permitiendo crear un canal de comunicación bidireccional entre el cliente y el servidor, solucionando los problemas que presenta AJAX.

Con esta nueva característica, se puede llegar ahorrar un ancho de banda en proporción 500:1 y una latencia de 3:1.

Vamos a ver el código de ejemplo, donde el WebSocket mandará la posición del ratón en la pantalla de la web, y también mostrará la posición del ratón del resto de usuarios que están visitando la web.

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);
}

Vía: bohuco.net

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios