Learn how to add and configure QuickBlox SDK for your app.
Follow the instructions below to ensure that QuickBlox JavaScript SDK runs smoothly with your app.
Visit Key Concepts page to learn the most important QuickBlox concepts.
Edge | Firefox | Chrome | Opera | Node.js | Safari |
---|---|---|---|---|---|
14+ | 52+ | 50+ | 36+ | 6+ | 11.1+ |
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 framework with your application credentials. Pass Application ID, Authorization Key, Authorization Secret, and Account Key to the init()
method.
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.
Argument | Description |
---|---|
APPLICATION_ID | Application identifier. |
AUTH_KEY | Authorization key. |
AUTH_SECRET | Authorization secret. |
ACCOUNT_KEY | Account key. Required to get actual Chat and API endpoints for the right server. |
CONFIG | (optional) SDK configuration settings for custom endpoints, chat connecting, WebRTC, etc. |
You can set the following fields using the CONFIG
object:
Field | Description |
---|---|
endpoints | Custom endpoints configuration. |
streamManagement | Stream management configuration. |
webrtc | WebRTC configuration. |
chatProtocol | Chat protocol configuration. Set 1 to use BOSH, set 2 to use WebSockets. Default: WebSocket. |
debug | Debug mode configuration. |
endpoints | Custom endpoints configuration. |
You may don’t want to store authKey and authSecret inside an application for security reasons. In such case, you can initialize QuickBlox SDK with applicationId and accountKey only, and store your authKey and authSecret on your backend. But, if so, the implementation of authentication with QuickBlox should be also moved to your backend.
Then using your backend you can authorize a user in the QuickBlox system, send back the user session token, and set it to the QuickBlox SDK using startSessionWithToken(sessionToken, callBack)
method. You can find out more about this in the Set existing session section.
If you have version lower than 2.14.1, you have to use only the code below. The section Initialize QuickBlox SDK without Authorization Key and Secret describe how to implement this for version greater than 2.14.1
You can initialize the SDK with an existing QuickBlox token. It can be interesting in cases when you build a big system and you have the server side which generates QuickBlox tokens.
To point QuickBlox SDK to the QuickBlox enterprise server, you should set API and chat endpoints in the CONFIG
object and pass it to the init()
method.
Set the endpoints
field of the CONFIG
object:
Field | Description |
---|---|
api | API endpoint. |
chat | Chat endpoint |
Contact our sales team to get API endpoint and chat endpoint.
Logging functionality allows you to keep track of all events and activities while running your app. As a result, you can monitor the operation of the SDK and improve the debug efficiency.
Set the debug mode in the CONFIG
object and then call the init()
method.
There are 3 debug modes:
Debug modes | Description |
---|---|
0 | Turns off logging output. |
1 | Enables logging to the browser console with console.log() function (default value). |
2 | Enables logging to a file. Set the file in the file field. Works only on Node.js, in case of server implementations. |
Message carbons functionality allows for multi-device support. Thus, all user messages get copied to all their devices so they could keep up with the current state of the conversation. For example, a User A has phone running conversations and desktop running conversations. User B has desktop running conversations. When User B sends a message to User A, the message shows on both the desktop and phone of User A.
Message carbons are always enabled.
Stream management has two important features Stanza Acknowledgements and Stream Resumption:
By default, stream management functionality is disabled. Make sure to enable it using the CONFIG
parameter when calling init()
method. Review Initialize QuickBlox SDK section for more details.
You can customize a list of ICE servers. By default, WebRTC module will use internal ICE servers that are usually enough, but you can always set your own. WebRTC engine will choose the TURN relay with the lowest round-trip time. Thus, setting multiple TURN servers allows your application to scale-up in terms of bandwidth and number of users.
Learn how to add and configure QuickBlox SDK for your app.
Follow the instructions below to ensure that QuickBlox JavaScript SDK runs smoothly with your app.
Visit Key Concepts page to learn the most important QuickBlox concepts.
Edge | Firefox | Chrome | Opera | Node.js | Safari |
---|---|---|---|---|---|
14+ | 52+ | 50+ | 36+ | 6+ | 11.1+ |
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 framework with your application credentials. Pass Application ID, Authorization Key, Authorization Secret, and Account Key to the init()
method.
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.
Argument | Description |
---|---|
APPLICATION_ID | Application identifier. |
AUTH_KEY | Authorization key. |
AUTH_SECRET | Authorization secret. |
ACCOUNT_KEY | Account key. Required to get actual Chat and API endpoints for the right server. |
CONFIG | (optional) SDK configuration settings for custom endpoints, chat connecting, WebRTC, etc. |
You can set the following fields using the CONFIG
object:
Field | Description |
---|---|
endpoints | Custom endpoints configuration. |
streamManagement | Stream management configuration. |
webrtc | WebRTC configuration. |
chatProtocol | Chat protocol configuration. Set 1 to use BOSH, set 2 to use WebSockets. Default: WebSocket. |
debug | Debug mode configuration. |
endpoints | Custom endpoints configuration. |
You may don’t want to store authKey and authSecret inside an application for security reasons. In such case, you can initialize QuickBlox SDK with applicationId and accountKey only, and store your authKey and authSecret on your backend. But, if so, the implementation of authentication with QuickBlox should be also moved to your backend.
Then using your backend you can authorize a user in the QuickBlox system, send back the user session token, and set it to the QuickBlox SDK using startSessionWithToken(sessionToken, callBack)
method. You can find out more about this in the Set existing session section.
If you have version lower than 2.14.1, you have to use only the code below. The section Initialize QuickBlox SDK without Authorization Key and Secret describe how to implement this for version greater than 2.14.1
You can initialize the SDK with an existing QuickBlox token. It can be interesting in cases when you build a big system and you have the server side which generates QuickBlox tokens.
To point QuickBlox SDK to the QuickBlox enterprise server, you should set API and chat endpoints in the CONFIG
object and pass it to the init()
method.
Set the endpoints
field of the CONFIG
object:
Field | Description |
---|---|
api | API endpoint. |
chat | Chat endpoint |
Contact our sales team to get API endpoint and chat endpoint.
Logging functionality allows you to keep track of all events and activities while running your app. As a result, you can monitor the operation of the SDK and improve the debug efficiency.
Set the debug mode in the CONFIG
object and then call the init()
method.
There are 3 debug modes:
Debug modes | Description |
---|---|
0 | Turns off logging output. |
1 | Enables logging to the browser console with console.log() function (default value). |
2 | Enables logging to a file. Set the file in the file field. Works only on Node.js, in case of server implementations. |
Message carbons functionality allows for multi-device support. Thus, all user messages get copied to all their devices so they could keep up with the current state of the conversation. For example, a User A has phone running conversations and desktop running conversations. User B has desktop running conversations. When User B sends a message to User A, the message shows on both the desktop and phone of User A.
Message carbons are always enabled.
Stream management has two important features Stanza Acknowledgements and Stream Resumption:
By default, stream management functionality is disabled. Make sure to enable it using the CONFIG
parameter when calling init()
method. Review Initialize QuickBlox SDK section for more details.
You can customize a list of ICE servers. By default, WebRTC module will use internal ICE servers that are usually enough, but you can always set your own. WebRTC engine will choose the TURN relay with the lowest round-trip time. Thus, setting multiple TURN servers allows your application to scale-up in terms of bandwidth and number of users.