ASP.NET SignalR 與 LayIM2.0 配合輕松實現Web聊天室（三） 之 實現單聊，群聊，發送圖片，文件。

　　上篇講解了如何搭建聊天服務器，以及客戶端js怎么和layui的語法配合。服務器已經連接上了，那么聊天還會遠嗎？

　　進入正題，正如上一篇提到的我們用 Client.Group(groupId)的方法向客戶端推送消息。本篇就先不把業務搞復雜了，就默認現在兩個用戶都各自打開了對方的聊天窗口，那么聊天過程是這樣的。

　　

　　同理，B給A發消息也是這個流程，因為無論如何，A（ID）和B（ID）都會按照規則生成同一個組名。其中由於LayIM已經幫我們在客戶端做好了發送消息並且將消息展示在面板上，所以我們要做的就是當接收到消息后的處理，同樣對接LayIM的接口就可以了。代碼如下：首先要監聽layim的sendMessage事件，

　　

　　然后我們調用自己的send方法。

　　

　　看到上述兩個方法是不是很熟悉，沒錯，就是代理幫我們生成的，這是和我們在ChatServer的Hub里面寫的方法是對應的。至於sendObj我們只要在后台寫好對應的 Model即可。上次的截圖只給大家截了主要的方法，下圖是單聊的核心方法

　　

　　可能除了文字就是代碼，感覺很枯燥，那我就直接把效果圖上幾張，首先，我打開谷歌瀏覽器，模擬用戶A，打開騰訊瀏覽器，模擬用戶B

　　

　　

　　看看實際效果：

　　

 

　　哦了，單聊就到此結束，群聊呢，其實是一個道理，不過有一個坑你要記住

　　

　　否則，如果那個id傳錯了，你會發現意想不到的效果~~當然，只有自己實戰才可以。群聊的我就不截圖了。下面我在簡單介紹一下，如何對接Layim的發送文件和圖片接口。首先修改layim.config的配置：

　　

 ,
            uploadImage: {
                url: '/layimapi/upload_img'
                ,
                type: '' //默認post
            }

            ,
            uploadFile: {
                url: '/layimapi/upload_file'
                ,
                type: '' //默認post
            }

　　官網已經說明了返回格式：（官方文檔：http://www.layui.com/doc/layim.html）

　　

　　

　　里面的圖片和文件顯示效果內部已經封裝的很好了，所以我們要操心的就是怎么接收和保存文件。我發一下我之前寫過的代碼僅供參考：

　　

        [HttpPost]
        [ActionName("upload_img")]
        public JsonResult UploadImg(HttpPostedFileBase file)
        {
            return Json(FileUploadHelper.Upload(file, Server.MapPath("/upload/"), true), JsonRequestBehavior.DenyGet);
        }
        [HttpPost]
        [ActionName("upload_file")]
        public JsonResult UploadFile(HttpPostedFileBase file)
        {
            return Json(FileUploadHelper.Upload(file, Server.MapPath("/upload/"), false), JsonRequestBehavior.DenyGet);
        }

public static JsonResultModel Upload(HttpPostedFileBase file,string fullPath,bool isImg=true) {
            try {
                if (file != null && file.ContentLength > 0)
                {
                    string fileExtension = Path.GetExtension(file.FileName).ToLowerInvariant();
                    string fileName = Guid.NewGuid().ToString();
                    string fullFileName = string.Format("{0}{1}", fileName, fileExtension);
                    string oldFileName = Path.GetFileName(file.FileName);

                    string fileSavePath = string.Format("{0}{1}", fullPath, fullFileName);
                    string url = "/upload/" + fullFileName;
                    file.SaveAs(fileSavePath);
                    object imgObj = new { src = url };
                    object fileObj = new { src = url, name = oldFileName };
                    return JsonResultHelper.CreateJson(isImg ? imgObj : fileObj);
                }
                return JsonResultHelper.CreateJson(null, false, "請添加一個文件");
            }
            catch (Exception ex) {
                //記錄日志
                return JsonResultHelper.CreateJson(null, false, "添加文件出錯，請聯系平台管理員");
            }
        }

　　只要接口對接好了，剩下的就交給Layim吧。看一下效果：

　　

　　

 

　　對接圖片和文件是不是很簡單呢？不過，目前來看，如果網絡不好或者文件太大的話，上傳太慢，導致界面感覺沒反應一樣，其實解決也很簡單，加一個loading就可以了，至於在哪里加，先想想吧，下篇開頭我會把我自己做的方法介紹一下。整體來說，本來Layim就是實現聊天，互動就可以了，但是還有很多小的細節。接下來，我們要進行中級篇了。保證更好玩哦

　　PS：又瀏覽了一遍，感覺就是截了好幾張圖，因為在博客里面類似這個功能已經寫過很多了，有不明白的同學留言或者給我發消息吧。

　　

      下篇預告：【中級】ASP.NET SignalR 與 LayIM2.0 配合輕松實現Web聊天室（四） 之 用戶搜索（Elasticsearch），加好友流程（1）。

 

　　 想要學習的小伙伴，可以關注我的博客哦，我的QQ：645857874，Email：[e-mail]

      GitHub：https://github.com/fanpan26/LayIM_NetClient/