Javascript

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

Contents

Connect JavaScript SDK to Web and Node.js applications

The latest version is 2.5.0.

Dependencies for browser

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.4.0/quickblox.min.js"></script>

Started from version 2.5.0 no needs jQuery/Zepto dependencies.

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 the 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();

Download ZIP archive

QuickBlox JavaScript SDK, zip archive


Browser 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.

Title APIs used Description
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 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.


NewInterfaceOfWebRTCSample.png

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.


Simple Push Notifications guide Messages Push notifications to your user base — even when your app is not running! This guide enables you to send notifications and alerts to users at any time through an API or easy-to-use admin panel. You can filter who you send messages to through additional parameters.

Cordova/PhoneGap code samples

Learn how to include Video/Audio calls, create Group Chat room and 1 to 1 Chat in your Apache Cordova (PhoneGap) application — these code samples are really simple so that even beginner developers can understand them.

Title APIs used Description
Simple Cordova 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 Cordova VideoChat (WebRTC) code sample Chat, VideoChat The VideoChat code sample allows you to easily add video calling and audio calling features into your Cordova app. Enable a video call function similar to Skype using this code sample as a basis.


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+


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. Authorisation
  3. Perform actions

Initialize framework

In addition, there is helpful 5 minute guide


Initialize framework with application credentials:

var CREDENTIALS = {
  appId: 28287,
  authKey: 'XydaWcf8OO9xhGT',
  authSecret: 'JZfqTspCvELAmnW'
};
 
QB.init(CREDENTIALS.appId, CREDENTIALS.authKey, CREDENTIALS.authSecret);

Initialize framework with existing QB token:

var sessionToken = '1b785b603a9ae88d9dfbd1fc0cca0335086927f1';
var appId = 3451;
 
QB.init(sessionToken, appId);

This means you can generate a token elsewhere (e.g. on the server side), and then use this token and application ID to initialise the SDK.

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).

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: 'garry@gmail.com', 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: 'garry@gmail.com', 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.

Configuration

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: "apicustomdomain.quickblox.com", // set custom API endpoint
    chat: "chatcustomdomain.quickblox.com" // set custom Chat endpoint
  },
  chatProtocol: {
    active: 2 // set 1 to use BOSH, set 2 to use WebSockets (default)
  },
  debug: {mode: 1} // set DEBUG mode
};
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.

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.


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

Check out Github Releases page.