#12 Trying out rooms in socket.io

Aaron
Dec 2, 2020
3 min read

I have really been struggling to wrap my mind around the concept and implementation of rooms in socket.io.

I have already read through the documentation. You can find the official socket.io rooms documentation here: https://socket.io/docs/v3/rooms/

But I found the socket.io documentation about rooms pretty short and kinda vague about how to really implement it (especially dynamically).

I had to look elsewhere:

Socket.io Namespaces and Rooms

https://dev.to/wpreble1/socket-io-namespaces-and-rooms-d5h

Parts I found the most interesting:

This is about how namespaces are used to separate server logic over a single shared connection.

Socket.io Namespaces
- Once you have a basic server setup, and a socket connection initialized and assigned to a variable, typically io, it’s time to start thinking about namespaces. By default, if a namespace is not specified, they will be attached to the default namespace /.
- A common use may be to separate admin concerns from those of regular users.
- Example: a video chat application also has a text chat. In order to modularize the code you can use two different namespaces.
- Although it is possible to dynamically create namespaces, it is not common practice. Rooms are usually better suited for this purpose.

This is about the concept of rooms.

Socket.io Rooms
- Rooms are subdivisions of namespaces that can be created by the server. This allows you to broadcast data to a subset of related sockets.
- The listener on the server would start by leaving the previous room with socket.leave(). Then, within the callback, the server connects the client to the new room with socket.join().

socket.on('switch room', (previousRoom, newRoom) => {
  socket.leave(previousRoom, () => {
    // use socket.to() to target users within a specific room
    socket.to(previousRoom).emit('user left room', socket.id);
    socket.join(newRoom, () => {
      socket.to(newRoom).emit('user joined room', socket.id);
    });
  });
});

The great thing about rooms is that there is no need to create them before they are needed. Socket.io handles room creation automatically if the room doesn’t exist yet and tears them down automatically if all users leave.

In the article, the writer talks about how socket.io handles rooms. That they automatically are removed when all users leave. The problem is that you probably want to handle your room objects. See all users currently connected to a specific room, place limits, or pass certain data to that room... So you probably would need to create your own rooms object outside of socket.io to keep track of it all.

I needed more info about dynamic rooms in Socket.io:

Dynamic rooms in socket.io

https://stackoverflow.com/questions/41322878/dynamic-rooms-in-socket-io

https://www.xspdf.com/resolution/50752290.html

There are a lot of grammatical and typo's in this article and I don't exactly know how up-to-date it is.

It seems I'm not the only one having trouble with this

blog about a problem (not a solution!): https://javascriptio.com/view/241555/socket-io-managing-rooms-allow-2-people-per-room-create-new-rooms-dynamically

Creating rooms in socket.io

https://javascriptio.com/view/67583/creating-rooms-in-socket-io

Rooms in Socket.IO don't need to be created, one is created when a socket joins it. They are joined on the server side, so you would have to instruct the server using the client.

socket.on('create', (room) => {
  socket.join(room);
});

In the example above, a room is created with a name specified in the variable room. You don't need to store this room object anywhere, because it's already part of the io object. You can then treat the room like its own socket instance.

io.sockets.in(room).emit('event', data);

// client side code
const socket = io.connect();
socket.emit('create', 'room1');

// server side code
io.sockets.on('connection',(socket) => {
  socket.on('create', (room) => {
    socket.join(room);
  });
});

After reading all these articles. I still haven't found an ideal solution. I want to display all currently playable rooms. And extract all kinds of data from it, so I can use it later.

Other things I searched for:

A way to get all created rooms:

Get a map of all rooms in top level namespace with the adapter object.

https://stackoverflow.com/questions/42738445/socket-io-io-sockets-adapter-object

This will give you all the rooms, including the ones that every user gets by default (The one linked to their unique socket id which is supposed to make private messaging easier). This solution isn't ideal if we only want to see the Rooms we specifically created.

Socket.io rooms tutorial

This tutorial was good in explaining the basic concept of rooms. But it was more focused on a simple chat app and it still lacked the dynamic creation/handling/removing of rooms part.

I was looking for a way to get all currently connected users to a specific room

https://stackoverflow.com/questions/9352549/getting-how-many-people-are-in-a-chat-room-in-socket-io#24425207

Trying to implement rooms

I decided to try and start implementing rooms anyway.

I decided to work in small increments:

Login (with a unique name)
Go to the second page / render new components
Send data (to server, from server to everyone but sender... Tip: https://socket.io/docs/v3/emit-cheatsheet/ )
Show currently connected participants.
create room
join room
view rooms