quickblox for web - create 1 to 1 chat

Question

I am trying to create 1 to 1 chat from a web client.

I downloaded the SDK and the group chat example. There seem to be really good examples for all platforms except the web.

(for example: http://quickblox.com/developers/Android_XMPP_Chat_Sample)

Can anyone provide code/example/directions?

Am i missing something or is the documentation for the web is really lacking?

Thanks

Answer 1

The WebSDK is enough new. And we work on its documentation. But,here, I will show you some code snippets how you can create one to one chat.

As you know QuickBlox uses XMPP-server as a Chat service. WebSDK doesn't have a wrapper around XMPP API, so you should include additional XMPP JS library.

For our examples, we recommended to use Strophe.js (http://strophe.im/strophejs/)

Let's begin:

1) Include your xmpp js library and WebSDK

<script src="quickblox.js"></script>
<script src="strophe.js"></script>

2) Describe your QB credentials

var QBAPP = {
  app_id: '<your QuickBlox id>',
  auth_key: '<your QuickBlox key>',
  auth_secret: '<your QuickBlox secret>'
};

// our parameters to connect to QuickBlox Chat service
var CHAT = {
  server: 'chat.quickblox.com',
  bosh_server: 'http://chat.quickblox.com:5280'
};

3) Create QB session with user authentication

var params, connection;
params = {
  login: '<your QB login>',
  password: '<your QB password>'
};

QB.init(QBAPP.app_id, QBAPP.auth_key, QBAPP.auth_secret);
QB.createSession(params, function(err, res) {
  if (err) {
    console.log(err.detail);
  } else {
    connectChat(res.user_id, params.password);
  }
});

4) Connect to QuickBlox Chat server with your user JID and password (http://quickblox.com/developers/Chat#Connecting_to_server)

function connectChat(user_id, password) {
  var userJID = user_id + "-" + QBAPP.app_id + "@" + CHAT.server;
  var userPass = password;

  connection = new Strophe.Connection(CHAT.bosh_server);
  connection.rawInput = rawInput;
  connection.rawOutput = rawOutput;

  connection.connect(userJID, userPass, function (status) {
    switch (status) {
    case Strophe.Status.ERROR:
      console.log('[Connection] Error');
      break;
    case Strophe.Status.CONNECTING:
      console.log('[Connection] Connecting');
      break;
    case Strophe.Status.CONNFAIL:
      console.log('[Connection] Failed to connect');
      break;
    case Strophe.Status.AUTHENTICATING:
      console.log('[Connection] Authenticating');
      break;
    case Strophe.Status.AUTHFAIL:
      console.log('[Connection] Unauthorized');
      break;
    case Strophe.Status.CONNECTED:
      console.log('[Connection] Connected');

      // Create an event handler for getting messages
      connection.addHandler(onMessage, null, 'message', null, null, null);
      // send a presence message
      connection.send($pres().tree());

      break;
    case Strophe.Status.DISCONNECTING:
      console.log('[Connection] Disconnecting');
      break;
    case Strophe.Status.DISCONNECTED:
      console.log('[Connection] Disconnected');
      break;
    case Strophe.Status.ATTACHED:
      console.log('[Connection] Attached');
      break;
    }
  });
}

// logs
function rawInput(data) {console.log('RECV: ' + data);}
function rawOutput(data) {console.log('SENT: ' + data);}

5) Function for receive messages

function onMessage(msg) {
  console.log(msg);

  var to = msg.getAttribute('to');
  var from = msg.getAttribute('from');
  var type = msg.getAttribute('type');
  var elems = msg.getElementsByTagName('body');

  // we must return true to keep the handler alive.  
  // returning false would remove it after it finishes.
  return true;
}

6) Function for send messages

function sendMessage() {
  params = {
    to: '<some JID>', // JID of recipient QB User
    from: connection.jid, // JID of sender QB user
    type: 'chat' // type of the message
  }
  var msg = $msg(params).c('body').t('Hello world!');
  connection.send(msg.tree());
}

I'm sure, that it helps you to create one to one chat with QuickBlox using Javascript. If you want to use the group chat, you can look at 'Chat module code' from develop branch of Web XMPP chat sample: https://github.com/QuickBlox/sample-chat-xmpp-web/blob/develop/qbchatroom.js

Today we finished new sample's design https://i.sstatic.net/c0qNZ.png and very soon will deploy that to production.