Knowledgebase: QB Assistance
How to create one to one chat with Web SDK?
Posted by on 15 May 2014 11:16 AM

How to create one to one chat with Web SDK?

As a Chat service QuickBlox uses XMPP-server. WebSDK doesn't have a wrapper for XMPP API, so you will need to include additional XMPP JS library.
For our examples, we used Strophe.js (http://strophe.im/strophejs/).
Next steps that should be made are as following.

1) Include your xmpp js library and WebSDK:

<script src="quickblox.js"></script> <script src="strophe.js"></script>
2) Define 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 receiving 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 sending 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()); }

 

(4 vote(s))
Helpful
Not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments: