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);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?