quickblox 网页版 - 创建 1 对 1 聊天 [英] quickblox for web - create 1 to 1 chat

问题描述

我正在尝试从网络客户端创建一对一聊天.

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

我下载了 SDK 和群聊示例.除了网络之外，所有平台似乎都有很好的例子.

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

(例如: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?

谢谢

推荐答案

WebSDK 足够新了.我们正在处理它的文档.但是，在这里，我将向您展示一些如何创建一对一聊天的代码片段.

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.

如您所知，QuickBlox 使用 XMPP 服务器作为聊天服务.WebSDK 没有 XMPP API 的包装器，因此您应该包含额外的 XMPP JS 库.

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.

对于我们的示例，我们建议使用 Strophe.js (http://strophe.im/strophejs/)

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

让我们开始吧:

1) 包含您的 xmpp js 库和 WebSDK

1) Include your xmpp js library and WebSDK

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

2) 描述您的 QB 凭据

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) 使用用户身份验证创建 QB 会话

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) 使用您的用户 JID 和密码连接到 QuickBlox 聊天服务器 (http://quickblox.com/开发人员/聊天#Connecting_to_server)

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

我敢肯定，它可以帮助您使用 Javascript 创建与 QuickBlox 的一对一聊天.如果你想使用群聊，你可以从 Web XMPP 聊天示例的开发分支中查看聊天模块代码":https://github.com/QuickBlox/sample-chat-xmpp-web/blob/develop/qbchatroom.js

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

今天我们完成了新样本的设计http://i.imgur.com/r8CSdNV.png 很快就会将其部署到生产环境中.

Today we finished new sample's design http://i.imgur.com/r8CSdNV.png and very soon will deploy that to production.

这篇关于quickblox 网页版 - 创建 1 对 1 聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！