ASP.NET SignalR 與LayIM配合，輕鬆實現網站客服聊天室（一） 整理基礎數據

　　最近碰巧發現一款比較好的Web即時通信前端組件，layim，百度關鍵字便可，我下面要作的就是基於這個前端組件配合後臺完成即時聊天等功能。固然用到的技術就是ASP.NET SingalR框架。本人不會css和前端的東西，只會少許的js，因此前端的代碼不作介紹，喜歡前端的同窗能夠自行研究，閒言少敘，書歸正傳。

　　咱們先看一下layim的效果，看起來仍是挺友好的，界面也不錯。不過，我作了些調整，具體其餘細節能夠本身完善。

　　

　　界面看完了，那麼看一下數據。demo裏作的也不錯，ajax也封裝好了，那麼咱們就直接對照着他的demo看看吧。數據分別有：friend.json,group.json,groups.json,chatlog.json,他們的數據格式以下：（僅僅展現friend.json，其餘相似）

　　

{
    "status": 1,
    "msg": "ok",
    "data": [
        {
            "name": "銷售部",
            "nums": 36,
            "id": 1,
            "item": [
                {
                    "id": "100001",
                    "name": "郭敬明",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100002",
                    "name": "做家崔成浩",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "1000022",
                    "name": "韓寒",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "10000222",
                    "name": "範爺",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100002222",
                    "name": "小馬哥",
                    "face":  "/images/default.jpg"
                }
            ]
        },
        {
            "name": "大學同學",
            "nums": 16,
            "id": 2,
            "item": [
                {
                    "id": "1000033",
                    "name": "甦醒",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "10000333",
                    "name": "馬雲",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100003",
                    "name": "鬼腳七",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100004",
                    "name": "謝楠",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100005",
                    "name": "徐崢",
                    "face":  "/images/default.jpg"
                }
            ]
        },
        {
            "name": "H+後臺主題",
            "nums": 38,
            "id": 3,
            "item": [
                {
                    "id": "100006",
                    "name": "柏雪近在它香",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100007",
                    "name": "羅昌平",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100008",
                    "name": "Crystal影子",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100009",
                    "name": "藝小想",
                    "face": "/images/default.jpg"
                },
                {
                    "id": "100010",
                    "name": "天貓",
                    "face":  "/images/default.jpg"
                },
                {
                    "id": "100011",
                    "name": "張泉靈",
                    "face":  "/images/default.jpg"
                }
            ]
        }
    ]
}

View Code

　　數據格式有了，那麼咱們在後臺簡單建幾個Model。 CS的是 CustomService縮寫，命名。。。。。就留個槽點吧

 public class CSGroupResult
    {
        public int id { get; set; }
        public string name { get; set; }
        public int nums { get { return item == null ? 0 : item.Count; } }
        public List<CSBaseModel> item { get; set; }
    }
    
   public class CSResult
    {
        public int status { get; set; }
        public string msg { get; set; }
        public object data { get; set; }
    }

 public class CSBaseModel
    {
        public int id { get; set; }
        public string name { get; set; }
      //  public string time { get; set; }
        public string face { get; set; }
    }

    public class CSFriend : CSBaseModel { }
    public class CSGroup : CSBaseModel { }
    public class CSGroups : CSBaseModel { }

　　好的，很簡單的幾個Model建好了，就是根據layim裏的json格式建的，這樣，輸出結果能夠直接符合layim的接口JSON要求。下面，構建幾個假數據，原本打算用數據庫的，後來想一想，只是寫一下思路吧，就不在用數據庫了。其實不只是數據庫，只要是可存儲的東西均可以來放這些用戶，聊天，羣組等信息。

  public class DBHelper
    {
        /// <summary>
        /// 獲取好友列表
        /// </summary>
        /// <returns></returns>
        public static CSResult GetFriends()
        {
            var friends = new List<CSBaseModel>();
            for (int i = 0; i < 9; i++) {
                friends.Add(new CSFriend { id = i, name = "好友" + i, face = "/photos/00" + i + ".jpg" });
            }

            var friendGroup = new List<CSGroupResult>();

            friendGroup.Add(new CSGroupResult { id = 1, item = friends, name = "個人分組一" });
            friendGroup.Add(new CSGroupResult { id = 2, item = friends, name = "個人分組二" });
            friendGroup.Add(new CSGroupResult { id = 3, item = friends, name = "個人分組三" });

            CSResult result = new CSResult
            {
                msg = "ok",
                status = 1,
                data = friendGroup
            };
            return result;
        }

        /// <summary>
        /// 獲取分組列表
        /// </summary>
        /// <returns></returns>
        public static CSResult GetGroup()
        {
            var groups = new List<CSBaseModel>();
            for (int i = 0; i < 3; i++)
            {
                groups.Add(new CSGroup { id = i, name = "分組" + i, face = "/photos/00" + i + ".jpg" });
            }

            var friendGroup = new List<CSGroupResult>();

            friendGroup.Add(new CSGroupResult { id = 1, item = groups, name = "分組名稱一" });
            friendGroup.Add(new CSGroupResult { id = 2, item = groups, name = "分組名稱二" });
            friendGroup.Add(new CSGroupResult { id = 3, item = groups, name = "分組名稱三"});

            CSResult result = new CSResult
            {
                msg = "ok",
                status = 1,
                data = friendGroup
            };
            return result;
        }

    }

　　我後臺使用的是ASP.NET MVC。新建Controller，就叫CustomServiceController吧，寫好方法，配置路由，這裏就很少介紹了。

  /// <summary>
        /// 獲取數據
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public JsonResult GetData(string type)
        {
            var result = DBHelper.GetResult(type);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

　　那麼到這裏，咱們測試一下方法返回結果（路由配置的是getdata），瀏覽器裏輸入：http://localhost:20237/getdata?type=friend F12看一下結果：

　　好了，結果出來了，怎麼和layim結合呢？很簡單，看一下，layim.js代碼，找到config.api,將接口改爲本身的服務器接口就能夠了（若是想作完整插件服務的話，這裏可能有跨域問題吧）

 var config = {
        msgurl: 'mailbox.html?msg=',
        chatlogurl: 'mailbox.html?user=',
        aniTime: 200,
        right: -232,
        api: {
            friend: '/getdata?type=friend', //好友列表接口。    將這個接口改成服務器的接口就能夠了，下面兩個暫時沒作，後續會補上，同理
            group: '/getdata?type=group', //羣組列表接口
            chatlog: '/scripts/layim/chatlog.json', //聊天記錄接口
            groups: '/scripts/layim/groups.json', //羣組成員接口
            sendurl: '' //發送消息接口
        },
        user: { //當前用戶信息
            name: '遊客',
            face: '/images/default.jpg'
        },

　　到這裏，數據整合部分就完成了，是否是很簡單啊，想看運行效果？其實剛開始的圖1，和圖3就是運行效果了。要實現圖二的話，只要重複上面的步驟，將接口方法寫好，而後配置上接口路徑就能夠了。

　　補充：從新調整了一下代碼，考慮到有的同窗用的不是MVC，因此採用ashx的方式實現數據獲取，同時，代碼也調整了一下，DBHelper增長邏輯判斷方法 GetResult(string type)

        /// <summary>
        /// 在封裝一層業務，根據type返回不一樣的結果
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public static CSResult GetResult(string type)
        {
            CSResult result = null;
            switch (type)
            {
                case "friend":
                    result = DBHelper.GetFriends();
                    break;
                case "group":
                    result = DBHelper.GetGroup();
                    break;
                case "log":
                    result = DBHelper.GetChatLog();
                    break;
                case "groups":
                    result = DBHelper.GetGroupMember();
                    break;
                default:
                    result = new CSResult { status = 0, data = null, msg = "無效的請求類型" };
                    break;
            }
            return result;
        }

那麼controller和ashx裏面調用方法就簡單了：

        /// <summary>
        /// Controller中獲取數據
        /// </summary>
        /// <param name="type"></param>
        /// <returns></returns>
        public JsonResult GetData(string type)
        {
            var result = DBHelper.GetResult(type);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

//ashx獲取數據方法
  public void ProcessRequest(HttpContext context)
        {
            //這裏的類型要改爲json，不然，前端獲取的數據須要調用JSON.parse方法將文本轉成json，
            //爲了避免用改變前端代碼，這裏將text/plain改成application/json
            context.Response.ContentType = "application/json";
            //接收type 參數
            string type = context.Request.QueryString["type"] ?? context.Request.QueryString["type"].ToString();
            //調用業務處理方法獲取數據結果
            var result = DBHelper.GetResult(type);
            //序列化
            var json = ScriptSerialize(result);
            context.Response.Write(json);
        }

        /// <summary>
        /// 序列化方法，（暫時放在這裏）
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="t"></param>
        /// <returns></returns>
        private string ScriptSerialize<T>(T t)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(t);
        }

　　而後咱們將layim.js裏的獲取好友列表的接口地址改爲 /getdata.ashx?type=friend 是否是同樣就能夠調用了呢。（截圖略）

　　再補充：有人問怎麼用webservice作接口，我嘗試了一下，雖然比較麻煩，但最終仍是調通了，具體webservice很少作介紹了，下面看詳細修改的代碼，首先，爲了保證程序變化不大，儘可能少修改，我加了一些參數判斷，在layim.js

　　紅框地方就是代碼修改過的地方，而後在調用config.json裏面，因爲webservice是post請求，因此參數就不能那麼用了，改成 "{"type":"friend"}"形式

　　

　　最後，webservice後臺方法與ashx一致：

  public class getdataWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string GetResult(string type)
        {
            //調用業務處理方法獲取數據結果
            var result = DBHelper.GetResult(type);
            var json = MessageUtilcs.ScriptSerialize(result);
            return json;
        }
    }

　　具體呢，到這裏就終於把webservice調通了，不過須要改一些layim的js來配合。這兒有點麻煩。不過知道其中的原理，人是活的，代碼一樣能夠寫活。OK，最後的補充了。運行試試吧，是否是如今支持 MVC接口，ashx接口和webservice接口了呢，若是有機會再把webapi接口加上~~

　　第一篇就先到這裏吧，尚未涉及到SingalR的東西，下一步，咱們就搭建SingalR環境，實現聊天功能。 寫的有點粗糙哦，但願你喜歡。PS：想要代碼的同窗留下郵箱或者等個人博客寫完了，放到github上，會告訴你們地址的哦。