休息了兩天，還是決定把這個尾巴給收了。本篇是最後一篇，也算是草草收尾吧。今天要加上表情功能和群聊。基本上就差不多了，其他功能，讀者可以自行擴充套件或者優化。至於我寫的程式碼方面，自己也沒去重構。好的，我們開始在原有的基礎上新增功能。
1.表情功能
表情我用了一個jquery外掛，qqFace。由於GitHub中原始碼已經包含，我這裡不在貼上地址。先看一下新增表情後的效果吧。
表情這裡不要忘了加頁面樣式，表情選中樣式。還有一個就是小bug就是，表情框被聊天框限制住了（修改方法：將layim.css裡面的程式碼 overflow註釋掉）。另外，初始化表情外掛的地方應該在有元素之後，否則，表情外掛會提示，無物件。簡單把程式碼貼一下：
.layim_chat, .layim_chatmore,.layim_groups{height:450px; /*overflow:hidden;*/}
node.list.on('click', '.xxim_childnode', function () { var othis = $(this); var type = othis.attr('type'); //當前登入使用者id var currentid = config.user.id; //取得被點選的使用者id var receiveid = othis.data('id'); //呼叫signalR封裝的方法，連線伺服器，將傳送人id，接收人id傳給後臺，當前使用者加入組 /*新改，由於區分單個聊天和群組聊天，所以這裡將type傳進去*/ csClient.server.ctoc(currentid, receiveid, type); //彈出聊天視窗 xxim.popchatbox(othis); //初始化QQ表情 $('.layim_addface').qqFace({ id: 'facebox', //表情盒子的ID assign: 'layim_write', //給那個控制元件賦值 path: '/scripts/qq/face/' //表情存放的路徑 }); });
大家不要忘了這個方法哦，這個是將訊息內的表情，轉換為圖片的：
function replace_em(str) { str = str.replace(/\</g, '<'); str = str.replace(/\>/g, '>'); str = str.replace(/\n/g, '<br/>'); str = str.replace(/\[em_([0-9]*)\]/g, '<img src="/scripts/qq/face/$1.gif" border="0" />'); return str; }
接收訊息的時候呼叫一下這個方法即可
//拼接html 直接呼叫layim裡的程式碼 log.imarea.append(log.html({ time: result.addtime, name: result.fromuser.username, face: result.fromuser.photo, content: replace_em(result.msg)//如果有表情，需要將表情轉換為圖片 }, type));
PS：可能你們都不知道程式碼的位置在哪，不要緊，這裡只是介紹我改動了那一部分，或者需要注意的地方，完整程式碼大家到最後的github地址下載即可。
下面呢，我們繼續做群發功能。不得不佩服 layim的作者，裡面的引數和一些業務的封裝讓我更好的關注業務邏輯，不用管前端的一些處理。我們檢視一下原始碼，可以看到，type有 group和one兩種型別，one為單聊，group為群聊，這樣的話，就可以根據型別向後臺傳引數。不過整體開發思路和單聊是一樣的。我這裡就不多做介紹了。
//此處皆為模擬 var keys = xxim.nowchat.type + xxim.nowchat.id; var t = xxim.nowchat.type;//當前的聊天型別 one group var id = xxim.nowchat.id;//當前的聊天物件，如果是我one，接收人就是id 如果是我群組，那麼id為群組id //聊天模版 node.imwrite.val('').focus(); //這裡增加singalR傳送訊息流程，目前先採用回撥將自己的訊息新增上去 csClient.server.send(data.content, config.user.id, config.user.name, config.user.face, id, t); //這裡需要刪除所有其他處理聊天資訊的程式碼，在singalR回撥中處理
第一步：在CustomServiceHub類中增加，連線伺服器和傳送群聊訊息的方法
/// <summary> /// 傳送訊息 ，伺服器接收的是CSChatMessage實體，他包含傳送人，接收人，訊息內容等資訊 /// </summary> /// <param name="msg"></param> /// <returns></returns> public Task ClientSendMsgToClient(CSChatMessage msg) { var groupName = MessageUtils.GetGroupName(msg.fromuser.userid.ToString(), msg.touser.userid.ToString()); /* 中間處理一下訊息直接轉發給（A,B所在組織，即聊天視窗） */ msg.other = new { t = MessageConfig.ClientTypeCTC }; msg.msgtype = CSMessageType.Custom;//訊息型別為普通訊息 return Clients.Group(groupName).receiveMessage(msg); } /// <summary> /// 傳送訊息 （群組），伺服器接收的是CSChatMessage實體，他包含傳送人，接收人，訊息內容等資訊 /// </summary> /// <param name="msg"></param> /// <returns></returns> public Task ClientSendMsgToGroup(CSChatMessage msg) { //獲取要推送的組織名稱 var groupName = MessageUtils.GetGroupName(msg.touser.userid.ToString()); //附加資訊，為群資訊 msg.other = new { t = MessageConfig.ClientTypeCTG }; //普通訊息型別 msg.msgtype = CSMessageType.Custom; return Clients.Group(groupName).receiveMessage(msg); }
在chat.hub.js裡面新增對應的封裝：
//傳送，增加最後一個引數t， one ，group 群聊還是單體聊天 send: function (msg, userid, username, userphoto, rid, t) { var obj = { msg: msg, fromuser: { userid: userid, username: username, photo: userphoto }, touser: { userid: rid } }; switch (t) { case 'one': this.ctocsend(obj); break; case 'group': this.ctogsend(obj); break; default: alert('無效的訊息型別'); } }, //單獨 ctocsend: function (sendObj) { _this.proxy.proxyCS.server.clientSendMsgToClient(sendObj); }, //群組 ctogsend: function (sendObj) { _this.proxy.proxyCS.server.clientSendMsgToGroup(sendObj); },
最後一步，調整一下接收訊息的方法，將key改成動態的。然後其他程式碼不變。
//接收人 result.other.t 是從後臺將是否群組訊息返回過來 var keys = result.other.t + result.touser.userid; //傳送人 var keys1 = result.other.t + result.fromuser.userid;
最後，我們執行，看一下效果。（開三個瀏覽器，模擬三個使用者，在群裡聊天）
總結：本篇稍微粗糙一點，因為本來單聊就是用了群聊的方案，所以，本篇沒有多做介紹。其實，聊天室還是用了signalR最基本的功能，一些許可權驗證和其他配置都沒加。不過不得不承認，它可以做很多強大實用的功能。web客服聊天室就到此為止吧，歡迎提意見。聯絡QQ：645857874
GitHub地址：https://github.com/fanpan26/LayIM