How to create notification system like the one in hashnode ? Is it done using websockets ?

I am creating a pretty much same webapp like hashnode where I want a notification system . I am able to change the color of the bell or notifcation icon using websockets but thinking is it right? I am using reactjs in frontend so i am not sure it will be done via socket. My flow is when a like gets clicked it goes to the api and socket emit the event with like dara from db . Now if the auth user is belonging to the recieving end which is in the like data the it will get notified to that user! Is the flow right?

Usual ways to keep client in sync with server are;

Polling via REST: Basic call made every X duration but is inefficient if calls are made very frequently.
Polling via Socket: Establish a single socket connection and listen to channels. Best to use if sync has to be made almost realtime but socket's lifecycle has to be maintained properly to avoid leaks.

So w.r.t building notification system, I'll write down how I do it, might be of help for you:

Establish socket on application load if user has already authenticated otherwise establish conn. after Login/Signup success
Listen to some X channel on the established socket to keep Notification unread-bell number(like in Hashnode) in sync, so that as soon as new notification arises in the database, the server will push the new unread count on the socket to the same X channel.
On click of Notification bell, you make server call to get top X notifications along with read/unread status.
(optional) Another version of Point 3; Persist unread count and first response of Get Notifications API call in the memory. After that, make server call only if unread count is more than zero otherwise show the previously persisted notifications so that you'll save unnecessary network call.

Cheers!

@Aniketh: Middleware is not necessary for establishing connection. Usually, establish socket connection at the start point of your server call and in the middleware, you manage the socket's other lifecycle stages.

Also, I'm answering with several assumptions in your approach. There could be other efficient approaches too

also Should I maintain a different notification table? Vishwa Bhat

@Aniketh Yes dude otherwise youll not be able to show all previous notifications when user clicks See All Notifications

I just tried opening up the developers console and typed socket because the variable wasn't encapsulated it emits a whole data about the current connection, so they do use sockets.
Yes your flow is right.
Consider user X is the one who receives notifications. Now user Y hits like button and you make a web request to your backend updating the DB. Now you need to push to that socket client of the user X and manage that data on the receiving end.
It doesn't matter if your are using Reactjs or something else. You can do this. You can give this a try socket.io , npm package npmjs.com/package/socket.io
You can even keep open the network tab and watch how hashnode handles this.

Thanks . Yeah checked earlier also about the hashnode sockets in console but was not sure it was used for notification only

you can test the SocketIO events in real-time while you're developing it with Firecamp.

Firecamp is the GUI client for the SocketIO testing, can install from here bit.ly/2rYbt7K

Thread

How to create notification system like the one in hashnode ? Is it done using websockets ?

Responses(2)

Recent threads

Search Hashnode

How to create notification system like the one in hashnode ? Is it done using websockets ?

Responses(2)

Recent threads