Lesktop开源IM移动端：接入LayIM移动端UI
在《开源企业即时通讯和在线客服》中已介绍了Lesktop的桌面模式和Web模式，但是没有移动端。评论中 dotnetcms.org工作室 提到了LayIM，看了一下官网的演示和文档，如果用这套LayIM的移动端Lestop也可以轻松开发出移动端web版本。本文将说明如何接入LayIM移动端UI，同时对一些Lesktop的接口进行说明，作为接入其他前端UI的指引。
移动端功能展示：
源代码下载：https://files.cnblogs.com/files/lucc/IM3.1.zip
源代码Git: https://github.com/luchuncheng/Lesktop.git
在线演示
注册用户&内部人员
Web版：http://im.luchuncheng.com (注册登录后左上角会生成二维码，扫码进入移动端版本，创建访客账户与Web端用户私聊并加为好友)
PC版下载：http://client.luchuncheng.com
客服平台（访客端）
Web版：http://service.luchuncheng.com
PC版：http://im.luchuncheng.com/client.ashx?chatwith=4&embedcode=1&createaccount=true
（embedcode=1表示显示ID=1的客服嵌入代码指定的客服人员，chatwith=4表示启动和ID=4的客服人员对话窗口）
移动端：http://im.luchuncheng.com/mobile.aspx
1、登录
接入的第一个步骤就是登录，登录界面非常简单，就是两个文本框和一个登录按钮，服务单只需要调用ServerImpl.Instance.Login即可：
int userid = AccountImpl.Instance.GetUserID(user);
// 仅验证不启动回话，重定向到default.aspx再启动回话
ServerImpl.Instance.Login("", Context, userid, false, null, false, 2);
最后第二个参数startSession=false，表示只是设置cookie不启动会话，移动端的login.aspx仅仅只是验证，登录后重定向到default.aspx再启动会话
最后一个参数device=2表示登录设备为移动端web版
2、初始化
LayIM初始化时需要好友，群组和分组等信息，因此登录完成后需要提供这些数据。在此之前先了解一下Lesktop的常用联系人功能：
如上图所示，Lesktop允许用户自己创建常用联系人分组，支持无限层级，用户可以将好友或内部人员添加到自建的任何层级的分组中。由于LayIM不支持多层次分组，所以在移动端中将所有常用联系人不分层级显示，如下图所示
除了常用联系人，还需要一个“我的好友”分组，用于显示已加自己为好友的注册用户。接下来需要了解几个和分组，好友和群组相关的接口：
(1) ServerImpl.Instance.CommonStorageImpl.GetCategories
GetCategories用于获取用户创建的所有分组，返回值是一个DataRowCollection，每一行包括5个列：
| ID | 类别ID |
| UserID | 添加到该列表的联系人ID |
| Name | 分组名称 |
| ParentID | 父级分组ID（移动端用不上） |
| Type | 分组类别（1：联系人，2：群组，3：部门，移动端只用到联系人的） |
(2) ServerImpl.Instance.CommonStorageImpl.GetCategoryItems
GetCategoryItems获取和分组相关的所有联系人，群组和部门ID（移动端只用到联系人），返回值为DataRowCollection，每一行包括4个列：
| UserID | 创建该分类的用户ID |
| CategoryID | 类别ID |
| ItemID | 联系人，群组或部门ID（移动端只用到联系人） |
| CategoryType | 分组类别（1：联系人，2：群组，3：部门，移动端只用到联系人的） |
(3) Category_CH.GetAccountInfos
GetCategoryItems只能获取和分组相关的所有联系人的ID，还需要调用GetAccountInfos才能获取到联系人的全部详细信息，返回值为AccountInfo数组，AccountInfo属性如下：
| ID | 用户ID |
| Name | 登录名 |
| Nickname | 昵称 |
| Type | 类型，0-联系人，1-群组 |
| SubType | 子类型：0-注册用户，1-管理员创建的内部人员 |
| IsTemp | 是否为临时用户，即访客 |
| IsDeleted | 是否已被删除 |
| HeadIMG | 头像 |
(4) AccountImpl.Instance.GetVisibleUsersDetails
GetVisibleUsersDetails用于获取所有和指定用户相关的联系人和群组，包括所有由管理员创建的内部人员，已加自己为好友的注册用户，自己创建和加入的所有群组和自己创建或被拉进去的多人会话，这部分数据主要是为LayIM提供“我的好友”分组和群聊，返回值为一个Hashtable，每个项的值为AccountInfo。
(5)ServerImpl.Instance.GetCurrentUser
GetCurrentUser用户获取当前用户详细信息(AccountInfo)
以上5个接口已经获取到了所有LayIM初始化需要的数据，打包成json，“赋值”给页面的MobileInitParams全局变量即可：
namespace Core.Web { public class Mobile_Default : System.Web.UI.Page { string init_params_ = "{}"; protected void Page_Load(object sender, EventArgs e) { AccountInfo current_user = ServerImpl.Instance.GetCurrentUser(Context); if(current_user != null) { String sessionId = Guid.NewGuid().ToString().ToUpper(); ServerImpl.Instance.Login(sessionId, Context, current_user.ID, false, DateTime.Now.AddDays(7), true, 2); DataRowCollection categories = ServerImpl.Instance.CommonStorageImpl.GetCategories(current_user.ID); DataRowCollection items = ServerImpl.Instance.CommonStorageImpl.GetCategoryItems(current_user.ID); Hashtable users = Category_CH.GetAccountInfos(items); AccountInfo[] visible_users = AccountImpl.Instance.GetVisibleUsersDetails(current_user.Name); init_params_ = Utility.RenderHashJson( "Result", true, "IsLogin", true, "UserInfo", current_user.DetailsJson, "SessionID", sessionId, "CompanyInfo", ServerImpl.Instance.CommonStorageImpl.GetCompanyInfo(), "Categories", categories, "CategorieItems", items, "CategorieUsers", users, "VisibleUsers", visible_users ); } else { Response.Redirect("login.aspx"); } } public string InitParams { get { return init_params_; } } } }
页面加载后，LayIM_Init里面就可以通过MobileInitParams获取到这些数据，LayIM初始化参数请看官网文档，以下函数用于将Lesktop的数据转换成LayIM需要的格式：
// 获取分组和联系人 function GetFriends() { var friends = []; for (var i = 0; i < window.MobileInitParams.Categories.length; i++) { var category = window.MobileInitParams.Categories[i]; if (category.Type == 1) { // Type=1为常用联系人类别，将所有常用联系人类别（不分层次）显示为LayIM的分组 var groupid = category.ID + 10000; var group = { "groupname": category.Name, "id": groupid.toString(), "online": 0, "list": [] }; var user_count = 0; var online_count = 0; for (var j = 0; j < window.MobileInitParams.CategorieItems.length; j++) { // 从CategorieItems中获取该分组所有联系人ID var item = window.MobileInitParams.CategorieItems[j]; if (item.CategoryID == category.ID) { // 通过联系人ID从CategorieUsers中获取联系人详细信息 var friend_info = window.MobileInitParams.CategorieUsers[item.ItemID.toString()]; if(friend_info != undefined) { group.list.push({ "username": friend_info.Nickname, "id": friend_info.ID.toString(), "avatar": Core.CreateHeadImgUrl(friend_info.ID, 150, false, friend_info.HeadIMG), "sign": "" }); user_count++; if (friend_info.State == "Online") { online_count++; } } } } if (user_count > 0) { friends.push(group); } } } var grou_myfriend = { "groupname": "我的好友", "id": LayIMGroup_MyFriend, "online": 0, "list": [] } var current_user = window.MobileInitParams.UserInfo; // 获取所有好友并显示到好友分组 for (var i = 0; i < window.MobileInitParams.VisibleUsers.length; i++) { var user = window.MobileInitParams.VisibleUsers[i]; if (user.Type == 0 && ((current_user.SubType == 1 && user.SubType == 0) || current_user.SubType == 0)) { // 内部人员(SubType=1)显示注册用户并添加自己为好友的，不包括其他内部人员 // 注册用户(SubType=0)显示添加自己为好友的其他注册用户和内部用户 grou_myfriend.list.push({ "username": user.Nickname, "id": user.ID.toString(), "avatar": Core.CreateHeadImgUrl(user.ID, 150, false, user.HeadIMG), "sign": "" }); } } friends.push(grou_myfriend); friends.push({ "groupname": "其他联系人", "id": LayIMGroup_Other, "online": 0, "list": [] }); return friends; }
// 获取群聊 function GetGroups() { // 获取所有群组和多人会话 var groups = []; for (var i = 0; i < window.MobileInitParams.VisibleUsers.length; i++) { var user = window.MobileInitParams.VisibleUsers[i]; if(user.Type == 1) { groups.push({ "groupname": user.Nickname, "id": user.ID.toString(), "avatar": Core.CreateGroupImgUrl(user.HeadIMG, user.IsTemp) }); } } return groups; }
3、接收消息
此次为了接入LayIM，加了一个全局委托Core.OnNewMessage，每当收到新消息是会调用该委托，如果需要监听新消息，只需要附加一个处理函数即可
function LayIM_OnNewMessage(msg) { } // 监听新消息 Core.OnNewMessage.Attach(LayIM_OnNewMessage);
由于收到的消息可能是web或pc端发送的，包含LayIM消息面板不支持的富文本，因此需要先处理掉所有HTML tag，此外还需要处理文件标志([FILE:...])生成下载链接，完整代码如下：
function LayIM_ParseMsg(text) { var newText = text; try { // 处理掉HTML开始TAG newText = text.toString().replace( /<([a-zA-Z0-9]+)([\s]+)[^<>]*>/ig, function (html, tag) { if (tag.toLowerCase() == "img") { var filename = Core.GetFileNameFromImgTag(html); if (filename != "") { // Lesktop服务器上的文件，重新加上分辨率限制参数，改为下载缩略图，链接到原图 var url = Core.CreateDownloadUrl(filename); return String.format("a({0})[img[{0}&MaxWidth=450&MaxHeight=800]]", url); } else { // 外源图片，改成超链接，防止下载图片浪费流量 var src = Core.GetSrcFromImgTag(html); return String.format("a({0})[{1}]", src, " 图片 "); } } return ""; } ) .replace( /\x5BFILE:([^\x5B\x5D]+)\x5D/ig, function (filetag, filepath) { // 提取文件消息，改为视频，音频或文件 var path = unescape(filepath) var ext = Core.Path.GetFileExtension(path).toLowerCase(); if (ext == ".mp4" || ext == ".mov") { return String.format("video[{0}]", Core.CreateDownloadUrl(path), Core.Path.GetFileName(path)); } else if (ext == "mp3") { return String.format("audio[{0}]", Core.CreateDownloadUrl(path), Core.Path.GetFileName(path)); } else { return String.format("file({0})[{1}]", Core.CreateDownloadUrl(path), Core.Path.GetFileName(path)); } } ) .replace( /<([a-zA-Z0-9]+)[\x2F]{0,1}>/ig, function (html, tag) { // 清理<br/>等 return ""; } ) .replace( /<\/([a-zA-Z0-9]+)>/ig, function (html, tag) { // 清理HTML结束TAG return ""; } ); } catch(ex) { newText += " ERROR:"; newText += ex.message; } return newText; } function LayIM_OnNewMessage(msg) { // msg.Sender, msg.Receiver只包括最基本的ID，Name，需重新获取详细信息 var sender_info = Core.AccountData.GetAccountInfo(msg.Sender.ID); if (sender_info == null) sender_info = msg.Sender; var receiver_info = Core.AccountData.GetAccountInfo(msg.Receiver.ID); if (receiver_info == null) receiver_info = msg.Receiver; if (msg.Receiver.Type == 0) { // 私聊消息 if (!LayIM_UserExists(sender_info.ID.toString())) { // 分组列表中不包括消息发送者，将发送者加入到其他联系人分组 layim.addList({ type: 'friend', "username": sender_info.Nickname, "id": sender_info.ID.toString(), "groupid": LayIMGroup_Other, "avatar": Core.CreateHeadImgUrl(sender_info.ID, 150, false, sender_info.HeadIMG), "sign": "" }); } // 显示到LayIM消息面板 layim.getMessage({ username: sender_info.Nickname, avatar: Core.CreateHeadImgUrl(msg.Sender.ID, 150, false, sender_info.HeadIMG), id: msg.Sender.ID.toString(), type: "friend", cid: msg.ID.toString(), content: LayIM_ParseMsg(msg.Content) }); } else if (msg.Receiver.Type == 1) { // 群消息 if (!LayIM_GroupExists(receiver_info.ID.toString())) { // 群聊列表中不包括该群，加入到群聊中 layim.addList({ "type": "group", "groupname": receiver_info.Nickname, "id": receiver_info.ID.toString(), "avatar": Core.CreateGroupImgUrl(receiver_info.HeadIMG, receiver_info.IsTemp) }); } // 显示到LayIM消息面板 layim.getMessage({ username: sender_info.Nickname, avatar: Core.CreateHeadImgUrl(msg.Sender.ID, 150, false, sender_info.HeadIMG), id: msg.Receiver.ID.toString(), type: "group", cid: msg.ID.toString(), content: LayIM_ParseMsg(msg.Content) }); } } // 监听新消息 Core.OnNewMessage.Attach(LayIM_OnNewMessage);
4、发送消息
发送消息只需要调用服务端的WebIM.NewMessage方法即可，发送前，需要对消息进行预处理，把LayIM的标志（图片，文件和表情）转换成HTML，还需要调用Core.TranslateMessage，该函数用于将消息中的图片(<img ...>)，文件([FILE:...])转换成服务端可以处理的附件，具体代码如下：
function LayIM_SendMsg_GetFileName(fileurl) { var filename_regex = /FileName\=([^\s\x28\x29\x26]+)/ig; filename_regex.lastIndex = 0 var ret = filename_regex.exec(fileurl); if (ret == null || ret.length <= 1) { return ""; } return ret[1]; } function LayIM_SendMsg(data) { var msgdata = { Action: "NewMessage", Sender: parseInt(data.mine.id, 10), Receiver: parseInt(data.to.id, 10), DelTmpFile: 0, Content: "" }; var content = data.mine.content; // 转换图片消息 content = content.replace( /img\x5B([^\x5B\x5D]+)\x5D/ig, function(imgtext, src) { var filename = LayIM_SendMsg_GetFileName(src); return String.format('<img src="{0}">', Core.CreateDownloadUrl(filename)); } ); // 转换文件消息 content = content.replace( /file\x28([^\x28\x29]+)\x29\x5B([^\x5B\x5D]+)\x5D/ig, function (filetext, fileurl, ope) { var path = unescape(LayIM_SendMsg_GetFileName(fileurl)); return Core.CreateFileHtml([path]); } ); // 将消息中的图片(<img ...>),文件([FILE:...])转换成服务端可以处理的附件 content = Core.TranslateMessage(content, msgdata); // 转换表情 content = content.replace( /face\[([^\s\[\]]+?)\]/g, function (face, face_type) { var face_file = LayIM_FaceToFile[face_type]; if(face_file != undefined) { return String.format('<img src="{0}/{1}">', Core.GetUrl("layim/images/face"), face_file); } } ); msgdata.Content = content; Core.SendCommand( function (ret) { var message = ret; }, function (ex) { var errmsg = String.format("由于网络原因，消息\"{0}\"发送失败，错误信息:{1}", text, ex.Message); }, Core.Utility.RenderJson(msgdata), "Core.Web WebIM", false ); }
5、异常状态处理
Lesktop有以下几种异常状态：
(1) 在其他浏览器或客户端登录，此时会收到强制下线通知(GLOBAL:OFFLINE)
(2) 服务端已升级，为简化服务端开发，Lesktop服务端要求客户端和前端都用对应的最新版本，不兼容旧版本。服务端网站升级后，升级前未退出重新连接上的客户端和web端都会收到不兼容异常通知(IncompatibleException)。PC需要重启升级，WEB端需要重登陆(发布版所有静态资源都放在名称为版本号的文件夹中，重登陆不会读取到缓存的资源)
(3) 验证身份异常，服务端网站可能会因为某种原因重新启动，此时会重新生成cookie加密密钥，会导致已在线的客户端无法从cookie获取身份信息，此时客户端会收到验证异常通知(UnauthorizedException)
移动端处理异常方法很简单，收到异常通知后，立刻重定向到offline.aspx页面，显示异常消息和重新登录按钮，如下图所示：
至此，接入LayIM的工作就基本完成，前端代码基本都在mobile.js中。
因为LayIM不是开源的，因此git上不包括LayIM的源代码，需要自行购买，然后将src下的所有文件放到CurrentVersion/layim下:
