¿Cómo configurar Socket.IO con la aplicación Demo-Chat en Node.js?

Para crear una aplicación de chat, se requiere que el servidor envíe datos al cliente, pero el cliente también debe responder al servidor. Esto se puede hacer haciendo uso de Websockets. Un WebSocket es una especie de canal de comunicación abierto en dos direcciones.

Requisito previo:

1. Node.js: es una tecnología back-end JavaScript de código abierto ejecutada por el servidor. Tiene su propio administrador de paquetes npm (Node Package Manager) que permite una fácil instalación de paquetes.
2. Express.js: Es un framework basado en Node.js.
3. Socket.io: permite la comunicación bidireccional basada en eventos en tiempo real. Funciona en todas las plataformas, navegadores o dispositivos, centrándose por igual en la fiabilidad y la velocidad. Socket.IO se basa en la API de WebSockets (lado del cliente) y Node.js. Es uno de los más dependientes de la biblioteca en npm.

Configuración del entorno: el primer paso es iniciar npm. Entonces, cree un nuevo repositorio e inicialice npm usando los siguientes comandos:

$ mkdir chatApp
$ cd chatApp
$ npm init

Ahora, el siguiente paso es instalar paquetes npm que serán necesarios para construir nuestra aplicación de chat.

• express: el marco de la aplicación web para Node.js.
• nodemon: (opcional) Sirve para reiniciar nuestro servidor. Si no desea instalarlo, simplemente reinicie el servidor escribiendo node app.js en la terminal.
• ejs: un lenguaje de plantillas simple que le permite generar marcado HTML con JavaScript simple.
• socket.io: El paquete que gestiona Websocket.

Simplemente ejecute los siguientes comandos en su terminal para instalar los paquetes mencionados anteriormente:

$ npm install --save express
$ npm install --save socket.io
$ npm install --save ejs
$ npm install --save nodemon

Pasos para implementar el código:

Paso 1: Crear app.js

const express = require('express');
const app = express();
  
app.set("view engine", "ejs");
app.use(express.static("public"));
  
app.get("/", function(req, res) {
    res.send("Welcome to chat app!");
});
  
server = app.listen(3000);

Si ejecuta http://localhost:3000 en su navegador, puede ver el mensaje que aparece en su pantalla como se muestra a continuación:

Ahora, para configurar socket.io, primero debemos crear un objeto en el archivo app.js como se muestra a continuación:

const io = require("socket.io")(server);
  
io.on('connection', (socket) {
     console.log("New user connected");
});

Aquí, el objeto io nos dará acceso a la biblioteca socket.io . El objeto io ahora está escuchando cada conexión a nuestra aplicación. Cada vez que un nuevo usuario se conecte, imprimirá el siguiente resultado:

New user connected

Ahora, para crear una ventana para la aplicación de chat, crearemos un archivo html (en realidad, un archivo ejs) llamado index.ejs dentro de la carpeta de vistas. Por otro lado, la carpeta pública contendrá el archivo css, a saber, style.css y el archivo js chat.js. Se verá así:

Ahora crearemos una ruta que generará nuestro archivo index.ejs que abre la ventana de nuestra aplicación de chat.

   
app.get("/", function(req, res) {
    res.render("index.ejs");
});

Ahora, si ejecuta http://localhost:3000, nuestra ventana de chat se verá así:

Ahora instalaremos socket.io en cada cliente que intentará conectarse a nuestro servidor. Para hacer eso, tenemos que importar la biblioteca socket.io en el lado del cliente:

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js">
</script>

Al final de su cuerpo agregue estas líneas:

<script src=
"http://code.jquery.com/jquery-latest.min.js">
</script>
<script src="chat.js"></script>

Ahora cree un archivo js llamado chat.js en la carpeta pública.

$ (function() {
    var socket = io.connect('http://localhost:3000');
});

Paso 2: Enviar y recibir datos Ahora, escribiremos un código que nos permitirá enviar y recibir datos del servidor.
Cambio de nombre de usuario: en primer lugar, estableceremos un nombre de usuario predeterminado como algo que digamos «Xyz». Para hacerlo, escriba el siguiente código en el archivo app.js y chat.js.

Nombre de archivo: app.js

const io = require("socket.io")(server);
io.on('connection', (socket) {
     console.log("New user connected");
     socket.username="xyz";
     socket.on('change_username', (data) {
        socket.username = data.username;
     });
});

Nombre de archivo: chat.js

$ (function() {
     var socket = io.connect('http://localhost:3000');
     var message = $("#message");
     var username = $("#username");
     var send_message = $("#send_message");
     var send_username = $("#send_username");
     var chatroom = $("#chatroom");
   
     send_username.click(function() {
         console.log(username.val());
         socket.emit('change_username', 
           { username : username.val() });
     });
});

socket.emit() le permite emitir eventos personalizados en el servidor y el cliente.

Mensaje: Para mensajes modificamos nuestros archivos como se muestra a continuación:
Nombre de archivo: chat.js

$ (function() {
 var socket = io.connect('http://localhost:3000');
 var message = $("#message");
 var username = $("#username");
 var send_message = $("#send_message");
 var send_username = $("#send_username");
 var chatroom = $("#chatroom");
  
 send_message.click(function() {
    socket.emit('new_message', { message : message.val() });
 });
  
 socket.on("new_message", (data) {
   console.log(data);
   chatroom.append("<p class='message'>"
     + data.username+";" + data.message+"</p>")
 });
  
 send_username.click(function() {
   console.log(username.val())
   socket.emit('change_username',
        {username : username.val()})
 });
});

Nombre de archivo: app.js

const io = require("socket.io")(server);
io.on('connection', (socket) {
 console.log("New user connected");    
   
 socket.username="xyz";
  
 socket.on('change_username', (data) {
   socket.username = data.username;
 });
  
 socket.on('new_message', (data) {
   io.socket.emit('new_message', {
       message : data.message,
       username : socket.username
   });
 });
});

El resultado final de nuestra sencilla aplicación de chat se verá así:

Un pequeño avance: un poco más que podemos hacer es agregar un detector de eventos jQuery al escribir y enviar un evento de socket llamado escribir.

Simplemente se mostrará si alguien está escribiendo un mensaje. Escriba el siguiente código en chat.js y app.js como se muestra a continuación:
Nombre de archivo: chat.js

message.bind("keypress", () {
    socket.emit('typing');
});
  
socket.on('typing', (data) {
  feedback.html("<p><i>" + data.username 
    + " is typing a message..." + "</i></p>");
});

Nombre de archivo: app.js

socket.on('typing', (data) {
    socket.broadcast.emit('typing', {username : socket.username});
});