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.

To run a code sample, follow the steps below:

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

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

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

Video chat sample

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

To run a code sample, follow the steps below:

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

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

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 webrtc sample, https protocol or the localhost must be used.

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

<script src="https://unpkg.com/[email protected]/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();

Bower and RequireJS

📘

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, authSecret and accountKey properties within it. Call init() method and pass the created CREDENTIALS variable to it.

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

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

Authorize user

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

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

Connect to Chat

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

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 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, dialog) {
  
});

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.

function onMessage(userId, message) {
  
};

QB.chat.onMessageListener = onMessage;

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);

// ...