Building an instant messaging app with QuickBlox and Vue.js

Hamza Mousa
28 May 2021
how to create a messaging application with Vue JavaScript framework

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.

In this article we will demonstrate how to create a messaging application with the Vue JavaScript framework. But first, let us explain why did we choose Vue.js?

Vue is a JavaScript framework for creating web and mobile applications. It has a large community of developers who pack it with countless numbers of libraries, frameworks, and UI components.

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.

Requirements

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

@vue/cli 4.5.9

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)

Project setup

Switch to the project’s folder and install the required libraries. Our core library here is QuickBlox JavaScript SDK which provides us with all QuickBlox functionality with simple API.

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.

LowDash is a rich JavaScript functional library which comes handy for working with arrays, collections and data manipulation.

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.

QuickBlox Setup

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.

QuickBlox Init

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.

Cosmetics

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:

  1. Login: creating a login Session;
  2. Get the user details;
  3. Connect to a certain dialog;
  4. Retrieve the last messages;
  5. 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.

Conclusion

As We just scratched the serfece with this tutorial, We can see that building messaging application with Vue and QuickBlox is a hustle-free experience. QuickBlox is full of feature to create a rich messaging experiance which we can add easily with the JavaScript SDK.

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.

Share article

Subscribe for news


    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