WeX5集成云巴实现消息推送
先看一下云巴即时消息平台与每个客户端页面之间的关系图
如上图所示，云巴可以理解为客户端页面的外层消息总线，每个客户端首先连接到云巴中注册的应用的连接上，然后在这个应用空间里订阅频道，或者向频道发布消息。发布消息后，则其他的客户端页面就可以相应的收听到消息，并可以根据此消息进行相关的处理。
WeX5中集成的流程：
1.在主页中实现与云巴的连接，然后通过shell将云巴的订阅频道、发布消息等封装成weX5内部的消息总线；
2.每个非主页的页面可以面向shell编程，直接调用shell的发布消息功能（派发）和接收消息（监听注册）功能实现与其他页面的协同。
先看集成云巴的实现代码：
1）引入云巴的sdk，在首页main.w中加入下面的代码
var Yunba = require("../js/yunba-js-sdk");
var yunba_demo = new Yunba({appkey: '584e4abbb09557xxxxx4293d'}); //云巴网站上注册的appkey
2)在模型加载时连接云巴，并封装成shell的服务
//加载即时通讯
Model.prototype.modelLoad = function(event){
var me = this;
yunba_demo.init(function (success) {
if (success) {
yunba_demo.connect(function (success, msg) {
if (success){
console.log('连接成功!');
yunba_demo.subscribe({'topic': 'demo_channel'}, function (success, msg) {
if (success){
console.log('订阅成功');
}else{
console.log(msg);
}
});
me.setAlias();//设置别名
}else{
console.log(msg);
}
});
}
});
//监听消息接收
yunba_demo.set_message_cb(function (data) {
justep.Shell.fireEvent("retMessage",{message:data.msg,channel:data.topic});//提交收到的即时消息到shell总线
});
justep.Shell.on("subscribeChannel",this.subscribe,this);//提供订阅频道的服务
justep.Shell.on("publishMessage",this.publishMessage,this);//提供发送消息的服务
justep.Shell.on("getAliasList",this.getAliasList,this);//提供查询在线用户列表的服务
};
//订阅频道
Model.prototype.subscribe = function(event){
var channelName = event.channelName;
yunba_demo.subscribe({'topic': channelName}, function (success, msg) {
if (success){
console.log('订阅成功');
}else{
console.log(msg);
}
});
};
//设置别名
Model.prototype.setAlias = function(){
var alias = window.sessionData.fperson;
yunba_demo.set_alias({'alias': alias}, function (data) {
if (data.success) {
console.log('设置别名成功');
}else{
console.log(data.msg);
}
});
};
//发布消息
Model.prototype.publishMessage = function(event){
var channel = event.channel;
var message = event.message;
yunba_demo.publish({'topic': channel, 'msg': message},
function (success, msg) {
if (success)
console.log('消息发布成功');
else
console.log(msg);
});
};
//获取在线人员列表
Model.prototype.getAliasList = function(){
var channel = event.channel;
var aliasArry = [];
yunba_demo.get_alias_list(channel, function (success, data) {
if (success) {
data.alias.forEach(function (alias) {
yunba_demo.get_state(alias,function(data){
if(data.success){
if(data.data=='online'){
aliasArry.push(data.alias);
}
}
});
});
if(aliasArry.length > 0){
justep.Shell.fireEvent("retAliasList",{alias:aliasArry.join(",")});//提交在线用户列表的结果到shell总线
}
} else {
console.log(data.error_msg);
}
});
};
//模型卸载
Model.prototype.modelUnLoad = function(event){
justep.Shell.off("subscribeChannel",this.subscribe);
justep.Shell.off("publishMessage",this.publishMessage);
justep.Shell.off("getAliasList",this.getAliasList);
};
3）需要推送消息或者接收消息的页面如test.w中的代码
//添加监听
Model.prototype.modelParamsReceive = function(event){
justep.Shell.on("retMessage",this.receiveMessage,this);
};
//收到消息后的处理逻辑
Model.prototype.receiveMessage = function(event){
var message = event.message;
var msg = JSON.parse(message);
var faction = msg.faction;
var ss = msg.msg;
alert("收到2"+faction+"，内容是"+ss);
};
//发消息
Model.prototype.button2Click = function(event){
var message = JSON.stringify({faction:'notice',msg:'hello'});
justep.Shell.fireEvent("publishMessage",{channel:"demo_channel",message:message});
};
//退出当前
Model.prototype.button1Click = function(event){
justep.Shell.off("retMessage",this.receiveMessage,this);
this.owner.close();
};
需要注意的几个地方：
1.云巴sdk中依赖一个socket.io的js，注意要把这个js文件也要下载下来，并检查sdk的js文件中引入的路径是否正确。
2.要想让shell框架生效，必须要创建shellimp，可以在index.w页中创建
var Model = function(){
this.callParent();
this.shellImpl = new ShellImpl(this, {
contentsXid : "pages"
});
};
3.test页面取消监听不要写在model的unload事件中，实测关闭页面后并没有执行；另外为了保证再次打开页面时能正常加载注册监听方法，shell.on的注册方法要写在modelParamsReceive中，不要写在model的onload方法中
