Methods to introduce notifications on a webpage without page refresh - javascript

We have webpage where there is notification tab. The notifications are taken from a notification table if there are any for a particular user. This event is fired when the page is refreshed.
We now want to implement something where the notification should be displayed to the user instantly without refreshing the page.
I know about SIGNALR with sql dependency. But with sql dependency there comes database polling overhead.

You can have SignalR notify clients of database changes without polling the database.
Have a look at this tutorial about SignalR database notifications.\
It works the following way: Exactly after you update the database, you call the method to update clients along with the data.
Hope this helps. Best of luck!

Related

AJAX - How can I build a notification system, that is constantly getting updated, without slowing down my website too much?

I am a beginner to web development, and I am trying to do a notification system with AJAX and jQuery.
In my web application, I have a comment system where you can mention another user. After a comment mentioning a certain user has been written, a new entry on my notifications table will be added, containing the comment, the id of the user who commented and the id of the user(s) who will receive the comment. After the notification is stored in the database, I want the person that was mentioned to receive the notification.
To that effect, I decided to use AJAX. Using the setTimeout() method, I am sending an AJAX request to the database every 2 seconds, and with that, I can display the notifications visually to the user that is meant to receive them.
My only concern is that this will slow down the site once I connect it with a server.
So, I was looking for a way that would allow me to implement a notifications system without slowing the site too much, since the one that I am using currently doesn't seem very efficient.
I would appreciate any help.

Get DB Record Update notification with HTML SSE

I would like to allow a user via browser to receive updates if a database record has been changed in (near) real time without reloading the web page.
The idea is:
User opens url /dbrecord.php?id=12345
Registers for SSE (or something else) to receive updates to the record
Received on screen notification of what has been changed in the record without reloading the page
However this needs to be performant as there are a lot of DB Change events and a lot of potential users. Can you please let me know if the approach is good or are there better technologies / approaches to build something like this?
UPDATE: Found this - Server Side Events with PHP & MySQL But it requires a while(true) loop in the PHP script and this cannot be good to have the SQL Query in there?! Any feedback?
Thanks,
fj

How to watch user requests from server?

I am developing a website using J2EE(JSP,struct2) and Apache Container. My website will be some kind of scial media webiste like facebook.
All the thing I like to do is to change the user login status in database to active after user login and change it again after user logouts. Those active user list has to be shown to other users as well.
All I am thinking is to change user active status as soon as user login to the website and will use ajax for up-to-date active user list. The thing I have trouble is that I want the server to check if the user is still active and still using the website every 5 seconds or whatever.
To do so, all I am thinking is to watch the user from server if it is still sending the requests to the server. How can I watch like that?? Where can I read the tutorials to write such cde.
You will need 2 parts to solve your requirements.
JavaScript on client
Ajax receiver on server
Client:
On the client side can you use a idle handler which sends a request after some idle time on the user side.
Choose one of this solution
https://www.startpage.com/do/asearch?cat=&query=inactivity+user+javascript
Server:
On the server side just receive the Ajax request and write it to a DB. Afterwards you can do whatever ever you need with this record
Two suggestions:
First: Using something like socket.io instead of AJAX in order to make it more
lightweight on the server side.
Second: Consider delegating the inactivity detection and announcement to the client.

div popup when there is new updates available

I've implemented RSS Feed for my application . But , I want that there should be a new updates like Facebook new notification arrives while you are logging on, I mean it depends on user he/she want to see that notification or not.
So , I just want that kind of div appearance . Is there any plugin for that in javascript/jquery?
What you are looking for is called long polling.
Basically, your client javascript requests the update from the server, but the server keeps the connection open and answers not until update data is available.
This is the most gentle way of doing this, but the implementation depends on your server side framework/language.
See this link for a good introdcution: http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery
The other option you have is setting a timer in javascript and poll every once in a while the server for updates.

Javascript Best Practise: Syncing Browser Windows

I have an html5/javascript application in which multiple users can be viewing the same set of data of any given time. For the sake of a real world example, lets say its a calendar type page.
So user1 is looking has the browser open and looking at the calendar page and user2 is also on the calendar page. User2 makes a change to the calendar and i'd like (as quickly as possible) for those changes the be recognized and refreshed on user1's screen. What is the best way to do this?
I'm thinking about have a mysql table for active users that stores the page they are currently on and a timestamp for its last update, then use ajax calls to ping the server every few seconds and check for an updated timestamp, if its newer than what they have client side, the new data gets sent and the page "reloaded." I am putting reloaded in quotes because the actual browser window will not be refreshed, but a function will be called via javascript that will reload the page. Sort of the way stack overflow performs its update checks, but instead of telling the user the page has changed and providing a button for reload, it should happen automatically. If user1 is working away on the calendar, it seems it might be quite annoying for user2's screen to constantly be refreshing...
Is this a horrible idea? Is pinging the server with an ajax request every few seconds going to cause major slow downs? Is there a better way to do this? I would like the views on either users side to be real time because its important that user1 not be able to update an element on the calendar page that user2 has already changed.
Update: based on some web sockets research it doesnt seem like a proper solution. First its not compatible with older browsers and i support ie8+ and second i dont need real time updstes for all users on the site. The site is an account based applicatiin and an account can have multiple users. The data needs to sync between those users only. Any other recommendations would be great.
You need realtime app for this. You should have a look at socketio. Everytime a user log in, you make him listen for changes on the server. Then when something changed on the server, every users listening are notified.
you can find examples on the official website : http://socket.io/

Categories

Resources