Pusher to get Real Time Updates For Your WebApp.

Introduction

I recently discovered Pusher that provides real time communication amongst different processes whether it be server to server or server to client.

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:

	const pusher = new Pusher({
	appId: "<My App Id>",
	key: "<My Key>",
	secret: "<My Secret>",
	cluster: "<My Cluster>",
	useTLS: true
	});
	const db = mongoose.connection;
	db.once("open", () => {
	const messageCollection = db.collection("messages");
	const changeStream = messageCollection.watch();
	changeStream.on('change', change => {
	if (change.operationType == "insert") {
	const messageDetails = change.fullDocument;
	console.log(messageDetails);
	pusher.trigger("messages", "inserted",
	{
	name: messageDetails.name,
	message: messageDetails.message,
	timestamp: messageDetails.timestamp,
	received: messageDetails.received
	});
	}
	else {
	console.log('Error triggering Pusher.');
	}
	})
	});

view raw server.js hosted with ❤ by GitHub

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:

	useEffect(() => {
	const pusher = new Pusher('<My AppKey>', {
	cluster: '<My Cluster>'
	});
	const channel = pusher.subscribe('messages');
	channel.bind('inserted', (data) => {
	console.log("New Data: ", data);
	setMessages([...messages, data]);
	})
	return () => {
	channel.unbind_all();
	channel.unsubscribe();
	}
	}, [messages])

view raw client.js hosted with ❤ by GitHub

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.

Comments

[Code With Sushil]

Good