SignalR 集线器

Posted 2021-01-14 zengtianli

//1.启动

public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.Map("/signalr", map =>
            {
                //跨域
                map.UseCors(CorsOptions.AllowAll);
                //集线器
                var hubConfiguration = new HubConfiguration
                {
                    EnableJSONP = true
                };
                map.RunSignalR(hubConfiguration);
            });

        }
    }

//2.简单集线器

/// <summary>
    /// 集线器
    /// </summary>
    public class CharHub : BaseHub
    {
        //log类声明为局部静态是为性能考虑
        private static readonly LogHelper LogHelper = new LogHelper();
        protected static IList<UserModel> UserModelList = new List<UserModel>();
        /// <summary>
        /// 初始化上线
        /// </summary>
        /// <param name="userid">用户id</param>
        public void Online(string userid)
        {
            string connId = Context.ConnectionId;
            LogHelper.Debug((UserModelList.Count + 1) + " 用户【" + userid + "】上线了,ConerctionId:" + connId);
            if (string.IsNullOrEmpty(userid)) { return; }
            var model = UserModelList.SingleOrDefault(q => q.UserConnerctionId == connId);
            if (model == null)
            {
                userid = Uri.EscapeDataString(userid);
                UserModelList.Add(new UserModel() { UserConnerctionId = connId, UserId = userid });
            }
        }

        /// <summary>
        /// 用户发送消息转发处理
        /// </summary>
        /// <param name="userid"></param>
        /// <param name="msg"></param>
        public void ServiceSendMsg(string userid, string msg)
        {
            if (string.IsNullOrEmpty(userid)) { return; }
            userid = Uri.EscapeDataString(userid);
            var list = UserModelList.Where(q => q.UserId == userid).ToList();
            foreach (var model in list)
            {
                if (model != null)
                {
                    //对于这里属于发送给Client的消息
                    //对于前端作为接收方法
                    Clients.Client(model.UserConnerctionId).ReceiveMsg(msg);

                }
            }
            LogHelper.Debug(string.Format("服务推送消息给【{0}】,消息内容为{1}", userid, msg));
            //发送给所有用户
            //Clients.All.ReceiveMsg(msg);
            //发送给组
            //Clients.Group("1").ReceiveMsg(msg);
        }
        public void ServiceSendMsg(string msg)
        {
            //发送给所有用户
            Clients.All.ReceiveMsg(msg);
        }
        /// <summary>
        /// 下线
        /// </summary>
        /// <param name="stopCalled"></param>
        /// <returns></returns>
        public override Task OnDisconnected(bool stopCalled)
        {
            string connId = Context.ConnectionId;
            var model = UserModelList.SingleOrDefault(q => q.UserConnerctionId == connId);
            if (model != null)
            {
                UserModelList.Remove(model);
                LogHelper.Debug("用户【" + Uri.UnescapeDataString(model.UserId) + "】下线了,ConerctionId:" + connId);
            }
            return base.OnDisconnected(stopCalled);
        }

        /// <summary>
        /// 上线
        /// </summary>
        /// <returns></returns>
        public override Task OnConnected()
        {
            return base.OnConnected();
        }

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

　　//3.客户端

public class ClinetHubTask
    {
        private static readonly string Port = ConfigurationManager.AppSettings["SignalRPort"];
        private static readonly string SignalRServerUrl = string.Format("http://localhost:{0}/signalr", Port);
        /// <summary>
        /// 消息实体推送
        /// </summary>
        /// <param name="userid"></param>
        /// <param name="msg"></param>
        public static void PushMsgForMsgObject(string userid, object msg)
        {
            //序列化
            var jsonMsg = msg as string ?? JsonConvert.SerializeObject(msg);
            PushMsg(userid, jsonMsg);
        }
        /// <summary>
        /// 推送指定客户
        /// </summary>
        /// <param name="userid"></param>
        /// <param name="msg"></param>
        public static void PushMsg(string userid, string msg)
        {
            var url = SignalRServerUrl;
            var conn = new HubConnection(url, true);
            var proxy = conn.CreateHubProxy("CharHub");

            conn.Start();
            conn.StateChanged += new Action<StateChange>(tgt =>
            {
                if (((StateChange)tgt).NewState == Microsoft.AspNet.SignalR.Client.ConnectionState.Connected)
                {
                    //客户端调用服务端的 第一个方法,后面传入参数         
                    proxy.Invoke("ServiceSendMsg", userid, msg);
                }
            });
            conn.Stop();
            conn.Dispose();
        }

        /// <summary>
        ///推送所有用户
        /// </summary>
        /// <param name="msg"></param>
        public static void PushAllMsg(string msg)
        {
            var url = SignalRServerUrl;
            var conn = new HubConnection(url, true);
            var proxy = conn.CreateHubProxy("CharHub");

            conn.Start();
            conn.StateChanged += new Action<StateChange>(tgt =>
            {
                if (((StateChange)tgt).NewState == Microsoft.AspNet.SignalR.Client.ConnectionState.Connected)
                {
                    //客户端调用服务端的 第一个方法,后面传入参数         
                    proxy.Invoke("ServiceSendMsg", msg);
                }
            });
            conn.Stop();
            conn.Dispose();
        }
    }

 //4.web

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简单聊天程序</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" value="uuuu" />
        <ul id="discussion"></ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.3.min.js"></script>
    <script src="http://localhost:8888/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            //日记记录
            $.connection.hub.logging = true;

            //设置hubs的url
            $.connection.hub.url = "http://localhost:8888/signalr";

            // 声明一个代理来引用该集线器。
            var chat = $.connection.charHub;

            // 创建一个方法供服务端调用
            chat.client.ReceiveMsg = function (message) {
                var encodedName = $(‘<div />‘).text($(‘#displayname‘).val()).html();
                var encodedMsg = $(‘<div />‘).text(message).html();
                $(‘#discussion‘).append(‘<li><strong>‘ + encodedName + ‘</strong>:&nbsp;&nbsp;‘ + encodedMsg + ‘</li>‘);
                message = JSON.parse(message);
                eval(message["FunctionName"] + "()");
            };

            // 启动 connection
            $.connection.hub.start().done(function () {
                //调用服务器端方法
                chat.server.online($(‘#displayname‘).val());

                $(‘#sendmessage‘).click(function () {
                    //调用服务器端方法
                    chat.server.serviceSendMsg($(‘#displayname‘).val(), $(‘#message‘).val());
                });
            });
        });
        //标样与量
        function aaaa() {
            //读取后台数据并且填充页面
            console.log("ddddd")
        }
    </script>
    <!--
    总结一下：
    1.先引入jq包，再引入signalR的js包，再引入signalR动态生成的hubs
    2.设置signalR的hubs url地址：$.connection.hub.url =xxx
    3.声明一个代理对象来引用集线器：var chat = $.connection.dntHub;
    4.创建一个客户端方法：chat.client.xxxx=function(){}
    5.启动并调用服务端方法：
        $.connection.hub.start().done(function(){
            chat.server.xxx()
        });
    -->
</body>
</html>