No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de salas con Socket.io

12/26
Recursos

Aportes 6

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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);

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é

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

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!

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

![](file:///home/pedro/Im%C3%A1genes/Capturas%20de%20pantalla/Captura%20desde%202023-12-04%2001-47-33.png)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. <https://github.com/PedroPab/WebSocket/tree/Chats> ![](file:///home/pedro/Im%C3%A1genes/Capturas%20de%20pantalla/Captura%20desde%202023-12-04%2001-47-33.png)