How to Create a Real-Time Messaging System with Meteor and QuickBlox
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?
- Large ecosystem using NPM and Atmosphere;
- Meteor is agnostic, it supports React, Vue, Blaze, and Angular;
- Mobile-ready through Apache Cordova;
In this tutorial, we will explain how to create a messaging app with meteor and QuickBlox messaging service which offers several messaging functionalities.
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
$ meteor npm install quickblox
$ meteor add hamzamu:settings
4. Install the required libraries
$ 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
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.
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.