Quick Start
Learn how to install QuickBlox SDK and send your first message.
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.
Angular Chat Sample App
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:
- 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 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.
- 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 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.
Updated almost 2 years ago