implementing stackoverflow's notification system with django

Question

I've seen questions like Notify panel similar to stackoverflow's. It talks about the client side of the implementation.

I'm looking for the information about the server part and the networking part (how client get notified real time)

A user scenario might look like this:

1. something happens for user-a
2. server creates a message for user-a in DB (for persistance) : I'm using django-activity-stream for this
3. server sends (new or last 10) messages to user-a's browser (when user-a logs in or when event happens)
4. browser displays the message (Notify panel similar to stackoverflow's part)
5. if user acknowledges the message(clicking the inbox in SO), all the unseen messages are marked as read and recorded in server

I have questions on the following steps.

• (3) Not sure but https://github.com/stephenmcd/django-socketio could be used.
• (4) The answer to the question says client has the json data received from server.
  Does server send messages to user for every request?
  Does client check local storage(I'm new-to-web, what's a good local storage for this purpose?) and request the json data if he doesn't have them in the local storage?
• (5) How should I implement this seen and unseen? django-activity-stream doesn't have notion of them.

Answer 1

This can easily be implemented by using django-channels.Because you need websockets to have a two way client server communication.

Showing notifications is a two way communication. Server notifies the client that a new notification available. The client shows this notification to the user, and then when a user interacts with the notification, the client notifies the server that notification was read, so the next time user loads a page, only unread notifications are shown.

There are some steps involved.

1. Your server needs to be able to support websocket communication. django-channel converts the application to ASGI.
2. Create a websocket consumer that can send and receive messages to a websocket.
3. When user opens the application, the client creates a websocket connection channel to the server.
4. Whenever a new notification needs to be sent, the server will send the message to the channel.
5. On receiving the message, the client renders the notification on the webpage using Javascript. Like showing the new message icon, appending the new message to the list of messages, etc.

Now, one part is done. Your user has been notified. Coming to the second part.

6. User sees the bell icon or whatever, and click on it, he sees the notification details (this was rendered by the js, when client received a message).
7. User clicks on the notification/bell icon. At this time, the client will send a notification back to the server, so that server can update what all notifications were read.

I created an app that updates the client when a new message is to be shown. Github link.

You can also refer to a similar question: https://stackoverflow.com/a/55656848/4186008