Browsers support
Edge | Firefox | Chrome | Opera | Node.js | Safari |
---|---|---|---|---|---|
14+ | 52+ | 50+ | 36+ | 6+ | 11.1+ |
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 by clicking the New app button.
- Configure the app. Type in the information about your organization into corresponding fields and click the 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 calledQB
is created.
HTML
Node.js and NPM integration
- Open a terminal and enter the commands below in your project path.
Bash
- To be able to work with QuickBlox library, connect it as follows:
JavaScript
Yarn
Install the SDK through Yarn by running the following command:Bash
Initialize QuickBlox SDK
Initialize the framework with your application credentials. Pass Application ID, Authorization Key, Authorization Secret, and Account Key to theinit()
method.
JavaScript
SecurityIt’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. |
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. |
Initialize QuickBlox SDK without Authorization Key and Secret
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.JavaScript
startSessionWithToken(sessionToken, callBack)
method. You can find out more about this in the Set existing session section.
Initialize with existing token
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
JavaScript
Point SDK to enterprise server
To point QuickBlox SDK to the QuickBlox enterprise server, you should set API and chat endpoints in theCONFIG
object and pass it to the init()
method.
JavaScript
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.
Enable logging
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 theCONFIG
object and then call the init()
method.
JavaScript
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
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
Stream management has two important features Stanza Acknowledgements and Stream Resumption:- Stanza Acknowledgements is the ability to know if a stanza or series of stanzas has been received by one’s peer. In other words, a reply is requested on every sent message. If the reply is received, the message is considered as delivered.
- Stream Resumption is the ability to quickly resume a stream that has been terminated. Once a connection is re-established, Stream Resumption is executed. By matching the sequence numbers assigned to each Stanza Acknowledgement a server and client can verify which messages are missing and request to resend missing messages.
JavaScript
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.Custom ICE servers
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.JavaScript