Cursos Empresas Blog Live Conf Eventos Precios

0:0025:43

Creación de salas con Socket.io

Curso de Aplicaciones en Tiempo Real con Socket.io

Clase 12 de 26

Clase 12 / 26

Andrés Esteban Rodríguez Jiménez

Hace 3 años

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!

Comentarios (8)8 comentarios

Carlos Alejandro Hernández Mejía

Hace 4 años

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

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

Roberto Contrera

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

Julian David Alzate Cuervo

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

Henry Corredor

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

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

Diego Reyes Cabrera

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

Carlos Eduardo Bracho Ramírez

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

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.

Creación de salas con Socket.io

Progreso del curso

Fundamentos de Socket.io

Socket.io en la práctica

Herramientas extra

Proyecto WebChat

Cierre