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 类名确定消息是在左边还是右边。绑定代码不在粘贴