NA
339 6
Asked
Updated
Viewed
14k times

I want to build something similar to facebook's notification system. I would like a real-time update or alert to show in the user’s web browser when a new notification is entered into my database.

I can accomplish some of this with AJAX and after I click the submit button on my form a notification will automatically popup. However, it will not automatically pop up on the recipient's page who should also receive this notification when they are logged in without a refresh.

How can other users all receive a real-time update in their web browser about this notification without having to refresh?

add a comment
1

2 Answers

  • Votes
  • Oldest
  • Latest
Answered
Updated

With Ozzu 2.0 I opted to go a route that uses a newer technology called web sockets which not only provides immediate real time feedback when the event occurs, but it is also more efficient. So in the same above scenario if an event just occurred, then that user (or multiple users) would immediately receive that event. I am using this for notifications and to allow members to see people post and other events in real time. So as another example, if you are on this thread right now and I hit submit on this post I just wrote, you would see it immediately flash in without refreshing your page! For web sockets I am using Socket.io on the client side with JavaScript, and Laravel Echo Server on the back-end which is a NodeJS server. My application will send an event to the NodeJS server which then broadcasts via web sockets to every listener.

With Web Sockets, there are a few more pieces you will have to consider, and one of those is having a web socket server setup that will listen to a port. Typically this will be a port other than 80 or 443 if you are using the same IP address as you will likely have your other HTTP server listening there such as Apache, Nginx, Litespeed, or Microsoft IIS.

If you are on a shared host that will also mean that you may need to contact them before attempting this as there will be a few requirements you will need to sort out:

  1. Are you allowed to have a web socket server/daemon running?
  2. Firewall? Will you be able to open a port for the web socket server?
  3. SSL Certificate - I automate this with LetsEncrypt, but that is its own challenge to setup.
  4. The WebSocket server requirements itself

If you follow the instructions on the socket.io start page you will be installing many of the requirements very easily via NPM, which is the Node.js package manager. Your host may or may not have Node.js available to you.

Keep in mind that if you are unable to do this via Node.js, there are all sorts of options out there. You could use a PHP only solution for example such as Ratchet. If you look around I am sure you will find all sorts of different types of web socket servers. Still, for whatever solution you find it will be a daemon that is constantly running on your server, listening to a specific port (typically you can configure this), so you may still need to contact your web host.

Just remember there are at least three major pieces to using web sockets, and right now we are only talking about the first which is having a web socket server setup. You will also need to have the client-side JavaScript listeners setup that waits for events from the web socket server and then responds accordingly (like showing an alert to your user), and then likely logic in place with your main application that will communicate with the web socket server such as when you need to broadcast an event.

Overall there are many paths you can go but could be a worthy investment depending on your situation. If your time/resources are limited, HTTP Polling is still a good solution too.

  • 0
    Web sockets have probably come a long way since I last looked at them, but they seemed pretty insecure at the time. Merry Christmas btw, it's been a while. — this213
  • 0
    Thanks for all the info, I think in the long run, web sockets are the way to go. I was reading the socket.io start page and it says I need to install express@4.15.2 for dependencies. Is that something I'd need to contact my web host about? — natas
add a comment
0
Answered
Updated

You need to segregate and automate the component that's supposed to be dynamically updating and the script controlling it. The script should be constantly looking to see if there's an update to show at some interval you determine. This means some js script should be submitting to a backend script which will query your DB (or wherever you store such things) to see if the information there is different from what it was. If it is, the script should return the properly formatted info to your ajax script which will then display it.

  • 0
    What this213 described is called http polling. This has been a very common technique and will certainly do the job without having to refresh the page. I have seen many live chat systems go about it like this. So for example with polling if an event just occurred you would not receive that message until the next time you poll the server to see if any new messages are available. So if you poll the server every 30 seconds via AJAX, then it could take up to 30 seconds to receive the message. If you poll every 5 seconds, then could take up to 5 seconds to receive the message, but you are also adding more load to your server to hit it more often. Multiply this by the number of visitors on your website since every visitor will need to be constantly polling the website when they are on it to look for new messages. There however is one major advantage of HTTP Polling, it would be much easier to set up compared to web sockets as you would simply need an endpoint on your server to make an AJAX GET/POST request to, and then you simply do what you want with the response. Typically you would be able to do this on any web host with no problems. — Brian Wozeniak
add a comment
0