Vou tentar explicar bem direitinho porque esse lance de node parece fácil, mas tem uns macetes!
Primeiro nós temos que levantar, subir o nosso servidor que será responsável por receber e emitir as mensagens para todos os usuários conectados, certo?
/* Server.js */
/* é um exemplo simples, só para base de estudo */
var io = require('socket.io').listen(8000); // aqui eu digo que vou subir na porta 8000
// abre a conexão socket
io.sockets.on('connection', function (socket) {
// recebo mensagem do cliente - "data" são os dados que o usuário enviou
//**********************************************************************************
socket.on('chat', function (data) {
//**********************************************************************************
//Envia para todos os usuários que assinaram o handler "chat"
socket.broadcast.emit('chat', {
msg : data.msg,
msgr : data.user
});
});
});
Molezinha né! para ver realmente se está funcionando http://localhost:8000 - Shooow
Agora a parte do nosso Html ou seja, o
/* Cliente */
<html>
<head>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
var name = '';
var socket = io.connect('http://localhost:8000');
$(document).ready(function(){
while (name == '') {
name = prompt("Qual seu nome?","");
}
$("button").click(function(){
var value = $("input#msg").val();
$("p#log").html('Enviei a mensagem: ' + value);
// envio mensagem para o servidor
//**********************************************************************************
socket.emit('chat', {'msg' : value, 'user' : name});
//**********************************************************************************
$("p#data_recieved").append("<br />\r\n" + name + ': ' + value);
// limpa a caixa de texto
$("input#msg").val('');
});
// vou enviar o nome do usuario para o servidor
socket.emit('register', name );
});
// Handler quando eu receber uma mensagem do servidor
socket.on('chat', function (data) {
$("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' + data.msg);
$("p#log").html('Recebi a mensagem: ' + data.msg);
});
</script>
</head>
<body>
<input type="text" id="msg"></input><button>Click me</button>
<p id="log"></p>
<p id="data_recieved"></p>
</body>
</html>
Com isso, você já pode fazer um eskema de chat...deixar os dados em memória quando for a primeira vez que o usuário entrar, fazer um eskema de jogos, leilão...só viajar nas idéias!