第二个 SignalR，可以私聊的聊天室

时间：2018-04-24 14:55:43 阅读：157 评论：0 收藏：0 [点我收藏+]

标签：models cti err http eric lis else date demo

一、简介

上一次，我们写了个简单的聊天室，接下来，我们来整一个可以私聊的聊天室。

SignalR 官方 API 文档

需求简单分析：

1.私聊功能，那么要记录用户名或用户ID，用于发送消息。

2.怎么向单人发消息，查看文档，得知 SignalR 的推送方式有组推、ID 推等等(参考 Calling client methods 这一节 ).

3.怎么在推送消息的方法里面取得 cookie 、querystirng ?查看文档，得知在其推送方法中应该怎么取参数。

4.用户连接上聊天室，应该有广播:xx用户上线了，用户列表更新成最新的，用户关闭浏览器后，也应该有广播：XX用户下线了。查看文档，可知在哪里处理用户重连接、连接、断开连接的事件。

二、Demo

接下来，我们来一步步实现这个简单的 Demo .

1.0 创建一个新的聊天集线器.名字叫：GroupChatHub ，并给它起个别名，叫 groupChatHub

1.1考虑到用户会有用户名，这儿以简单的方式处理下，让用户一进入系统，先输入名称，之后再跳转到聊天室，以 Get 方式传递用户名.并把用户名保存进 cookie 中。代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;

using System.Collections.Concurrent;

namespace TestSignalR.Models
{
    [HubName("groupChatHub")]
    public class GroupChatHub : Hub
    {

        private string userName
        {
            get 
            {
                var ck_userName = Context.RequestCookies["userName"];
                return ck_userName == null ? "" : ck_userName.Value;
            }
        }
    }
}

1.2 既然我们要有用户列表，我们应该保存用户名和用户的连接ID，添加一个静态的线程安全字典 _onlineDic .

        private static ConcurrentDictionary<string, string> _onlineDic = new ConcurrentDictionary<string, string>();

1.3 接下来，我们处理一下用户连接上的 OnConnected 事件,把用户ID、用户名保存起来。方便等会推送用。

        public override Task OnConnected()
        {
            
            if (!_onlineDic.ContainsKey(userName))
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);
            }
            else
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);

            }
return base.OnConnected();
        }

1.4 忘记处理广播 XX用户上线通知了，还有用户列表推送信息。那么在 OnConnected 事件中修改下：

        public override Task OnConnected()
        {
            
            if (!_onlineDic.ContainsKey(userName))
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);
　　　　　　　　　　Clients.All.publishMsg(new {sender="系统通知",receiver= "所有人", msg="系统消息" + userName + "加入聊天",msgTime=DateTime.Now});
            }
            else
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);
            }
            Clients.All.publishUser(_onlineDic.Select(c => new { key = c.Key, value = c.Value }));
            return base.OnConnected();
        }

1.5 处理一下用户重连接，当用户断线重连时，要广播用户上线，加入静态缓存中。其实重连的逻辑处理应该和连接时的逻辑是一样的，所以直接提成一个方法去调用。

    public override Task OnConnected()
        {
            Connect();
            return base.OnConnected();
        }


        public override Task OnReconnected()
        {
            Connect();
            return base.OnReconnected();
        }


        public void Connect()
        {
            if (!_onlineDic.ContainsKey(userName))
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);

                Clients.All.publishMsg(FormateMsg("系统通知", "所有人", "系统消息" + userName + "加入聊天"));
            }
            else
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);
            }
            Clients.All.publishUser(_onlineDic.Select(c => new { key = c.Key, value = c.Value }));
        }


        public dynamic FormateMsg(string sender, string receiver, string msg)
        {
            return new
            {
                sender = sender,
                receiver = receiver,
                msgTime = DateTime.Now,
                msg = msg
            };
        }

1.6 接下来，处理一下断开连接的时候的事件：

        public override Task OnDisconnected(bool stopCalled)
        {
            string Temp = "";
            _onlineDic.TryRemove(userName, out Temp);
            Clients.All.publishUser(_onlineDic.Select(c => new { key = c.Key, value = c.Value }));

            Clients.All.publishMsg(FormateMsg("系统通知", "所有人", "系统消息" + userName + "离开聊天"));

            return base.OnDisconnected(stopCalled);
        }

1.7 用户推送消息的事件，我们定义为 Send 方法：

        /// <summary>
        /// 发送消息
        /// </summary>
        /// <param name="sendToClientID">接收者ID</param>
        /// <param name="msg">消息</param>
        public void Send(string sendToClientID,string msg)
        {
            if (sendToClientID == "0")
            {
                Clients.All.publishMsg(FormateMsg(userName,"所有人",msg));
            }
            else
            {
                string sendToUsername="";

                var sendToUserItem= _onlineDic.FirstOrDefault(c => c.Value == sendToClientID);
                if (sendToUserItem.Key != null)
                {
                    sendToUsername = sendToUserItem.Key;
                }

                Clients.Clients(new List<string> { sendToClientID, Context.ConnectionId }).publishMsg(FormateMsg(userName, sendToUsername, msg));
            }
        }

1.8 OK,我们集线器的事件就这样写完了，准备写前端的界面和事件了。GroupChatHub 的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;

using System.Collections.Concurrent;

namespace TestSignalR.Models
{
    [HubName("groupChatHub")]
    public class GroupChatHub : Hub
    {

        private string userName
        {
            get 
            {
                var ck_userName = Context.RequestCookies["userName"];
                return ck_userName == null ? "" : ck_userName.Value;
            }
        }




        private static ConcurrentDictionary<string, string> _onlineDic = new ConcurrentDictionary<string, string>();


        public override Task OnConnected()
        {
            Connect();
            return base.OnConnected();
        }




        public override Task OnReconnected()
        {
            Connect();
            return base.OnReconnected();
        }


        public void Connect()
        {
            if (!_onlineDic.ContainsKey(userName))
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);

                Clients.All.publishMsg(FormateMsg("系统通知", "所有人", "系统消息" + userName + "加入聊天"));
            }
            else
            {
                _onlineDic.AddOrUpdate(userName, Context.ConnectionId, (k, ov) => ov = Context.ConnectionId);
            }
            Clients.All.publishUser(_onlineDic.Select(c => new { key = c.Key, value = c.Value }));
        }


        public dynamic FormateMsg(string sender, string receiver, string msg)
        {
            return new
            {
                sender = sender,
                receiver = receiver,
                msgTime = DateTime.Now,
                msg = msg
            };
        }


        public override Task OnDisconnected(bool stopCalled)
        {
            string Temp = "";
            _onlineDic.TryRemove(userName, out Temp);
            Clients.All.publishUser(_onlineDic.Select(c => new { key = c.Key, value = c.Value }));

            Clients.All.publishMsg(FormateMsg("系统通知", "所有人", "系统消息" + userName + "离开聊天"));

            return base.OnDisconnected(stopCalled);
        }



        /// <summary>
        /// 发送消息
        /// </summary>
        /// <param name="sendToClientID">接收者ID</param>
        /// <param name="msg">消息</param>
        public void Send(string sendToClientID,string msg)
        {
            if (sendToClientID == "0")
            {
                Clients.All.publishMsg(FormateMsg(userName,"所有人",msg));
            }
            else
            {
                string sendToUsername="";

                var sendToUserItem= _onlineDic.FirstOrDefault(c => c.Value == sendToClientID);
                if (sendToUserItem.Key != null)
                {
                    sendToUsername = sendToUserItem.Key;
                }

                Clients.Clients(new List<string> { sendToClientID, Context.ConnectionId }).publishMsg(FormateMsg(userName, sendToUsername, msg));
            }
        }




    }
}

View Code

2.0 创建控制器 HomeController ，增加 Index , ChatRoom 方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TestSignalR.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            //ViewBag.ClientName = "用户-" + new Random().Next(10000, 99999);
            return View();
        }


        public ActionResult ChatRoom()
        {
            string userName= Request.QueryString["txt_name"];
            Response.Cookies.Add(new HttpCookie("userName",userName));
            ViewBag.userName = userName;
            return View();
        }


    }
}

View Code

2.1 首先创建一个输入用户名的视图，Index 文件，先不做用任何户名合法判断处理。

<form method="get" action="/Home/ChatRoom">
    用户名:
    <input type="text" id="txt_name" name="txt_name" value="Frank" />

    <button type="submit">进入</button>
</form>

2.2 创建聊天室视图 ChatRoom ，引入 JQ包， SignalR 的文件，虚拟的集线器文件。

@{
    ViewBag.Title = "ChatRoom";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery.signalR-2.2.3.min.js"></script>

<script src="@Url.Content("~/signalr/hubs")"></script>
<h2>聊天室（当前<div id="userCount">1</div>人）</h2>


<div>
    你是：@ViewBag.userName
</div>
<div>
    <select id="ddl_userList">
        <option value="0">所有人</option>
    </select>
    <input type="text" id="txt_msg" />
    <input type="button" onclick="SendMsg()" value="发送" />
</div>


<div>
    聊天记录：
    <div id="div_msg">

    </div>
</div>

2.3 开始写对应的JS事件:

<script type="text/javascript">

    var chat = $.connection.groupChatHub;//创建聊天的集线器，告诉客户端，你用的就是我们刚才创建的 GroupChatHub 
    $(function () {
        chat.client.broadcastMessage = function (name, message) {//当客户端收到广播所要操作的事件
            var encodedName = $(‘<div />‘).text(name).html();
            var encodedMsg = $(‘<div />‘).text(message).html();
            $(‘#div_msg‘).append(‘<li><strong>‘ + encodedName
                + ‘</strong>:&nbsp;&nbsp;‘ + encodedMsg + ‘</li>‘);
        };

        chat.client.publishMsg = function (data) {//收到新信息的处理事件
            writeMsg(data.sender,data.receiver, data.msg);
        };

        chat.client.publishUser = function (data) {//当客户端收到用户列表(就是我们自定义的 publishUser 的消息)，处理的事件
            var _html = "<option value=‘0‘>所有人</option>";
            for (var item in data) {
                _html+= "<option value=‘"+data[item].value+"‘>" +data[item].key  + "</option>";
            }
            $("#userCount").text(data.length);
            $("#ddl_userList").html(_html);
        }


        $.connection.hub.start().done(function () {//初始化集线器
            console.log("connect ok.");
        });


        function writeMsg(sender,receiver,eventLog) {//输出记录
            var now = new Date();
            var nowStr = now.getHours() + ‘:‘ + now.getMinutes() + ‘:‘ + now.getSeconds();
            $(‘#div_msg‘).prepend(‘<div><b>‘ + nowStr + ‘</b>&nbsp;&nbsp;<b>‘ + sender + ‘</b>对 <b>‘ + receiver + ‘</b> ‘ + eventLog + ‘.</div>‘);
        }

    });


    function SendMsg() {
        chat.server.send($("#ddl_userList").val(), $("#txt_msg").val()).done(function () {//调用服务端的 Send 方法
            console.log("send OK");
        });
    }



</script>