休息了兩天，還是決定把這個尾巴給收了。本篇是最后一篇，也算是草草收尾吧。今天要加上表情功能和群聊。基本上就差不多了，其他功能，讀者可以自行擴展或者優化。至於我寫的代碼方面，自己也沒去重構。好的，我們開始在原有的基礎上添加功能。
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