Quick Start

QuickBlox SDK helps you implement real-time chat, video chat, and push notifications to your app. You can fully concentrate on your mobile app development.

QuickBlox JavaScript SDK can be used for web development solely or with all popular libraries like ReactJS, Angular, etc, for chatbots development on Node.js and mobile development on Cordova.

Start with sample apps

If you are just starting your app and developing it from scratch, we recommend to use our sample apps. We use GitHub repositories to make it easy to explore, copy, and modify our code samples. The guide on how to launch and configure the sample app is on GitHub.

Chat samples

Choose the code sample below to jump-start the development.

Video chat samples

Choose the code sample below to jump-start the development.

More samples

For more samples, head to our Code Samples page. These sample apps are available on GitHub so feel free to browse them there. Just clone the repository and modify the source code for your own projects.

Get application credentials

QuickBlox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below:

1. Register a new account following this link. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
2. Create the app clicking New app button.
3. Configure the app. Type in the information about your organization into corresponding fields and click Add button.
4. Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key.

Requirements

The minimum requirements for QuickBlox JavaScript SDK are:

• JavaScript es5

Install QuickBlox SDK into your app

There are 3 ways to integrate QuickBlox JavaScript SDK into your app.

Dependencies for browser

Install QuickBlox library dependencies for browser to establish communication with QuickBlox server. Simply connect the JS file as a normal script. Once it is done, a window scoped variable called QB is created.

<script src="https://unpkg.com/quickblox/quickblox.min.js"></script>

Node.js and npm integration

📘

To manage project dependencies Node.js and npm must be installed.

1. Open a terminal and enter the commands below in your project path.

npm install quickblox --save

2. To be able to work with QuickBlox library, connect it as follows:

var QuickBlox = require('quickblox/quickblox.min');

// OR to create many QB instances
var QuickBlox = require('quickblox/quickblox.min').QuickBlox;
var QB1 = new QuickBlox();
var QB2 = new QuickBlox();

Yarn integration

Install the SDK through Yarn by running the following command:

yarn add quickblox

Send your first message

Initialize QuickBlox SDK

Initialize the SDK with application credentials. Call the init() method and pass the APPLICATION_ID, AUTH_KEY, AUTH_SECRET, and ACCOUNT_KEY as arguments to it.

var APPLICATION_ID = 41;
var AUTH_KEY = "lkjdueksu7392kj";
var AUTH_SECRET = "iiohfdija792hj";
var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";

QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY);

❗️

Security

It's not recommended to keep your authKey and authSecret inside an application in production mode, instead of this, the best approach will be to store them on your backend and initialize QuickBlox SDK with applicationId and acountKey only. More details you can find in Initialize QuickBlox SDK without Authorization Key and Secret section.

Authorize user

Now, it is time to log in with the user. To get it done, set the login and password in the params variable. Call the createSession() method and pass the params as an argument to it using the code snippet below

var params = { login: "garry", password: "garry5santos" };  
QB.createSession(params, function(error, result) {
  // callback function
});

Connect to chat

Having authorized a user, you can proceed with connecting to the chat server to start using Chat module functionality. Set the userId and password fields in the userCredentials. Call the connect() method and pass the userCredentials as an argument to it.

var userCredentials = {
  userId: 12345,
  password: "garry5santos"
};
  
QB.chat.connect(userCredentials, function(error, contactList) {
  
});

Create dialog

QuickBlox provides three types of dialogs: 1-1 dialog, group dialog, and public dialog. Learn more about dialogs here.

Let’s create a 1-1 dialog. Set the type and occupants_ids properties of the params variable. Call the create() method and pass the params as an argument.

var params = {
  type: 3,
  occupants_ids: [56]
};
  
QB.chat.dialog.create(params, function(error, dialog) {
  
});

Subscribe to receive messages

Through the QB.chat.onMessageListener you can monitor whether an incoming message is received from the QuickBlox server. Use the QB.chat.onMessageListener to listen to all incoming messages.

function onMessage(userId, message) {
  
};

QB.chat.onMessageListener = onMessage;

Send message

To send a message, create a message variable and set the type, body, and extension properties. Create opponentId variable and set the ID of the user we are going to send a message to. Call the send() method and pass the created message and opponentId as arguments to it.

var dialog = "...";

var message = {
  type: "chat",
  body: "How are you today?",
  extension: {
    save_to_history: 1,
    dialog_id: dialog._id
  },
  markable: 1
};

var opponentId = 78;
message.id = QB.chat.send(opponentId, message);

// ...

📘

Set the save_to_history parameter if you want this message to be saved in chat history.