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