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.
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.
Choose the code sample below to jump-start the development.
Choose the code sample below to jump-start the development.
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.
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:
The minimum requirements for QuickBlox JavaScript SDK are:
There are 3 ways to integrate QuickBlox JavaScript SDK into your app.
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.
Install the SDK through Yarn by running the following command:
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.
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.
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
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.
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.
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.
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.
Set the save_to_history
parameter if you want this message to be saved in chat history.