ASP.NET SingalR + MongoDB 實現簡單聊天室（二）：實現使用者資訊、聊天室初始化，聊天資訊展示完善

丶Pz發表於2015-11-20
ASP.NETMongoDB

第一篇已經介紹了一大半了，下面就是詳細業務了，其實業務部分要注意的地方有幾個，剩下的就是js跟html互動處理。

首先在強調一下，頁面上不可缺少的js：jquery，singalR.js,hubs .

 <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script src="http://localhost:40716/push/im/hubs"></script>
  • 使用者資訊儲存方式
    • 我採用的是利用localStorge儲存到本地，當使用者下次再進入聊天室，預設讀取localStorge內的使用者資訊，資訊格式如下：
  • 使用者資訊生成
    • 主要用Math.random()生成隨機數，然後選擇相應的圖片和暱稱就可以了，然後使用者id隨機生成一個，因為是demo，所以細節沒考慮很多。
    • 核心程式碼：
    •  //獲取使用者資訊
    function getUserIdAndName() {

        var user = {
            username: '', userphoto: '', userid: ''
        };
        var userstr = local.get("currentUser");
        if (!userstr) {
            //隨機生成索引，對應頭像
            var index = getRandom(1);
            //當前使用者名稱
            user.username = username[index];
            //預設使用者頭像
            user.userphoto = '/photos/00' + index + '.jpg';
            //當前使用者Id，用隨機數法生成
            user.userid = getRandom(7);

            var userstr = JSON.stringify(user);
            local.set("currentUser", userstr);
        } else {
            user = JSON.parse(userstr);
        }
        return user;
    }

  • 實現使用者加入訊息推送
    • 當有新使用者加入聊天室的時候，呼叫後臺Hub的Join方法，將使用者資訊推送到當前所有進入聊天室的使用者
    •    //初始化聊天室固定寫法
        $.connection.hub.start({ jsonp: true }).done(function () {
            console.log("連線伺服器成功");
            //呼叫join方法，實現當前使用者加入資訊推送
            proxy.server.join({
                photo: user.userphoto,
                username: user.username
            });
        }).fail(function () { console.log("聊天室初始化失敗!"); });
    •         public Task Join(ZjMessage message)
        {
            message.connectionId = Context.ConnectionId;
            //就是使用者加入的時候
            return Clients.All.receiveMessage(new { type = "join", msg = message });
        }
  • 歷史訊息讀取
    • 歷史訊息讀取可以放在連線伺服器成功之後，也可以在hub.start().done(function(){ //})裡面呼叫。連線伺服器成功之後，會走Hub OnConnected方法，同理將歷史訊息讀取出，然後推送給前端即可。讀取方法，讀者可以自行定義。我這裡是正好結合了MongoDB練手，所以就採用了MongoDB讀取。
    •  public override async Task OnConnected()
        {
            try
            {
                //使用者第一次進來，讀取歷史記錄
                var result = await query.GetListAsync(x => x.userid.Length > 0);
                Clients.Caller.receiveHistoryMessage(new { type = "system", msg = "您已經進入聊天室", oldlist = result.ToList() });
            }
            catch (TimeoutException ex)
            {
              
            }
        }
  • 結合介面
    • 前面幾點都是訊息推送，那麼如何實現介面展示呢，很簡單，json格式的資料已經傳送回來了，要做的就是資料繫結了，可以用angular，jsrender，knockout等等各種資料繫結的js框架或者自己寫也好，繫結到頁面上即可。這裡強調的一點是，根據訊息推送的userid判斷是否是自己傳送的訊息，然後新增 other 或 self 類名確定訊息是在左邊還是右邊。繫結程式碼不在貼上

上述的執行效果如圖：

 

程式碼會在下期貼出來，下期預告：傳送聊天資訊和開發注意事項，聊天室總結以及程式碼下載。

相關文章