FeathersJS Channel Subscriptions
Tags: feathersjs, socketio, javascript, realtime
Published: 2019-02-26 21:18:49

---
title: FeathersJS Channel Subscriptions
published: true
tags: feathersjs,socketio,javascript,realtime
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*KJBI9GVIZQQQb3BDqRdmxA.jpeg)<figcaption>Photo by <a href="https://unsplash.com/photos/qMMzHPF3ajQ?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">chuttersnap</a> on <a href="https://unsplash.com/search/photos/channels?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

[FeathersJS](https://feathersjs.com/) Channels are a great way to handle real-time data. However, sometimes you might only want certain data on a certain page. For example, you may have a chatroom app which has multiple rooms and you only want to provide data for a room that a user is viewing.

### On the server

To be able to handle channels on the fly, I am going to configure a custom service which will handle joining and leaving channels.

{% gist https://gist.github.com/Mattchewone/635286bc0bc92fbe1b1c23dcbd4b9e98 %}

In the above snippet custom service class we use the create method to join the channel and the remove method to leave the channel.

#### Service

Now to configure the service to emit data to the channels, within the \*-service.js file, we can configure a custom publish. This will emit data only to the channels which exist and will filter out the current user. So the user that created the message within the room, won’t get an .on('created')event when they create a new message, but all other subscribed users will get this.

{% gist https://gist.github.com/Mattchewone/eb415c18790142f24659fc1c667fda03 %}

Awesome! Now we are only emitting data to those that want it. Now let’s take a look at setting up the client.

### The client

For our discussion here, I am just going to show a brief example of where you would emit the subscribe/unsubscribe events.

{% gist https://gist.github.com/Mattchewone/ef48d9a42bf4a451b0fa88c9908dbf91 %}

The above example is of a CanJS component. We use connectedCallback which is a lifecycle hook called after the component’s element is inserted into the document. This can also return a function which will be used when the component is torn down / removed from the document.

Within the connectedCallback we can emit the subscribe event, and in the teardown, we can emit the unsubscribe. When a user navigates to this component it will automatically subscribe the current user to the room, so all messages that are created with this roomId will be sent to this room channel.

To see how this affects your app, if you open up the network tab in devtools, and select the ws sub-tab you will see in the frames section all the data transferred to and from your server.

If the server was configured to publish to the authenticated channel which would be all logged in users. Every user would see created events for messages and rooms which they are not viewing. This means that the server is sending data to those that aren’t using it or require it, so we can prevent this by only sending data to those that are subscribed to specific channel.

Thanks for reading.

If you noticed anything incorrect or that could be improved please comment below. I appreciate all constructive feedback.

[![](https://cdn-images-1.medium.com/max/673/1*nkyFXd8M6S3KXTNtFsCylQ.gif)](https://monzo.me/matthewjohnchaffe/2.50)

* * *