利用SignalR实现聊天室（实战篇）

简易单网页聊天室：

1.添加SignalR插件包：

 

 

 2.在项目下创建文件夹：MyHub

且创建类：MyHub

[HubName("myHub")]
    public class MyHub : Hub
    {
        private IList<string> userList = UserInfo.userList;
        //   public readonly static Dictionary<string, string> _connections = new Dictionary<string, string>();
        // Is set via the constructor on each creation
        private Broadcaster _broadcaster;
        /// <summary>

        /// 静态用户列表

        /// </summary>



        public MyHub() : this(Broadcaster.Instance)
        {

        }

        public MyHub(Broadcaster broadcaster)
        {
            _broadcaster = broadcaster;

        }
        public void Send(string msg)
        {
            string name = "NiHao";
            Clients.All.SendMessage(name, msg);
        }
        //客户端连接上时，会进入到此方法中
        public override Task OnConnected()
        {
            Trace.WriteLine("客户端连接成功");
            return base.OnConnected();
        }


        public override Task OnReconnected()
        {
            Trace.WriteLine("客户端重连中");
            return base.OnReconnected();
        }

        public override Task OnDisconnected(bool stopCalled)
        {
            return base.OnDisconnected(stopCalled);
        }
        public void SendLogin(string name)
        {

            if (!userList.Contains(name))
            {

                userList.Add(name);

                //这里便是将用户id和姓名联系起来

                Connects._connections.Add(name, Context.ConnectionId);
            }
            else
            {
                //每次登陆id会发生变化

                Connects._connections[name] = Context.ConnectionId;

            }
            UserInfo.userList = userList;
            //新用户上线，服务器广播该用户名

            //    Clients.All.loginUser(userList);

        }

        private Random random = new Random();

        /// <summary>
        /// 被动收发消息
        /// </summary>
        /// <param name="name1">消息发起者</param>
        /// <param name="name2">消息接收者</param>
        public void SendByGroup(string name1, string name2, string Msg)
        {
            JObject json = new JObject();
            //Client内为用户的id，是唯一的，SendMessage函数是前端函数，意思是服务器将该消息推送至前端

            json.Add("A", random.Next(1000, 10000).ToString());
            json.Add("B", random.Next(20).ToString());


            Clients.Client(Connects._connections[name2]).sendMessage_Persion("来自用户" + name1 + " " + DateTime.Now.ToString("yyyy/MM/ddhh:mm:ss") + "的消息推送！"+Msg);
         //   Clients.Client(Connects._connections[name2]).SendMessage(json);

        }
    }


    /// <summary>
    /// 数据广播器
    /// </summary>
    public class Broadcaster
    {
        private readonly static Lazy<Broadcaster> _instance =
            new Lazy<Broadcaster>(() => new Broadcaster());

        private readonly IHubContext _hubContext;

        private Timer _broadcastLoop;

        public Broadcaster()
        {
            // 获取所有连接的句柄，方便后面进行消息广播
            _hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
            // Start the broadcast loop
            _broadcastLoop = new Timer(
                BroadcastShape,
                null,
                1000,
                1000);

        }


        private Random random = new Random();


        private void BroadcastShape(object state)
        {
            // 定期执行的方法
            //1.查找所有连接的PID与设备ID
            //2.根据设备ID与PID查找所属的评分记录
            //3.查找所有题目的判定条件
            //4.对判定条件进行筛选
            //5.合并判定条件
            //6.对数据进行分发
            //for (int i = 0; i < UserInfo.userList.Count; i++)
            //{
            //    IList<RebackModels> list = getDataServer.getSubmitLogInfo(UserInfo.userList[i].Split('_')[0], UserInfo.userList[i].Split('_')[1], UserInfo.userList[i].Split('_')[2]);
            //    _hubContext.Clients.Client(Connects._connections[UserInfo.userList[i]]).sendTest1(list);
            //}




            if (!Connects._connections.ContainsKey("wdd3"))//不存在
            {

            }
            else//存在
            {
                _hubContext.Clients.Client(Connects._connections["wdd3"]).sendMessage123(random.Next(1000).ToString());
            }
            _hubContext. Clients.All.sendMessage("当前随机数："+random.Next(1000).ToString());
            
          //  _hubContext.Clients.All(random.Next(1000).ToString());
        }
        public static Broadcaster Instance
        {
            get
            {
                return _instance.Value;
            }
        }
    }

public static class Connects
    {
        public readonly static Dictionary<string, string> _connections = new Dictionary<string, string>();
    }
    public static class UserInfo
    {
        public static IList<string> userList = new List<string>();
    }

<div id="test">这里即将显示服务器推送的数据</div>
<div id="test1">这里即将显示服务器推送的数据</div>
<div id="test2">这里即将显示服务器推送的数据</div>
<input type="hidden" id="displayname" />
<div>发送人姓名<input type="text" style="width:200px" id="sendusername" /></div>
<div>发送内容：<input type="text" style="width:200px;height:100px" id="msgcontent" /></div>
<input id="send" type="button" value="发送" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {
        var mypush = $.connection.myHub;

        $('#displayname').val(prompt('请输入昵称:', ''))

        mypush.client.sendMessage = function (message) {
            $("#test").text(message);
            console.log(message);
        };
        mypush.client.sendMessage_Persion = function (message) {
            $("#test2").text(message);
            console.log(message);
        };
        mypush.client.sendTest1 = function (message) {
            $("#test1").text(message);
            console.log(message);
            setmsg(message);
        };


        $.connection.hub.start().done(function () {
            var username = $('#displayname').val();
            console.log(username);
            mypush.server.sendLogin(username);

            $('#send').click(function () {

                var friend = $('#sendusername').val();
                var msgcontent = $("#msgcontent").val();
                //调用后端函数，发送指定消息

                mypush.server.sendByGroup(username, friend, msgcontent);

            });
        });
    })
</script>