Socket.IO - Aplicativo de bate-papo

Agora que estamos familiarizados com o Socket.IO, vamos escrever um aplicativo de bate-papo, que podemos usar para conversar em diferentes salas de bate-papo. Permitiremos que os usuários escolham um nome de usuário e conversem com eles. Então, primeiro, vamos configurar nosso arquivo HTML para solicitar um nome de usuário -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
   </script>
   <body>
      <input type = "text" name = "name" value = "" placeholder = "Enter your name!">
      <button type = "button" name = "button">Let me chat!</button>
   </body>
</html>

Agora que configuramos nosso HTML para solicitar um nome de usuário, vamos criar o servidor para aceitar conexões do cliente. Permitiremos que as pessoas enviem seus nomes de usuário escolhidos usando o evento setUsername . Se um usuário existir, responderemos por um evento userExists , usando outro evento userSet .

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

users = [];
io.on('connection', function(socket) {
   console.log('A user connected');
   socket.on('setUsername', function(data) {
      if(users.indexOf(data) > -1) {
         users.push(data);
         socket.emit('userSet', {username: data});
      } else {
         socket.emit('userExists', data + ' username is taken! Try some other username.');
      }
   })
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

Precisamos enviar o nome de usuário para o servidor quando as pessoas clicam no botão. Se o usuário existir, mostramos uma mensagem de erro; caso contrário, mostramos uma tela de mensagens -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   
   <script src = "/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      function setUsername() {
         socket.emit('setUsername', document.getElementById('name').value);
      };
      var user;
      socket.on('userExists', function(data) {
         document.getElementById('error-container').innerHTML = data;
      });
      socket.on('userSet', function(data) {
         user = data.username;
         document.body.innerHTML = '<input type = "text" id = "message">\
         <button type = "button" name = "button" onclick = "sendMessage()">Send</button>\
         <div id = "message-container"></div>';
      });
      function sendMessage() {
         var msg = document.getElementById('message').value;
         if(msg) {
            socket.emit('msg', {message: msg, user: user});
         }
      }
      socket.on('newmsg', function(data) {
         if(user) {
            document.getElementById('message-container').innerHTML += '<div><b>' + 
               data.user + '</b>: ' + data.message + '</div>'
         }
      })
   </script>
   
   <body>
      <div id = "error-container"></div>
      <input id = "name" type = "text" name = "name" value = "" 
         placeholder = "Enter your name!">
      <button type = "button" name = "button" onclick = "setUsername()">
         Let me chat!
      </button>
   </body>
</html>

Agora, se você conectar dois clientes com o mesmo nome de usuário, ocorrerá um erro, conforme mostrado na captura de tela abaixo -

Nome do bate-papo recebido

Depois de fornecer um nome de usuário aceitável, você será levado a uma tela com uma caixa de mensagem e um botão para enviar mensagens. Agora, temos que manipular e direcionar as mensagens para o cliente conectado. Para isso, modifique seu arquivo app.js para incluir as seguintes alterações -

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

users = [];
io.on('connection', function(socket) {
   console.log('A user connected');
   socket.on('setUsername', function(data) {
      console.log(data);
      
      if(users.indexOf(data) > -1) {
         socket.emit('userExists', data + ' username is taken! Try some other username.');
      } else {
         users.push(data);
         socket.emit('userSet', {username: data});
      }
   });
   
   socket.on('msg', function(data) {
      //Send message to everyone
      io.sockets.emit('newmsg', data);
   })
});

http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

Agora conecte qualquer número de clientes ao seu servidor, forneça um nome de usuário e comece a conversar! No exemplo a seguir, conectamos dois clientes com os nomes Ayush e Harshit e enviamos algumas mensagens dos dois clientes -

Exemplo de bate-papo