Learn how to use Google’s Firebase Cloud Messaging as a pub/sub service in your React app in this detailed step-by-step tutorial.

Firebase Cloud Messaging (FCM) is primarily known for simplifying the process of sending a notification to client devices. In this post, we are going learn how to use Firebase Cloud Messaging as a push notification service and a pub/sub service in a React application.

What is a pub/sub system?

A publish/subscribe system consists of two parties: the publisher responsible for sending out a message to the system, and a subscriber, who actively listens to that notification from the system and can decide to further act on the message.

A use case for a pub/sub system is stateless communication from a server. When verifying card payments, it is almost impossible for a server to let the client know it has verified the payment and granted the service requested by the user. We can easily do this using a pub/sub system.

With a pub/sub system, the browser listens to a particular topic while the server sends a message to the topic. Immediately the browser receives the message, and it can continue with the rest of the client-side processing.

Setting up a pub/sub service with FCM in React

In this tutorial, we will learn the following:

• How to set up FCM on Firebase Console and create a new project
• How to set up a React App to include the Firebase SDK
• Essential concepts in Firebase Cloud Messaging
• How to listen to a message on a particular topic
• How to publish a message to the topic using an HTTP request to the FCM API

Let’s get started!

#firebase #cloud