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. Our JS SDK provides you with many helpful methods to build a chat app with diverse features.

This Quick Start page will help newcomers and even our veteran users familiarize themselves with basic SDK functionalities and logic. It lets you go through the easy steps of implementing QuickBlox in your app.

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.

Before you begin

Visit our Key Concepts page to get an overall understanding of the most important QuickBlox concepts.

Start with sample apps

If you are just starting your app and developing it from scratch, we recommend to use our sample apps. Chat sample and Video chat sample are ready-to-go apps with appropriate functionality and simple enough that even novice developers will be able to understand them.

You can clone the repository using the link below:

git clone https://github.com/QuickBlox/quickblox-javascript-sdk.git

Chat sample

To run a code sample, follow the steps below:

1. Download the code sample.
2. Get application credentials and get appId ,authKey, authSecret.
3. Put these values in file QB.config.js following samples => chat => js directory.

var QBconfig = {
  credentials: {
    appId: '',
    authKey: '',
    authSecret: ''
  }
}

4. Run the code sample by opening index.html file.

To ensure that the code sample runs smoothly, run it using the https protocol or localhost. Our sample uses SDK code that includes both Chat and WebRTC component. WebRTC getUserMedia() method requesting for webrtc permissions does not work with HTTP protocol. For that reason, to run a Chat sample, https protocol or localhost must be used.

Video chat sample

To run a code sample, follow the steps below:

1. Download the code sample.
2. Get application credentials and get appId ,authKey, and authSecret.
3. Put these values in QB.config.js file located at the root catalog folder.

const creds = {
  'appId': '',
  'authKey': '',
  'authSecret': ''
};

4. Run the code sample by opening index.html file.

To ensure that the code sample runs smoothly, run it using the https protocol or localhost. Our sample includes WebRTC getUserMedia() method requesting for webrtc permissions and this method does not work with HTTP protocol. For that reason, to run a chat sample, https protocol or the localhost must be used.

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, and Authorization Secret.

Requirements

The minimum requirements for QuickBlox JavaScript SDK are:

• JavaScript es5.
• QuickBlox JavaScript SDK 2.12.6.

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 QuickBlox is created.

<script src="https://unpkg.com/[email protected]/quickblox.min.js"></script>

Node.js and NPM integration

📘

Note

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 QB = require('quickblox');

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

Bower and RequireJS

📘

Note

To manage project dependencies Bower and Require JS must be installed.

Install the JS SDK through bower as follows:

bower install quickblox --save

Send your first message

Initialize QuickBlox SDK

To connect QuickBlox SDK to QuickBlox server, create CREDENTIALS variable and specify appId, authKey, and authSecret parameters within it. Call init() method and pass the created CREDENTIALS variable to it.

var CREDENTIALS = {
  appId: 28287,
  authKey: 'XydaWcf8OO9xhGT',
  authSecret: 'JZfqTspCvELAmnW'
};

QB.init(CREDENTIALS.appId, CREDENTIALS.authKey, CREDENTIALS.authSecret);

Authorize user

To create a user session, create params variable and specify login and password parameters within it. Call createSession() method and pass the created params variable to it.

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

Connect to Chat

To be able to use the abilities of a Chat server, you need to connect to Chat server by calling the connect() method.

var userCredentials = {
  login: 'garry',
  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 1-1 dialog. Call create() method and pass params variable with type and occupants_ids parameters. In our particular case, we pass type: 3 indicating 1-1 dialog and the ID of the user who is going to participate in the dialog.

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

Subscribe to receive messages

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

QB.chat.onMessageListener = onMessage;

function onMessage(userId, message) {
  
}

Send message

To send a message, create a message variable and specify type and body parameters within it. Create opponentId variable and specify the ID of the user we are going to send a message to. Call send() method and pass the created message and opponentId variables 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);

// ...