Creación de salas con Socket.io

Clase 12 de 26 • Curso de Aplicaciones en Tiempo Real con Socket.io

Carlos Alejandro Hernández Mejía

student•

Creación de salas

Hasta el momento, hemos visto cómo mandar eventos. Desde la emisión básica uno a uno, hasta la emisión a todos los sockets conectados por medio de broadcast, e incluso, hasta el envío de eventos a un socket en particular.

Pero también, se pueden agrupar sockets por medio de salas y enviarles eventos solo aquellos que pertenezcan a una sala en particular.

💡 Por ejemplo, esto se podría usar en un chat grupal, donde solo recibirán los mensaje los miembros que pertenezcan a dicho grupo.

Así implementé esta clase para que el código fuera más dinámico:

src/index.js:

io.on('connection', (socket) => {
  socket.connectedRoom = null;

  socket.on('connectToRoom', (room) => {
    if (socket.connectedRoom) {
      socket.leave(socket.connectedRoom);
    }
    socket.connectedRoom = room;
    socket.join(room);
  });

  socket.on('message', (message) => {
    const room = socket.connectedRoom;
    if (room) {
      io.to(room).emit('newMessage', {
    	  message,
        room,
        sender: socket.id,
      });
    }
  });
});

index.html

<body>
  <ul class="room" id="room1"> </ul>
  <ul class="room" id="room2"> </ul>
  <ul class="room" id="room3"> </ul>

  <form>
    <label for="connect-room">
      Connect to room:
      <input min="1" max="3"  step="1" type="number" id="connect-room" placeholder="Enter your room number">
    </label>
    <button type="button" onclick="connectTo()">
      Connect
    </button>
  </form>
  <form>
    <label for="message">
      Message:
      <input type="text" id="message" placeholder="Enter your message">
    </label>
    <button type="button" onclick="sendMessage()">
      Send
    </button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/index.js"></script>
</body>

js/index.js

const socket = io();

function connectTo() {
  const connectRoom = document.getElementById('connect-room');
  const connectRoomValue = connectRoom.value;
  if (connectRoomValue) {
    socket.emit('connectToRoom', `room${connectRoomValue}`);
  }
}

function sendMessage() {
  const message = document.getElementById('message');
  const messageValue = message.value;
  if (messageValue) {
    socket.emit('message', messageValue);
    message.value = '';
  }
}

function receiveMessage({ room, sender, message }) {
  const roomElement = document.getElementById(room);
  const messageElement = document.createElement('li');
  messageElement.textContent = `${sender}: ${message}`;
  roomElement.appendChild(messageElement);
}

socket.on('newMessage', receiveMessage);

Nicolás Arévalo

student•

Bro, deberías aplicar a Platzi contrtibutors, estas notas podrían ser notas oficiales de la clase y aparecer abajo del video.

Roberto Contrera

student•

¿Cómo sería socket.connectedRoom en typescript?

Julian David Alzate Cuervo

student•

si en algun momento no les sirve para ver los mensajes, hay que matar el proceso y volver a correrlo o recargar la página borrando el caché

Ameth Ordoñez Erazo

student•

.room {
  display: block;
  border: 2px solid #000;
  margin-bottom: 20px;
}

Henry Corredor

student•

no acabo de entender por qué lo del punto y coma es una buena práctica y no una preferencia personal :/

Fernando Francisco López Mauro

student•

A veces el no porner ; genera algunos errores inesperados :)

Diego Reyes Cabrera

student•

Mmmm no, no genera errores inesperados. Podrían ser casos muy específicos y pues, editores modernos con TypeScript y/o ESLint te avisarán si algo está mal

Andrés Esteban Rodríguez Jiménez

student•

Creación de salas

Ya vimos como usar los broadcast para la manipulación de eventos en tiempo real sin que afecte nuestra lógica de cliente y se comparta en tiempo real con el resto de usuarios.

Ahora, vamos a ver como podemos crear salas individuales donde mandemos eventos únicamente a la sala donde estemos participando.

Supongamos que deseamos crear un chat grupal dividido por salas, como discord pero no tan complejo XD.

Para esto vamos a volver a vaciar todo nuestro contenido del código y haremos lo siguiente:

En nuestro archivo HTML agregaremos lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Servidor con Express y Socket.io</title>
</head>
<body>

  <ul class="room" id="room-1"></ul>
  <ul class="room" id="room-2"></ul>
  <ul class="room" id="room-3"></ul>

  <button id="connect-room-one">Room 1</button>
  <button id="connect-room-two">Room 2</button>
  <button id="connect-room-three">Room 3</button>

  <br>

  <button id="send-message">Enviar mensaje</button>
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

En nuestro CSS vamos a hacerlo un poco más sencillo:

.room {
  display: block;
  border: 2px solid #000;
  margin-bottom: 20px;
}

Bien, ya tenemos la estructura básica de nuestro mini proyecto, ahora, vamos a ver como sería la lógica de nuestro cliente:

const socket = io()

// seleciono mis 3 botones
const connectRoom1 = document.querySelector('#connect-room-one')
const connectRoom2 = document.querySelector('#connect-room-two')
const connectRoom3 = document.querySelector('#connect-room-three')

// 1. eventos para conectarme a una sala específica
connectRoom1.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-1')
})

connectRoom2.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-2')
})

connectRoom3.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-3')
})

// 1. enviar mensaje
const sendMessageButton = document.querySelector('#send-message')
sendMessageButton.addEventListener('click', () => {
  // enviamos nuestro mensaje al servidor
  const message = prompt('Escribe tu mensaje')
  socket.emit('message', message)
})

// 2. recibimos el evento del mensaje
socket.on('send-message', data => {
  const { room, message } = data

  const li = document.createElement('li')
  li.textContent = message
  document.querySelector(`#${room}`).append(li)
})

Y ahora veamos como sería la lógica de nuestro servidor

io.on('connection', socket => {
	socket.on('connect-to-room', room => {
    // creamos una propiedad personalizada en nuestro socket que será igual a la sala donde estamos conectados
    socket.connectedRoom = ''

    // antes de que el usuario entre a una sala, lo sacamos de la sala donde estaba
    socket.leave(socket.connectedRoom) 

    // 1. el método join() nos permite ingresar nuestro socket a una sala que si existe nos mete y si no la crea 
    switch (room) {
      case 'room-1':
        socket.join('room-1')
        socket.connectedRoom = 'room-1'
        break;
      
      case 'room-2':
        socket.join('room-2')
        socket.connectedRoom = 'room-2'
        break;

      case 'room-3':
        socket.join('room-3')
        socket.connectedRoom = 'room-3'
        break;
    
      default:
        break;
    }
  })

  // 2. recibimos el mensaje en el servidor
  socket.on('message', (message) => {
    // recibimos la sala donde estamos conectados
    const room = socket.connectedRoom

    // aquí mandamos al mensaje a la sala deseada con el método de io.to()
    // en nuestro emit mandamos el mensaje y la sala
    io.to(room).emit('send-message', {
      message,
      room
    })
  })
})

Y listo, así hemos creado distintas salas donde podemos enviar información en tiempo real!

Carlos Eduardo Bracho Ramírez

student•

Increíble! Desarrollé un pequeño clon de Discord con Firebase como ejercicio. Creo que al finalizar el curso probaré con Socket io.

Pedros Pablo Montes

student•

quiero compartir mi código :)

le puse un select para escoger el chat en el que se va a mandar el mensaje y unos checkbox para suscribirse a las salas. Espero les sea utlil.

io.on('connection', (socket) => {
  socket.connectedRoom = null;

  socket.on('connectToRoom', (room) => {
    if (socket.connectedRoom) {
      socket.leave(socket.connectedRoom);
    }
    socket.connectedRoom = room;
    socket.join(room);
  });

  socket.on('message', (message) => {
    const room = socket.connectedRoom;
    if (room) {
      io.to(room).emit('newMessage', {
    	  message,
        room,
        sender: socket.id,
      });
    }
  });
});

<body>
  <ul class="room" id="room1"> </ul>
  <ul class="room" id="room2"> </ul>
  <ul class="room" id="room3"> </ul>

  <form>
    <label for="connect-room">
      Connect to room:
      <input min="1" max="3"  step="1" type="number" id="connect-room" placeholder="Enter your room number">
    </label>
    <button type="button" onclick="connectTo()">
      Connect
    </button>
  </form>
  <form>
    <label for="message">
      Message:
      <input type="text" id="message" placeholder="Enter your message">
    </label>
    <button type="button" onclick="sendMessage()">
      Send
    </button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/index.js"></script>
</body>

const socket = io();

function connectTo() {
  const connectRoom = document.getElementById('connect-room');
  const connectRoomValue = connectRoom.value;
  if (connectRoomValue) {
    socket.emit('connectToRoom', `room${connectRoomValue}`);
  }
}

function sendMessage() {
  const message = document.getElementById('message');
  const messageValue = message.value;
  if (messageValue) {
    socket.emit('message', messageValue);
    message.value = '';
  }
}

function receiveMessage({ room, sender, message }) {
  const roomElement = document.getElementById(room);
  const messageElement = document.createElement('li');
  messageElement.textContent = `${sender}: ${message}`;
  roomElement.appendChild(messageElement);
}

socket.on('newMessage', receiveMessage);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Servidor con Express y Socket.io</title>
</head>
<body>

  <ul class="room" id="room-1"></ul>
  <ul class="room" id="room-2"></ul>
  <ul class="room" id="room-3"></ul>

  <button id="connect-room-one">Room 1</button>
  <button id="connect-room-two">Room 2</button>
  <button id="connect-room-three">Room 3</button>

  <br>

  <button id="send-message">Enviar mensaje</button>
  <script src="/socket.io/socket.io.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

const socket = io()

// seleciono mis 3 botones
const connectRoom1 = document.querySelector('#connect-room-one')
const connectRoom2 = document.querySelector('#connect-room-two')
const connectRoom3 = document.querySelector('#connect-room-three')

// 1. eventos para conectarme a una sala específica
connectRoom1.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-1')
})

connectRoom2.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-2')
})

connectRoom3.addEventListener('click', () => {
  socket.emit('connect-to-room', 'room-3')
})

// 1. enviar mensaje
const sendMessageButton = document.querySelector('#send-message')
sendMessageButton.addEventListener('click', () => {
  // enviamos nuestro mensaje al servidor
  const message = prompt('Escribe tu mensaje')
  socket.emit('message', message)
})

// 2. recibimos el evento del mensaje
socket.on('send-message', data => {
  const { room, message } = data

  const li = document.createElement('li')
  li.textContent = message
  document.querySelector(`#${room}`).append(li)
})

io.on('connection', socket => {
	socket.on('connect-to-room', room => {
    // creamos una propiedad personalizada en nuestro socket que será igual a la sala donde estamos conectados
    socket.connectedRoom = ''

    // antes de que el usuario entre a una sala, lo sacamos de la sala donde estaba
    socket.leave(socket.connectedRoom) 

    // 1. el método join() nos permite ingresar nuestro socket a una sala que si existe nos mete y si no la crea 
    switch (room) {
      case 'room-1':
        socket.join('room-1')
        socket.connectedRoom = 'room-1'
        break;
      
      case 'room-2':
        socket.join('room-2')
        socket.connectedRoom = 'room-2'
        break;

      case 'room-3':
        socket.join('room-3')
        socket.connectedRoom = 'room-3'
        break;
    
      default:
        break;
    }
  })

  // 2. recibimos el mensaje en el servidor
  socket.on('message', (message) => {
    // recibimos la sala donde estamos conectados
    const room = socket.connectedRoom

    // aquí mandamos al mensaje a la sala deseada con el método de io.to()
    // en nuestro emit mandamos el mensaje y la sala
    io.to(room).emit('send-message', {
      message,
      room
    })
  })
})

Creación de salas con Socket.io

Fundamentos de Socket.io

Cómo hacer aplicaciones en tiempo real

Protocolos de comunicación: HTTP vs. WebSockets

¿Qué es Socket.io?

Socket.io vs. WebSockets

¿Cómo funciona Socket.io?

Ciclo de vida de Socket.io

Socket.io en la práctica

Creando nuestra primera aplicación con Socket.io

Obteniendo información de conexiones en el servidor

Emisión de eventos

On, Once y Off

Broadcast de eventos

Creación de salas con Socket.io

Namespaces en Socket.io

Lógica de envio de mensajes

Manejo offline

Eventos volátiles

Manejo de Middlewares

Herramientas extra

Debugging en Socket.io

Configuración para testing usando la librería jest

Testing con jest

Admin UI

Proyecto WebChat

Estructura inicial del proyecto WebChat

Sistema de autenticación

Programando la lógica del chat

Detalles finales y demostración de chat en tiempo real

Cierre

¿Quieres un Curso Práctico de Socket.io?