ASP.NET SingalR + MongoDB 实现简单聊天室（二）：实现用户信息、聊天室初始化，聊天信息展示完善

第一篇已经介绍了一大半了，下面就是详细业务了，其实业务部分要注意的地方有几个，剩下的就是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 类名确定消息是在左边还是右边。绑定代码不在粘贴

上述的运行效果如图：

代码会在下期贴出来，下期预告：发送聊天信息和开发注意事项，聊天室总结以及代码下载。