ASP.NET SignalR 與LayIM配合，輕鬆實現網站客服聊天室（四） 添加表情、羣聊功能

　　休息了兩天，仍是決定把這個尾巴給收了。本篇是最後一篇，也算是草草收尾吧。今天要加上表情功能和羣聊。基本上就差很少了，其餘功能，讀者能夠自行擴展或者優化。至於我寫的代碼方面，本身也沒去重構。好的，咱們開始在原有的基礎上添加功能。

　　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, '&lt;');
            str = str.replace(/\>/g, '&gt;');
            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