最近碰巧發現一款比較好的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" } ] } ] }
資料格式有了，那麼我們在後臺簡單建幾個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上，會告訴大家地址的哦。