Felipe Huggler * FrontEnd, Banco de dados, Desesenvolvimento, Produtos, Medias

05/04/2012 Development / java script

NodeJs...Publicação de Mensagem

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!