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方法中