How to Create a Real-Time Messaging System with Meteor and QuickBlox

Hamza Mousa
23 Jul 2021
Real time messaging with QuickBlox and Meteor

Meteor is a JavaScript development framework for creating real-time progressive web apps and cross-platform hybrid applications.

Unlike other JavaScript frameworks and platforms, Meteor offers different JavaScript UI frameworks for the client-side. It works seamlessly for React, React Native, Angular, Vue, and Blaze frameworks.

Meteor uses MonogoDB; a NoSQL document database with its own version that works from the browser Minimongo with full data synchronization support.

We have written a snap tutorial on how to use Meteor and Cordova with QuickBlox to create iOS and Android apps, you may check it out here.

Why did we choose Meteor?

  1. Large ecosystem using NPM and Atmosphere;
  2. Meteor is agnostic, it supports React, Vue, Blaze, and Angular;
  3. Mobile-ready through Apache Cordova;
  4. Scalable;

In this tutorial, we will explain how to create a messaging app with meteor and QuickBlox messaging service which offers several messaging functionalities.

QuickBlox offers several tools that work with meteor with include a JavaScript SDK, React Native SDK, and a REST-API.

We will use QuickBlox JavaScript SDK which includes all QuickBlox features.

Let’s start

1. Get Meteor

If you are on Linux or macOS, open your terminal and write:

curl https://install.meteor.com/ | sh

If you are using Windows you can install Meteor as an NPM package:

npm install -g meteor

2. Setup a meteor Project

In this step we create our Meteor project

$ meteor create quickblox-meteor
$ cd quickblox-meteor
$ meteor npm install

3. Install QB

Now, we will install QuickBlox JavaScript SDK which we will use to connect, login, send and receive messages.

$ meteor npm install quickblox
$ meteor add hamzamu:settings

4. Install the required libraries

I am using Materialize CSS framework which works seamlessly with Blaze, also will install moment.js (Date and Time manipulation library) and loDash (Functional JavaScript library).

$ meteor npm install materialize-css
$ meteor npm install moment
$ meteor npm install lodash

5. QuickBlox Setup

We need to setup QuickBlox CREDENTIALS that we will use to connect to our QuickBlox developer account, login, create dialogs, and retrieve messages.

Note that is not the best practice with Meteor on the client-side, You may use .env file or a setting file on the server-side, but we used this method as a demonstration which can also be used for Mobile development.

6. Initiate the app

7. QB login

Here, we will create QuickBlox login template and logic.

8. DB setup (for dialog and users)

Meteor offers a client-side Mongo collection “MiniMongo” which we will use to save, sort, search and filter our messages and users. The collections are temporary but we can use some packages to make them persistent.

9. Messaging UI

As we are getting messages into our a local MongoDB collection, we will need to display it in our view. Using helpers and Blaze template.

10. Get dialog messages

In the next code snippet, we will fetch the last dialog messages.

11. Subscribe to new messages

Wrapping up

Here we wrap up our code with a few more tweaks that will come in handy when developing a real-life application.

Note that is a demonstration with a full client-side capability, You can make your own server-side version with a similar approach and make use of Meteor amazing tools.

Conclusion

In this article, we explored how can we integrate QuickBlox with Meteor, send messages, receive a new message, subscribe to new messages, and connect to channels (dialogs). This simple app can be extended to take the full potential of Meteor real-time reactivity and multi-platform support.

The main core advantage of using Meteor is: the developer can have access to two different package systems (NPM and Atmosphere) as well as choosing the right framework to do the job.

Using Meteor gives developers different options and a wide-range of libraries and frameworks to use. Developers can create mobile apps, Interactive web apps, desktop apps, server apps, and WebRTC-based video communication applications.

Share article

Subscribe for news

Get the latest posts and read anywhere.


    Thanks for subscribing!

    You will receive an email shortly to verify your subscription.

    Check out your inbox!

    Ready to get started?

    QUICKBLOX
    QuickBlox post-box
    QuickBlox x

    Subscribe for news

    Get the latest posts and read anywhere.


      Don’t forget to visit our social networks:

      • QuickBlox twitter
      • QuickBlox fb
      • QuickBlox linkedin
      • QuickBlox medium
      • QuickBlox git
      • QuickBlox instagram