Javascript

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

Contents

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, Users 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.


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.


Quickblox Status checker with Node.js Chat,Custom Objects, Users This is a Node.js status checker that tests each endpoint of the API and logs the results to Custom Objects every 10 minutes. It uses almost every method of the Javascript SDK as well as a Quickblox chat implementation with the node-xmpp module.


Simple JavaScript Custom Objects (key value data store) code sample Custom Objects, Users This sample demonstrates how to build your own web blog for 2 hours. This Custom Objects code sample allows you to create any server side data structure, utilise it for any purpose, create any logic and many other custom features.


Simple JavaScript Content storage and update code sample Content, Users The Content code 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 Facebook Location code sample Location, Users NOTE: is not using JS SDK! This is a sample of web application using QuickBlox for Facebook. The application uses the QuickBlox modules Location and Users. Using this application the user can send emoticons to their friends on Facebook. All users are displayed on the map.


Simple Web Location code sample Location, Users NOTE: is not using JS SDK! There is a simple web application that demonstrates the main features of the modules QuickBlox Location and QuickBlox Users.


Extended products

Title APIs used Description
Group Chat Room widget Chat, Users The XMPP chat was built to demonstrate how the QuickBlox API is compatible with the web as well as iOS, Android and WP7. Users login with Facebook Connect and are then put straight into the chatroom. It has also been extended into a Wordpress plugin with location integration. You can check it out on GitHub here, see the demo in action here or access the key generator here. The Wordpress plugin has over 1200+ downloads.


Location-based Chat (MapChat) widget Chat, Location, Users NOTE: is not using JS SDK! This is a complex sample of a Web application using QuickBlox. The application uses the QuickBlox modules Location and Users. Using this application, the user can see other users on the map. Users can to communicate with each other using Chat which is built on Location API. The Wordpress plugin has over 1600+ downloads.



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

Usage in browsers

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

All you need to get going is to add jQuery library and this quickblox.js library to your HTML just before the </body> tag, like so:

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

Usage with Node.js

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

And you're ready to go.

var QB = require('quickblox');

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.

var CONFIG = {
  appId: 3477,
  authKey: 'ChRnwEJ3WzxH9O4',
  authSecret: 'AS546kpUQ2tfbvv',
  debug: false
};


Oh, please, please show me the code

JavaScript SDK is really simple to use. In just a few minutes you can power up your JS app with huge amount of awesome communication features & data services.

For use inside browsers, 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, CONFIG.debug);


Initialize framework with existing QB token

This means you can generate a token elsewhere, for example serverside, and then use this token instead of initialising the SDK with your application key and secret.

QB.init('1b785b603a9ae88d9dfbd1fc0cca0335086927f1');


A couple of 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: '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.


Code snippets

JavaScript SDK provides the following modules to interact with QuickBlox API (each module has suite of static methods):

  • QB.users
  • QB.chat
    • QB.chat.roster
    • QB.chat.muc
    • QB.chat.dialog
    • QB.chat.message
    • QB.chat.helpers
  • QB.data (Custom Objects)
  • QB.content
  • QB.location
    • QB.location.geodata
    • QB.location.places
  • QB.messages
    • QB.messages.tokens
    • QB.messages.subscriptions
    • QB.messages.events


List users by ids from array which is sorted by desc (Users API)

var params = {
  filter: { field: 'id', param: 'in', value: [3,45,2241] },
  order: { sort: 'desc', field: 'id' }
};
QB.users.listUsers(params, function(error, response){
  // callback function
});

Get user by full name

QB.users.get({full_name: 'Garry Osborn'}, function(error, response){
  // callback function
});

Update a user

QB.users.update(USER_ID, {website: "http://quickblox.com"}, function(error, response){
  // callback function
});

Delete a user

QB.users.delete(USER_ID, function(error, response){
  // callback function
});

Reset user password

QB.users.resetPassword('garry@gmail.com', function(error, response){
  // callback function
});

Upload a location

QB.location.geodata.create({ latitude:"51.523170", longitude: "-0.111215" }, function(error, response){
  // callback function
});

Create a place

QB.location.places.create({ geo_data_id: geo_data_obj.id, title: "Quickblox HQ", address: "8 Warner Yard, Clerkenwell, London, EC1R 5EY" }, function(error, response){
  // callback function
});

Create content

QB.content.create({name: "Test file", content_type: "image/png", 'public': true}, function(err, response){
  // callback function
});

List content

QB.content.list(function(error, response){
  // callback function
});

Create a custom object

var data = {
  field: "value"
}
 
QB.data.create("ClassName", data, function(err, response){
  // callback function
});

Update a custom object record

var data = {
  _id: data._id,
  Hello: "Goodbye, World!"
}
 
QB.data.update("ClassName", data, function(err, response){
  // callback function
});

List all custom objects

QB.data.list("ClassName", function(err, response){
  // callback function
});

Delete a custom object

QB.data.delete("ClassName", data._id, function(err, response){
  // callback function
});


Read on: JavaScript SDK documentation (Swagger docs)

You can access Swagger docs here:
Quickblox JS SDK framework documentation


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.


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+


Download JavaScript SDK

The latest version is 1.3.5.

All SDK (with examples, sources and spec)

QuickBlox JavaScript SDK, zip archive

Just JavaScript library

Download the uncompressed, development version — quickblox.js
Download the compressed, production version — quickblox.min.js

Node npm package

npm quickblox

SDK plugins (deprecated)

chat plugin
webrtc plugin


Framework changelog


v1.3.5 — Sep 26, 2014

  • QB.chat
    • 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


Comments

Feel free to comment on this page using the form below.

blog comments powered by Disqus