How to send event only to the clients that are subscribed to it?

[ondrejsevcik]

Is there some common pattern how to send event only to the clients that are interested/subscribed to that event? I would like to avoid sending event to absolutely everyone who's connected to WS server.

Example:

Let's say there is a todo.updated event that is emited every time the todo item is updated. The client is subscribed to this event only when the Modal dialog is shown. When the dialog is hidden, the client is not subscribed to this event, but still receives it since server sends it to everyone who's connected.

// Server
io.emit('todo.updated', { ...});

// Client
if (modalOpen) {
  socket.on('todo.updated', () => {...});
}

Right now, on the client, the event is simply not picked up by any code, and that works. But I was thinking if there is a way to not even send the event in case the client is not subscribed to it, to save some resources and bandwidth.

Thank you 🙏🏽

[darrachequesne]

Hi! You are right, by default the events are received even if there is no registered handler.

A subscription model is fairly straightforward to implement though:

• client side:

const subscriptions = [];

function subscribe(topic) {
  subscriptions.push(topic);
  if (socket.connected) {
    socket.emit("subscribe", [topic]);
  }
}

// restore subscriptions upon reconnection
socket.on("connect", () => {
  if (subscriptions.length) {
    socket.emit("subscribe", subscriptions);
  }
});

• server side:

io.on("connection", (socket) => {
  socket.on("subscribe", (topics) => {
    socket.join(topics);
  });

  // send an event only to interested clients
  io.to("todo.updated").emit("todo.updated", { ... });
});

[ondrejsevcik]

Thank you 🙏🏽 this is great.

[darrachequesne]

Added in the documentation there: https://socket.io/how-to/implement-a-subscription-model