This content originally appeared on DEV Community and was authored by mrsharm
Introduction
I recently discovered Pusher that provides real time communication amongst different processes.
I followed this tutorial for a MERN stack based messaging app I am currently working on. With just a few lines of code after setting up the Pusher project, I was able to receive updates of my MongoDb instance on my frontend.
Basics
Pusher allows you to send and receive events from channels.
Server Side
From the server side, you trigger events based on the event names on a particular channel such as the following:
The library to be used on the server can be installed by the following command:
npm i pusher
Client Side
The client side, you subscribe to particular channels and bind to events both based on the respective names such as the following useEffect:
The library to be used on the client side can be installed by the following command:
npm i pusher-js
Conclusion
To summarize in the context of MERN apps, in your server, you observe changes to your data from MongoDB and send those updates on particular channels and with specific event names. And on your front end, you subscribe to the channel and bind to the event names for your real time updates.
The setup was smooth and the free tier benefits are definitely generous with great documentation.
I'd be interested to hear about your experience with other similar technologies or any other information about Pusher.
This content originally appeared on DEV Community and was authored by mrsharm
mrsharm | Sciencx (2021-11-07T09:36:25+00:00) Pusher to get Real Time Updates For Your WebApp.. Retrieved from https://www.scien.cx/2021/11/07/pusher-to-get-real-time-updates-for-your-webapp/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.