XMPP客户端
Candy客户端
Candy是一个基于JavaScript的多用户客户端。
项目地址：http://candy-chat.github.io/candy/
Candy项目中3方库如下：
- Strophe.js an XMPP library for JavaScript
- jQuery The Write Less, Do More, JavaScript Library
- mustache.js Logic-less templates with JavaScript
- Bootstrap front-end framework, for responsiveness to various screen sizes
其中jQuery在官方示例中使用1.10.2版本（90.1kb），在现代浏览器中也可以使用Zepto.js替代（Zepto.js 1.2.0 25.7 kb, gzip压缩后9.6k）。
客户端配置
参照样例引入需要的类库和样式后，根据服务设置配置相关信息。
核心代码如下：
<script type="text/javascript">
var config = {
"endpoint": "http://openfire.j4ai.com:7070/http-bind/",
"jid": "test3@pi-stations",
"password": "123",
"core": {
"debug": true,
"autojoin": [
"[email protected]"//注意conference为服务子域
]
},
"view": {
"assets": "lib/candy/res/",
"language": "cn"
}
};
$(document).ready(function() {
Candy.init(config.endpoint, config);
Candy.Core.connect(config.jid, config.password);
});
</script>
<div id="candy"></div> <!-- 此DOM节点为程序绑定的页面入口 -->
在浏览器中打开页面。如果账户名、密码、聊天室信息无误，在openfire管理界面中可以在用户列表中看到用户上线，聊天室中看到新增用户。
基于Candy的客户端
实现逻辑
输出消息到客户端。
核心代码如下：
$(Candy).on('candy:view.message.before-show', function(evt, args) {
console.log(evt, args);
});
其中：
- candy:view.message.before-show 为拦截事件
- 回调函数中evt包含事件信息，args包含消息信息与其他信息。相关文档见：https://candy-chat.github.io/candy/docs/files/view/pane-js.html#candy:view.message.before-show
设置candy节点不可见，<div id="candy" style="display: none;"></div>屏蔽Candy。
详解
args数据包：
{
"element": {
"": ""
},
"from": "",
"message": "",
"name": "",
"roomJid": "",
"stanza": "",
"xhtmlMessage": ""
}
| 参数 | 含义 | 示例 |
|---|---|---|
| element | ||
| from | [email protected]/admin | |
| message | Message text | test message |
| name | Name of the sending user | admin |
| roomJid | Room JID | [email protected]/admi |
| stanza | XMPP节点信息 | |
| xhtmlMessage | undefined |
发送消息
setTimeout(()=>{
$('[name="message"]').val(30930);
$('[name="submit"]').click();
},8000);
其中：
$('[name="message"]')选取消息输入框$('[name="submit"]').click()模拟发送按钮点击
用户管理
自己的客户端
借助Strophe.js，我们来手写一个客户端。