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:
- Download the code sample.
- Get application credentials and get
appId
,authKey
,authSecret
, andaccountKey
. - Put these values in file QBconfig.js following samples => chat => js directory.
var QBconfig = {
credentials: {
appId: '',
authKey: '',
authSecret: '',
accountKey: ''
}
}
- Run the code sample by opening index.html file.
Video chat sample
To run a code sample, follow the steps below:
- Download the code sample.
- Get application credentials and get
appId
,authKey
,authSecret
, andaccountKey
. - Put these values in config.js file located at the root catalog folder.
const creds = {
appId: '',
authKey: '',
authSecret: '',
accountKey: ''
};
- 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.
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:
- 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.
- Create the app clicking New app button.
- Configure the app. Type in the information about your organization into corresponding fields and click Add button.
- 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.
- Open a terminal and enter the commands below in your project path.
npm install quickblox --save
- 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
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 = {
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.
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);
// ...
Updated about a month ago
What's Next
Setup |