I have made a website with MERN. Now I want to add single channel notification in it. It means if admin post something, user will get notification in notification section. Never done it before, so no idea. If the admin posts something, I can easily show it in the notification section, but I am facing, the problem is with the place where the notification bell icon has a dynamic counter. The notification bell counter/badge will actually show how many notifications are coming in the bell icon. If you click on the bell icon again, the counter will be zero.

How can I do this in MERN .notification bell icon

CodePudding user response：

You can use socket.io to create communication channel which broadcast the server message to all the connected devices.

Below is general overview:

You have to create socket server in backend(express) and then emit the broadcast event from there.

io.emit('server message', { message: 'some value', otherProperty: 'other value' }); 
// This will emit the event to all connected sockets

You can write socket code for the client to listen to the event.

socket.on('server message', function(msg) {
// show the notification here
  });