How to Build an Instant Messaging App with QuickBlox and Vue.js
QuickBlox is communication as an infrastructure platform (CPaaS), which focuses on providing secure privacy-aware messaging functionalities to enterprises. The current QuickBlox features include real-time instant messaging, HD video calling with high-quality audio communication, file-sharing, and push notifications.
QuickBlox has a set of software development kits (SDKs) with full native libraries for mobile platforms such as iOS and Android. It also offers full support for Flutter, React Native, and RESTful API.
To say the least, the platform is a Swiss Army knife for creating interactive rich communication and messaging apps that can cover different use-cases and scopes.
Vue’s vast ecosystem is rich with open-source components, code samples, and frameworks that ease the production of a stable solution.
With Vue, developers can create several types of applications starting from statically generated websites, web components (web widgets), mobile applications, control dashboards, API-based websites, and highly dynamic websites with its server-side rendering capabilities.
Vue can be used for creating mobile applications with frameworks like Ionic and Framework7. Furthermore, with some tweaks using Electron, developers can build a fancy desktop application with it.
You can install Vue with NPM or YARN. note that it requires admin permission to be installed on macOS and Linux.
npm install -g @vue/cli or
yarn global add @vue/cli.
Now let’s make sure Vue is installed.
$ vue --version
Create your project
To create a new project with Vue, we simply use
vue create project_name.
vue create quickblox-chat
Soon as you enter the project creation command, Vue will ask you which Vue will you use, we will use Vue 2 because it has a larger ecosystem for plugins and UI components.
Default ([Vue 2] babel, eslint)
Buefy is a Bulma CSS framework packed as Vue components. We need it here for more than styling and the design, as it also has many reactive libraries like toast, modal, dialog, alerting and more.
Moment.js is a lightweight library for data, time, duration and time-differences manipulation.
yarn add quickblox
yarn add buefy
yarn add lodash
yarn add lowdb
yarn add moment
yarn add array-sort
yarn add vue-moment
Here we will setup our libraries in the main.js.
In order to start working with QuickBlox API, you need to create an application from the QuickBlox developer’s dashboard. This step will provide you with the Application ID, Authorization key and Authorization secret which you need for creating your app.
Now as we have everything ready let’s import QuickBlox SDK and setup the app credentials.
Setup local database support
LowDB is lightweight local JSON database library. It’s powered by Lodash and supports local flat-file, in-memory database and localStorage for the browser. I use it for small projects as a reactive storage for configurations and to provide a local database support.
In the next code snippet at App.vue we will import `lowdb` and setup our local database support. we can setup the default configurations for our app as we see fit.
Let’s start coding
After the previous steps of configuration and setup, It’s the time to start building our QuickBlox messaging application.
As you noticed in the code above, we initiated QuickBlox connection within
created section which will be used as well to subscribe for new messages.
Creating Login Template
First step of our workflow is the user’s login. Here we will create a template for user’s login in App.vue.
We will create everything in one file to make is easier to read, modify and edit. The main goal is to demonstrate using Vue to build QuickBlox-based apps. You can re-create the experience later using the full power of Vue, create a re-usable components, complex routes, vues and of-course add more QuickBlox functionalities.
In `App.vue` style section we will add a minor style to improve our user experience.
Login to QuickBlox
In this step we will create a login function with a toast function for notification.
It’s the time to put everything to test and make sure our login works.
Creating a messages interface
Soon as you are logged-in we can connect to a certain dialog (room, group) and retrieve messages
Connect to a channel or a dialog
In the next Vue code snippet, we are implementing a full QuickBlox workflow: login, getting a user’s ID, connecting to a dialog which can be one of three:
- 1-1 dialog which acts like a direct message between two users;
- group dialog is for group messaging;
- public dialog that works similar to a public channel.
The next code will work the same for all the mentioned dialog types.
Our steps here will be as follow:
- Login: creating a login Session;
- Get the user details;
- Connect to a certain dialog;
- Retrieve the last messages;
- Send messages to the dialog.
Get User details
To get the user details like the full name and email , we have to access the users data through the API. Here we use
QB.users.listUsers to list all the current users. We will save this in a separate collection.
Send a new Message
The last step will handle sending a new message. It requires the dialog ID and few optional parameters. One of them is significant in-case you want to save the message on the server.
Using LowDB as a local collection
You may notice that we didn’t use LowDB yet for this application. It can be used to save configurations, save certain JSON collections, perform search in a complex collection and of course as a localStorage interface.
Scroll to the recent message
We need to automate the scrolling to the last message.
The application can be extended with QuickBox WebRTC functionalities for video calling and conferencing apps.
With some tweaks, this Vue app can work on Desktop, deploy to a web server, or even build for mobile with Cordova.