How to add message and Notification functionality in the web app?

General Web Dev
1

Hi there

I am designing a web application In which I need functionality of when a new messages is arrived or their is a new notification then I want to notify user for that by showing colors like sitepoint.com

I wanna ask which architecture I should follow and what should be data model for this task?

2

Sort answer, whatever you’d like. :smile:

Long answer, take a look at how some of the open source products do it. Wordpress does it in the Admin area (for updates to plugins and what not), Discourse does it, both of these are open source.

From a very high level you at least need the following

  1. A way for a user to subscribe to notifications (it may be that all users are automatically subscribed, which removes this step)
  2. A place to store notifications (example: database table)
  3. A way to create/update notifications (your application will create the notification, the user will update it, when they click on it/view it, it clears the notification)
  4. A way to display the notification (using HTML/CSS, maybe AJAX to do some polling to check if new notifications were found?)

Now a bit more information about how Discourse uses them (don’t quote me on this, as I may be wrong). Discourse has a table of notifications and it has a class/API to create notifications. When a topic is created/replied to/liked/shared/edited, there is a background task that runs and pushes all notifications to the appropriate users.The AJAX long polling on Discourse then checks for changes to the notification count and updates the numbers in the top right corner accordingly. I want to say it runs every 2 or 3 seconds (it may actually be shorter or longer than that though). When you click on the notification bubble, it calls an AJAX request to populate the list of notifications, so that gets updated only when the notification bubble is clicked.

Did that help?

3

@cpradio

Thanks at least giving me way to think or How to Fish.

I am also trying to do this using JQuery+Ajax+HTML CSS.

I will use your suggestion and later update this post what I got

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.