Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
(Redirected from Web)
Jump to: navigation, search


Download JavaScript SDK

The latest version is 1.14.0.

All SDK (with examples, sources and spec)

QuickBlox JavaScript SDK, zip archive

Just JavaScript library

We use to host our libraries:

Node npm package

npm quickblox

Browsers support

IE Firefox Chrome Safari Opera Android Browser Blackberry Browser Opera Mobile Chrome for Android Firefox for Android
10+ 4+ 13+ 6+ 12+ 4.4+ 10+ 12+ 35+ 30+

Code samples

Learn how to include Video/Audio calls, create Group Chat room and 1 to 1 Chat, enable Push Notifications, authenticate users via Facebook/Twitter, show users' Locations and POIs, store and retrieve files from the cloud — these code samples are really simple so that even beginner developers can understand them.

Simple samples

Title APIs used Description
Simple JavaScript VideoChat (WebRTC) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your Web app. Enable a video call function similar to Skype using this code sample as a basis.

WebRTC web sample1.png WebRTC web sample2.png

Simple JavaScript Chat (XMPP) code sample Chat, Users The Chat code sample connects and socializes your users with the chat module. Features include: Peer to Peer Chat; Group Chat; Location-based Chat.

Simple Javascript content storage and update code sample Content The Content sample allows you to send, stream, store, share and save content, so that you may update your app's content without having to republish..

Simple JavaScript Users authentication code sample Users The Users code sample helps you manage and retain your user base across all platforms. It includes a simple authentication process with Single Sign-On and integration across all popular platforms, including social integration with Facebook/Twitter.

Simple JavaScript Custom Objects (key value data store) code sample Custom Objects This Custom Objects sample allows you to create any server side data structure, utilise it for any purpose, create any logic and many other custom features.

How to: add SDK to Web and Node.js applications and connect to the cloud

Browser integration

The Quickblox JavaScript SDK provides a JavaScript library that making it even easier to access the QuickBlox cloud backend platform.

Dependencies for browser

For the library to work, you need to include either jQuery or Zepto in your html before quickblox.js, like so:

<script src="jquery.min.js"></script>
<script src="quickblox.js"></script>

Bower and RequireJS

If you use bower package manager for your project, you can install JS SDK through bower:

bower install quickblox --save

When you use RequireJS, you are able to use quickblox as AMD module. SDK supports UMD (Universal Module Definition) pattern for JavaScript modules. So it is possible to use SDK everywhere (as browser global variable, with AMD module loader like RequireJS or as CommonJS module for Node.js environment).

Node.js and NPM integration

Also you can use QuickBlox JavaScript SDK with server-side applications on NodeJS through the native node package. Just install this package in your application project like that:

npm install quickblox --save

And you're ready to go:

var QB = require('quickblox');
// OR to create many QB instances
var QuickBlox = require('quickblox').QuickBlox;
var QB1 = new QuickBlox();
var QB2 = new QuickBlox();

Getting started

To use inside a browser, a window scoped variable called QB is created. Most, with the notable exception of init, take a callback parameter which gets called with an error and result parameter (ala node.js).

The common way to interact with QuickBlox can be presented with the following sequence of actions:

  1. Initialize framework
  2. Create session
  3. Login with existing user or register new one
  4. Perform actions with QuickBlox communication services and any data entities (users, locations, files, custom objects, pushes etc.)

Initialize framework with application credentials

In addition, there is helpful 5 minute guide

QB.init(CONFIG.appID, CONFIG.authKey, CONFIG.authSecret);

Initialize framework with existing QB token

This means you can generate a token elsewhere (e.g. on the server side), and then use this token instead of initialising the SDK with your application key and secret.



We recommend you to create config.js configuration file in your js-application and insert your QB application credentials and other ancillary data into it.

A custom configuration can look like this:

var CONFIG = {
  endpoints: {
    api: "",
    chat: "", 
    muc: "",
    turn: "",
    s3Bucket: "qbprod"
  chatProtocol: {
    bosh: "", 
    websocket: "wss://", 
    active: 1 // or set 2 if you would like to use websockets
  ssl: true,
  debug: {mode: 1}
QB.init(3477, 'ChRnwEJ3WzxH9O4', 'AS546kpUQ2tfbvv', CONFIG);

The above would enable debugging, disable ssl and change the endpoints so that requests would go to another server.

Logs management

There are 3 debug mods:

  • debug: {mode: 0} - logs are off
  • debug: {mode: 1} - the SDK will be printing logs to console.log()
  • debug: {mode: 2, file: "appname_debug.log"} - the SDK will be printing logs into file with name "appname_debug.log". Works only on Node.js.

A few words about Authentication and Authorization


To be able to use QuickBlox API you have to create a session.

There are 2 types of session:

  • Application session. It provides only READ access to data.
  • User session. It provides CRUD (Create, Read, Update, Delete) access to data.

To create an application session use this code:

QB.createSession(function(err, result) {
  // callback function

With an Application session you can READ any data you need and only have to do one Create operation — User Sign Up (Users API):

var params = {login: 'garry', password: 'garry5santos'};
QB.users.create(params, function(err, result) {
  // callback function

To update an Application session to a User session you have to login to QuickBlox:

var params = {login: 'garry', password: 'garry5santos'};
// or through email
var params = {email: '', password: 'garry5santos'};
// or through social networks (Facebook / Twitter)
var params = {provider: 'facebook', keys: {token: 'AM46dxjhisdffgry26282352fdusdfusdfgsdf'}};
QB.login(params, function(err, result) {
  // callback function

Or, if the user is already exist, you can create a User session in single query as well:

var params = {login: 'garry', password: 'garry5santos'};
// or through email
var params = {email: '', password: 'garry5santos'};
// or through social networks (Facebook / Twitter)
var params = {provider: 'facebook', keys: {token: 'AM46dxjhisdffgry26282352fdusdfusdfgsdf'}};
QB.createSession(params, function(err, result) {
  // callback function

A session will remain valid for 2 hours after the last request to QuickBlox was performed.

Session expiration

You may now specify a session expiration listener in this configuration. It looks like this:

config = {
  on: {
    sessionExpired: [Function]
QB.init(3477, 'ChRnwEJ3WzxH9O4', 'AS546kpUQ2tfbvv', config);

It has been placed inside the "on" field so that we can add more listeners in the future. This function fires when the SDK makes a request and recognises an expired session error. It will execute this function before it executes the original callback for the request. You could use it to create a new session, request a new token from your backend, or simply tell the user to refresh the page.

This function accepts 2 parameters, "next" and "retry". Calling next() will cause the original callback of the request to be fired - you would use this if your session creation/regeneration fails. Retry will make the original request again with your newly regenerated token, meaning minimal interruption to the operation of your code.

Test API: Spec Runner

You can check QuickBlox API tests with JavaScript SDK.

  • To use the Spec Runner, head over to the Spec Runner page on GitHub.
  • Or if you download the Javascript SDK, you will find the Spec Runner in the /spec folder.

Framework changelog

v1.14.0 — Oct 2, 2015

  • Advanced logs management, with ability to save logs to file.
  • Removed an ability to enable debug mode in QB.init. Now you have to use config map for this.
  • Now QB.content.createAndUpload works on node.js
  • Removed Places API
  • Added QB.content.privateUrl and QB.content.publicUrl helpers

v1.13.1 — Sep 18, 2015

  • Ability to use user_id (not only user's jid) in Roster methods

v1.13.0 — Sep 2, 2015

  • Added

v1.12.0 — Aug 20, 2015

  • WebRTC:
    • New callback listener: QB.webrtc.onUserNotAnswerListener
    • Cross-platform calling (Web/iOS/Android) bug fixes
  • Chat
    • Renamed to
    • Ability to pass user's resource when login to chat:{userId: 35, password: 'bestpass', resource: 'MacBookPro OS X'}, ...});

v1.11.0 — Aug 11, 2015

  • WebRTC updates:
    • Updated the arguments list of QB.webrtc.stop from QB.webrtc.stop(userId, reason, extension) to QB.webrtc.stop(userId, extension). Don't need to use a 'reason' argument anymore. You can use extension parameter to pass any data.
    • Added a callback to track the session state: QB.webrtc.onSessionStateChangedListener = function(newState, userId).
    • Added new config: webrtc.answerTimeInterval.
    • Cross-platform calling (Web/iOS/Android) bug fixes
    • Bug fixes.

v1.10.0 — Aug 10, 2015

  • support of 'now typing' Chat API
  • added 'getRecipientId' chat helper method
  • ability to get 'messageId' on a sender's side
  • fixed an issue with chat connect on IE
  • force dialog deletion API

v1.9.3 — Jul 14, 2015

  • added an ability to use user_id as a first parameter in
  • added an ability to use user_id in
  • added an ability to provide the page & per_page parameters in QB.content.list

v1.9.2 — May 22, 2015

v1.9.0 — Mar 04, 2015

  • better WebRTC support

v1.8.0 — Feb 07, 2015
  • QB.webrtc
    • updated Signaling messages and API
    • added a support of the cross-platform video / audio calls (web-ios-android)
    • small bugfix
v1.7.0 — Jan 13, 2015
  • Allowed use of Zepto.js with QB JS SDK
  • Added sessionExpired listener function which checks the expiration time for session
  • Added ISO time injection to server responses
  • new API:
    • QB.getSession() for retrieving info about current session
v1.6.0 — Dec 17, 2014
  • Added WebRTC module to SDK core
  • Removed the deprecated webrtc plugin
v1.5.0 — Nov 28, 2014
  • Return back to CommonJS modules
  • Support of UMD (Universal Module Definition) for SDK
  • bugfix with QB variable for browser
v1.4.3 — Nov 25, 2014
  • Rewrited SDK with RequireJS modules
  • Published SDK to Bower
    • added method
v1.3.8 — Nov 10, 2014
  • added configuration options to QB.init()
v1.3.7 — Oct 27, 2014
    • auto reconnect to chat after session closing (added callback)
    • enabled Carbons extension
    • improved roster logic
    • small bugfix
v1.3.5 — Sep 26, 2014
    • added API: Create a message
    • added API: Remove chat dialog
    • Using MongoDB.Bson.ObjectID as the XMPP ID
    • Added the callback functions to roster methods
    • Fixed receiving messages for Safari and IE
    • Fixed removing of roster item
v1.3.0 — Sep 1, 2014
  • Added Chat 2.0 module (Note! doesn't available in npm package yet)
v1.2.0 — Jun 15, 2014
  • Updated the SDK core
    • removed jQuery library
    • completion of support IE9
    • QB.session and QB.config are deprecated (please use QB.service.qbInst object instead)
    • optimization SDK
  • Updated Auth module
    • added Twitter authorization
  • Updated Users module
    • added all users filters
    • renamed perPage and pageNo to per_page and page respectively
    • get user by external ID
    • delete user by external ID
    • added .resetPassword() function
  • Bug fixes Content and CO modules
v1.1.13 — Jun 7, 2014
  • Node.js compatibility
  • Created a node npm package
v1.1.0 — Apr 24, 2014
  • Added chat and webrtc plugins
v1.0.1 — Feb 25, 2014
  • Added initialization with existing QB token
v1.0.0 — Jan 22, 2014
  • SDK stable version
  • (Users, Content, Location, Messages, Custom Objects) API calls are covered