It’s 2020 and most websites and apps are now required to update in real-time, as users are no longer used to refreshing the page to see the latest updates. From social media to news websites, new posts are automatically shown while browsing to ensure the visitor gets the latest updates as soon as they’re available, improving the user experience and making sure the visitor stays on the website for longer.

This is especially useful in web apps, as they usually require user interaction and often have multiple users working upon the same page, so realtime updates are essential to avoid information overlap.

Lately, we’ve been exploring sockets and how we can improve the user experience of our products by making them update in real-time for all users.

We use Socket.io, a javascript framework used by Microsoft Office and Trello that allows us to add real-time functionalities to many of our projects, from our Laravel CMS to other Headless CMS projects. 

“Socket.IO enables real-time, bidirectional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.”

From socket.io

Demo of a real-time taskboard 

In this demo, you can see an example of a real-time update of a task board, with the event being triggered by the action on the left-side browser window and the changes being immediately shown on the second browser window. This demo project was built using Angular and Strapi, a NodeJS headless cms we’ve used for API driven projects. 

We’ve explored sockets in different sections of this demo app, such as user management, updating events on a table or calendar and a private chat between users.

Demo of a private chat

User chats are usually the best example to showcase the realtime functionality of sockets. Before sockets we would use ajax polling on the client-side, creating continuous requests to the server to check for updates. This approach has several disadvantages, such as delays - depending on the interval set - and many unnecessary requests.

By using sockets, we move event handling to the server-side and the client only needs to fetch data when an event is triggered.

Another way we’ve been using sockets was in one of our recent client projects in which we used Mediagest, our Laravel CMS. This project required real-time in order to update bids on the website, as well as show instant notifications to the user. To achieve this we created a simple NodeJS app as a SocketIO server and created the endpoints we needed.

We initially considered using Pusher to handle the broadcast of events from Laravel back-end, since Laravel comes with Pusher enabled, but Pusher is a paid service and we found that SocketIO worked just as well for our project and was free and open-source.

We used Laravel Events to post to the SocketIO app whenever there’s an event to schedule. In our NodeJS app we added the different endpoints for each type of event and we then could either send the event to all clients or to a specific client. For this project, we also needed to integrate the server app with express-session in order to handle user sessions.

Sockets were especially useful to display instant toast notifications, which are used across the entire website and not dependent on a single view and can be triggered by multiple event types.

Instant toast notification triggered by socket event

Real-time is definitely here to stay and we’re excited to use in more projects: the next one could be yours! Contact us to know more about how we can help you with your real-time app. 

Main post photo by Christina @ wocintechchat.com on Unsplash

---