Lesktop開源IM移動端：接入LayIM移動端UI

盧春城發表於2020-10-08

在《開源企業即時通訊和線上客服》中已介紹了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

線上演示

移動端：http://im.luchuncheng.com/mobile.aspx

註冊使用者&內部人員

Web版：http://im.luchuncheng.com

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的客服人員對話視窗）

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, "&nbsp;圖片&nbsp;");
                    }
                }
                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下:

移動端UI框架
2018-10-23
UI框架
滴滴 Web 移動端元件庫 cube-ui 開源
2017-11-08
Web元件UI
vue移動端專案接入vconsole（移動端除錯）
2020-11-23
Vue除錯
【移動端開發】移動端開發基礎問題
2020-11-26
移動端開發模式
2018-01-30
模式
移動端開發技巧
2018-05-25
移動端和web端前端UI庫—Frozen UI、WeUI、SUI Mobile
2016-03-02
Web前端UI
基於VUE移動端UI好用框架
2018-10-30
VueUI框架
移動端前端UI庫—Frozen UI、WeUI、SUI Mobile
2016-08-18
前端UI
移動端實用資源整理
2018-06-04
移動端定位
2018-11-29
移動端開發小結
2018-09-18
移動端 UI 自動化測試框架對比
2020-06-04
UI框架
移動web開發之移動端真機測試
2016-05-20
Web
移動端web整理移動端問題總結，移動web遇到的那些坑
2015-09-07
Web
移動端 touch事件
2019-04-28
事件
移動端佈局
2019-02-16
移動端touch事件
2018-07-27
事件
移動端加解密
2016-09-09
解密
移動端rem方案
2017-12-14
REM
H5移動端開發
2019-02-16
H5
前端開發移動端除錯
2019-02-16
前端除錯
移動端動畫特效開啟加速
2017-02-23
動畫特效
淺談移動端混合開發
2017-12-13
移動端模擬滾動
2018-09-10
移動端App開發 - 01 - 開篇
2018-09-09
APP
馬蜂窩 IM 移動端架構的從 0 到 1
2019-10-22
架構
移動端圖片開啟及返回客戶端
2017-07-11
客戶端
移動端通訊錄
2019-05-11
微信分享(移動web端)
2019-02-17
Web
移動端flex佈局
2018-11-29
Flex
viewport移動端適配
2018-11-25
View
移動端使用rem原理
2018-12-05
REM
移動端的那些坑
2019-01-02
rem移動端適配
2018-07-23
REM
移動端的meta viewport
2017-05-08
View
移動端踩坑合集
2017-08-10
移動端bug總結
2015-11-03