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 1

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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