vysper + strophe 群聊实现笔记(纯备忘)

          想要用MUC协议实现群聊功能 ， 有太多房间很麻烦 ，用户肯定不会用 ，所以设定好只进入固定的一个房间。

 1. 首先设置MUC信息接收器

     

connection.addHandler(MucMessageReceived, null, "message", "groupchat");//分组对话信息

//接收分组对话信息
function MucMessageReceived(msg){
	log("已取得分组对话信息：", Strophe.serialize(msg));
	
	
	
	
	var jid = $(msg).attr("from");//发送组
	
	verifyMucChatTab(jid);//显示多人对话框
	
	var body = $(msg).find("> body");
	if (body.length === 1) {
		showMessage(jid2id(jid), jid.split("/")[1], body.text());
	}
	return true;
}

2.进入群聊窗口的按钮

{
			   text :"群聊"  ,onclick :function(){
				   verifyMucChatTab("oa-room@chat."+getMyDomain());//打开群聊窗口
			   }
}

3. 打开群聊TAB(我用的是ligerui)

//验证多人对话框
function verifyMucChatTab(jid) {
 var id = jid2id(jid.split("/")[0]);//JID
 var bareJid = Strophe.getBareJidFromJid(jid.split("/")[0]);
 $("#tabs").show();
 
 var chat =$(".l-tab-content > div[tabid ='chat"+id+"']");
 if (chat.length === 0) {
 //$("#tabs").tabs("add", "#chat" + id, bareJid);
 //添加一个tab
 tabs_manager.addTabItem({tabid:"chat"+id,text :bareJid}); 
 
 //对话窗口
 chat =$(".l-tab-content > div[tabid ='chat"+id+"']");
 
 
 chat.append("<div style='height: 290px; margin-bottom: 10px; overflow: auto;'></div><textarea style='width: 100%;height:110px'/>");
 chat.data("jid", jid);
 $(".l-tab-content > div[tabid =chat'"+id+"']>textarea").keydown(function(event) {
 if (event.which === 13) {
 event.preventDefault();
 sendMucMessage($(this).parent().data("jid"), $(this).val());//发送分组信息
 $(this).val("");
 }
 });
 }
 //$("#tabs").tabs("select", "#chat" + id);
 //选中一个tab
 tabs_manager.selectTabItem("chat" + id);
 
 //对话输入框焦点
 $(".l-tab-content > div[tabid =chat'"+id+"']>textarea").focus();
}

 
 
  
  
  
  



 
 
  
  
  
  

4. 进入房间的方法（打算一连接服务端就调用）

//进入房间
function enterRoom(jid){//房间JID
	//进入房间
	var pres = $pres({
		id : 'v' + new Date().getTime(),
		to : jid+"/"+($("#jid").val().split("@")[0])
	}).c(

	'x', {
		xmlns : 'http://jabber.org/protocol/muc'
	}

	);
	log("正在进入房间", pres.toString());
	
	
	connection.sendIQ(pres);//获取房间列表
}

5.发送群聊信息方法

//发送对话信息
function sendMucMessage(toJid, text) {
	//showMessage(jid2id(toJid), jid, text);//显示对话信息框
    var msg = $msg({to: toJid.split("/")[0], "type": "groupchat"}).c('body').t(text);
    
    
    //日志
    log("正在分组发送信息:", Strophe.serialize(msg));
    
    
    //发送信息
    connection.send(msg);
}

6.大致效果