前言
本系列文章特點：使用ASP.NET SignalR和LayIM快速入門對接，實作一對一聊天，群聊，添加聊天群組，查找聊天記錄等功能。源代碼不包含LayIM的源代碼，因為官方并沒開源屬于收費資源，是以得遵從官方的規則，但包含Demo的資料庫腳本和改造之後的find.html，源代碼在最後一節。
文章目錄：
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（一）之效果展示與關鍵技術簡介
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（二）之背景資料庫建立
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（三）之LayIM初始化資料
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（四）之ASP.NET SignalR核心功能介紹
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（五）之使用RabbitMQ緩存消息
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（六）之SignalR與MVC結合封裝消息發送與接收
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（七）之LayIM與MVC資料互動實作單聊和群聊
LayIM 3.9.1與ASP.NET SignalR實作Web聊天室快速入門（八）之改造查找頁面實作拉取好友建立群
一、本文目标與簡介
前面一篇文章講述了背景資料的邏輯與設計，本文主要講解如何初始化LayIM的資料，本節的目标是在LayIM界面展示背景資料庫的好友清單與分組資訊，不涉及聊天消息發送與接收，僅僅展示如何在項目中初始化LayIM。
本文也隻是講述大概思路與關鍵點地方，隻涉及部分代碼，在本系列最後一節的有所有源碼下載下傳位址。
二、構造資料模型
LayIM初始化的核心是從背景取得固定格式json資料，資料格式在LayIM官網說明的很清楚，詳見官網。官網給的格式如下：
{
"code": 0 //0表示成功，其它表示失敗
,"msg": "" //失敗資訊
,"data": {
//我的資訊
"mine": {
"username": "紙飛機" //我的昵稱
,"id": "100000" //我的ID
,"status": "online" //線上狀态 online：線上、hide：隐身
,"sign": "在深邃的編碼世界，做一枚輕盈的紙飛機" //我的簽名
,"avatar": "a.jpg" //我的頭像
}
//好友清單
,"friend": [{
"groupname": "前端碼屌" //好友分組名
,"id": 1 //分組ID
,"list": [{ //分組下的好友清單
"username": "賢心" //好友昵稱
,"id": "100001" //好友ID
,"avatar": "a.jpg" //好友頭像
,"sign": "這些都是測試資料，實際使用請嚴格按照該格式傳回" //好友簽名
,"status": "online" //若值為offline代表離線，online或者不填為線上
}, …… ]
}, …… ]
//群組清單
,"group": [{
"groupname": "前端群" //群組名
,"id": "101" //群組ID
,"avatar": "a.jpg" //群組頭像
}, …… ]
}
}
是以，按照官網的資料格式，構造如下模型：
/// <summary>
/// 界面初始化傳回的資料實體
/// </summary>
public class LIMInitDoEntity
{
public int code { get; set; } = 0; //0表示成功，其它表示失敗
public string msg { get; set; }//失敗資訊
public LIMInitData data { get; set; } = new LIMInitData();
}
public class LIMInitData
{
/// <summary>
/// 我的資訊
/// </summary>
public LIMMemberInfo mine { get; set; }
/// <summary>
/// 好友清單
/// </summary>
public List<LIMFriendInfo> friend { get; set; } = new List<LIMFriendInfo>();
/// <summary>
/// 群組清單
/// </summary>
public List<LIMGroupInfo> group { get; set; } = new List<LIMGroupInfo>();
}
public class LIMFriendInfo
{
public int id { get; set; }//分組ID
public string groupname { get; set; }//好友分組名
public List<LIMMemberInfo> list { get; set; } = new List<LIMMemberInfo>();//好友清單
}
public class LIMGroupInfo
{
public int id { get; set; }//群組ID
public string groupname { get; set; }//群組名
public string avatar { get; set; }//群組頭像
}
public class LIMMemberInfo
{
public int id { get; set; } //好友ID
public string username { get; set; }//好友昵稱
public string avatar { get; set; }//好友頭像
public string sign { get; set; }//好友簽名
public string status { get; set; }//若值為offline代表離線，online或者不填為線上
}
三、取得資料資料
由于本系列demo使用的SQLServer資料庫，所有使用Ado.net與資料互動，假如EF使用熟練的同學，可以使用EF。在本Demo的源碼中對應的資料庫模型如下圖所示，但是不完整，也沒有提供EF示例，是以使用EF的可在此目錄下擴充資料模型使用EF,另外同級目錄DoEntity檔案下放的是傳回給前端的實體模型如上文提到的LayIM初始化所要求的資料模型。
1.擷取資料庫資料
本文所使用的Ado.net的代碼不再展示，可自己編寫或者檢視源代碼，傳回的資料代碼如下，另本代碼并沒有擷取好友分組，但已設定一個預設分組示例：
/// <summary>
/// 擷取目前使用者的初始化資料
/// </summary>
/// <param name="userId">目前使用者id</param>
/// <returns></returns>
public static LIMInitDoEntity GetInitData(int userId)
{
LIMInitDoEntity initdata = new LIMInitDoEntity();
initdata.data.mine = new LIMMemberInfo();
string sql = @"select UserId id,UserName username,UserSign sign,UserAvatar avatar from [LIM].[User]";
DataTable dt = SQLServerHelper.QueryForDataTatable(sql);
LIMFriendInfo friend = new LIMFriendInfo();
friend.id = 1;
friend.groupname = "時代精英";
foreach (DataRow item in dt.Rows)
{
if (int.Parse(item["id"].ToString()) == userId)
{
initdata.data.mine.id = userId;
initdata.data.mine.username = item["username"].ToString();
initdata.data.mine.status = "online";
initdata.data.mine.sign = item["sign"].ToString(); ;
initdata.data.mine.avatar = item["avatar"].ToString();
}
LIMMemberInfo mem = new LIMMemberInfo();
mem.id = int.Parse(item["id"].ToString());
mem.username = item["username"].ToString();
mem.sign = item["sign"].ToString();
mem.avatar = item["avatar"].ToString();
friend.list.Add(mem);
}
initdata.data.friend.Add(friend);//擷取所有的好友
initdata.data.group = GetUserRoomList(userId);//擷取所有的群組聊天室
return initdata;
}
public static List<LIMGroupInfo> GetUserRoomList(int userId)
{
List<LIMGroupInfo> grouplist = new List<LIMGroupInfo>();
string groupstr = @"select r.RoomId,r.RoomName,r.RoomAvatar from[LIM].[RoomMember] m
inner join[LIM].[Room] r on m.RoomId=r.RoomId
where [email protected]";
List<SqlParameter> parameters = new List<SqlParameter>();
parameters.Add(new SqlParameter() { ParameterName = "@UserId", SqlDbType = SqlDbType.VarChar, Value = userId });
DataTable gdt = SQLServerHelper.QueryForDataTatable(groupstr, parameters);
foreach (DataRow item in gdt.Rows)
{
LIMGroupInfo groupInfo = new LIMGroupInfo();
groupInfo.id = int.Parse(item["RoomId"].ToString());
groupInfo.groupname = item["RoomName"].ToString();
groupInfo.avatar = item["RoomAvatar"].ToString();
grouplist.Add(groupInfo);
}
return grouplist;
}
2.資料傳回給前端
在解決方案中建立一個MVC項目，取名“LIM.Web”，包括登入設定，config檔案等設定不再贅述，可自行實作或者檢視源代碼。本demo中，使用Session存儲了使用者名和使用者id，實際項目中可自行實作身份認證，這一塊不是本文的重點，是以僅僅使用Session來進行身份認證，具體代碼可檢視源代碼，在LIM.Web的Controllers的檔案夾右鍵添加控制器LIMController，這裡需要注意，為什麼要添加這個控制器，原因是後續的其他功能都在這個控制器裡進行資料互動，當然不添加也可以，本系列的Demo的思路可以做抛磚引玉。
添加好控制後，在LIMController下建立一個傳回資料的Action,代碼如下：
public ActionResult GetInitData()
{
if (Session["UserId"] != null)
{
string userid = Session["UserId"].ToString();
var result = LIMRepository.GetInitData(int.Parse(userid));
return Json(result, JsonRequestBehavior.AllowGet);
}
else
{
return Redirect("/Home/Login");
}
}
3.獲得LayIM包部署到項目中
目前LayIM3.9.1是付費版本，詳情參見官網，獲得解壓包後放在LIM.Web項目Scripts檔案下即可，然後配置引用，在LIM.Web的BundleConfig檔案中添加LayIM的js和css引用路徑，具體路徑為LayIM的存放路徑，按照本文的思路，js路徑是 "~/Scripts/layui/layui.js"，css路徑是"~/Scripts/layui/css/layui.css"，具體代碼見源代碼。需要注意的是jquery的版本不能使用高版本，具體到哪個版本不清楚，本系列demo使用的jQuery JavaScript Library v1.11.1。高版本的jquery，LayIM不支援，官網暫時也沒有給出解決方案。
4.LayIM綁定初始化資料
通過上文，資料已經可以從DB到Action了，LayIM也部署到項目中了，然後按照官網的步驟操作即可，官網給的初始化代碼示例如下：
init: {
url: '' //接口位址（傳回的資料格式見下文）
,type: 'get' //預設get，一般可不填
,data: {} //額外參數
}
是以我們隻需要在url中填寫我們的Controller和action即可，本demo的代碼如下：
另外，本demo的LayIM放在home的index頁面裡，詳見源代碼，至于為什麼放在這裡，是因為登入成功之後，會跳轉到這個頁面，實際項目中放在哪個cshtml檔案裡可根據實際項目需求。到此，登入成功之後就能看到LayIM初始化後的好友清單，假如按照本系列的Demo,使用資料庫中的任意使用者登入，都會看到一樣的好友清單，因為本demo預設登入之後都會擷取所有的使用者作為好友，具體詳見源代碼的GetInitData的方法。