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

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 http://i.imgur.com/r8CSdNV.png and very soon will deploy that to production.

Answer 2

Starting from today QuickBlox has a own Web XMPP Chat plugin for WebSDK. You can look here the new example for 1:1 Chat which uses this library: http://quickblox.com/developers/Web_XMPP_Chat_Sample

Answer 3

I suggest that you might see the 405 error because you have put the call of sendMessage function immediately after the call of connectChat function.

To connect to the chat needs some time, so you can not send the message until your client (browser) hasn't finished the connecting to the chat server at first. You need to put the call of sendMessage function in callback from function connectChat where a status is "Connected". Or you can perform sendMessage function on an onclick event to the tag <button> or something else. For your example, insert sendMessage like here:

case Strophe.Status.CONNECTED:
    console.log('[Connection] Connected');

    connection.addHandler(onMessage, null, 'message', null, null, null);
    connection.send($pres().tree());

    sendMessage();

    break;