详解SignaIR实现.net framework框架平台下实现向客户端的消息推送，跨域配置

最新推荐文章于 2023-08-22 15:55:15 发布

漫游者码农

最新推荐文章于 2023-08-22 15:55:15 发布

阅读量1k

点赞数 1

分类专栏：消息推送Signair

本文链接：https://blog.csdn.net/xu2034029667/article/details/111611584

版权

消息推送Signair 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一开始没找到官方正式的资料，文档页，网上资料良莠不齐，大部分都是道听途说，一知半解，博主也是一样，但是仔细思考，这一块的知识非常重要，

以及时消息推送，应用场景非常广泛，聊天室，监测等等方面，博主非常重视，额外当然也是工作中小组组长的要求，让知识方面搞透彻，基本原理，因此没有得过且过，

尽力思考如何优化，如何更好，功夫不负苦心人，终于找到官方文档，心中更有底，

https://docs.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

工具 -> 库程序包管理器 -> 程序包管理器控制台输入下面命令
//install-package Microsoft.AspNet.SignalR -Version 2.4.1

分为几大快，其实都十分重要，仔细看相关内容，几乎可以根据需要，回答以上各种问题，闲话少叙，上代码！

分为Signalr1.x版本和Signalr2.x版本

先看2.x版本后端如下

using System;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalrDemo.SignaIR.Startup))]
工具 -> 库程序包管理器 -> 程序包管理器控制台 输入下面命令
//install-package Microsoft.AspNet.SignalR -Version 2.4.1
namespace SignalrDemo.SignaIR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR("/signalr", new HubConfiguration() { EnableJSONP =true});
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalrDemo.SignaIR
{
    public class ServerHub : Hub
    {
        private static readonly char[] str =
        {
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u',
            'v',
            'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
            'V',
            'W', 'X', 'Y', 'Z'
        };

        /// <summary>
        /// 消息发送接口
        /// </summary>
        /// <param name="message"></param>
        public void SendMsg(string message)
        {
            var name = GenerateUserName(4);
            // 调用所有客户端的sendMessage方法
            Clients.All.sendMessage(name, message);
        }

        /// <summary>/// 产生随机用户
        /// </summary>
        /// <param name="length">用户名长度</param>
        /// <returns></returns>
        ///
        public static string GenerateUserName(int length)
        {
            var newRandom = new StringBuilder(62);
            var rd = new Random();
            for (var i = 0; i < length; i++)
            {
                newRandom.Append(str[rd.Next(62)]);
            }

            return newRandom.ToString();
        }
    }
}

代码量并不大，

1.x版本如下

后端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
//工具 -> 库程序包管理器 -> 程序包管理器控制台 输入下面命令
//install-package Microsoft.AspNet.SignalR -Version 1.1.4
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalR.Controllers
{
    [HubName("allHub")]
    //所有 hub
    public class TAllHub : Hub
    {

    }
    public class BaseController : Controller
    {
        //广播
        public string fnBroadcast(string msg)
        {
            try
            {
                IHubContext chat = GlobalHost.ConnectionManager.GetHubContext<TAllHub>();
                chat.Clients.All.notice("发送内容：" + msg);//向所有组发送
                return "发送成功!";
            }
            catch (Exception e)
            {
                return "发送失败!\n失败原因:\n" + e.Message;
            }
        } 
        public ActionResult Broadcast()
        {
            return View();
        }        
    }
}

2.x前端部分代码：添加跨域



<h2>Index</h2>

<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion"></ul>
</div>


<script src="Scripts/jquery-1.6.4.min.js"></script>
<!--引用SignalR库. -->
<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
<!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
<script src="https://localhost:44322/signalr/hubs"></script>

<script>
    $(function () {
        $.connection.hub.url = "https://localhost:44322/signalr";
        // 引用集线器代理
        var chat = $.connection.serverHub;
        // 定义服务器端调用的客户端sendMessage来显示新消息

        chat.client.sendMessage = function (name, message) {
            // 向页面添加消息
            $('#discussion').append('<li><strong>' + htmlEncode(name)
                + '</strong>: ' + htmlEncode(message) + '</li>');
        };
        $.connection.hub.logging = true;
        // 设置焦点到输入框
        $('#message').focus();
        // 开始连接服务器
        $.connection.hub.start({jsonp:true}).done(function () {
            $('#sendmessage').click(function () {
                // 调用服务器端集线器的SendMsg方法
                chat.server.sendMsg($('#message').val());
                // 清空输入框信息并获取焦点
                $('#message').val('').focus();
            });
        });
        $.connection.hub.disconnected(() => {
            console.log($.connection.hub.state);
        }); 
        //服务器中断，自动执行这个方法reconnect5次，ping2次，poll1次，会多次执行,大概四次执行，回调断开连接，执行上面的
        //
        $.connection.hub.reconnected(() => {
            console.log($.connection.hub.state);
        }); 
        $.connection.hub.error((err) => {
            console.log(err);
        }); 
    });

    // 为显示的消息进行Html编码
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
</script>

前端测试代码：Broadcast.cshtml

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
    <title>消息推送页面</title>
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <script src="~/Scripts/jquery.signalR-1.1.4.min.js"></script>
    <script src="~/signalr/hubs"></script>
</head>
<body>
    <input type="text" id="txtMess" />
    <input type="button" value="发送广播消息" id="btnPush" />
    <script>
            (function () {
                $("#btnPush").click(function () {
                    console.log($.connection.hub.state);
                    var $mess = $("#txtMess");
                    $.ajax({
                        url: "../Base/fnBroadcast",
                        data: { msg: $mess.val() },
                        type: "post",
                        dataType: "text",
                        success: function (result) {
                            if (result.indexOf("成功") !== -1) {
                                $mess.val("");
                            }
                        }
                    });
                });              
                //allHub对应后台的 类 AllHub,开头字母不能大写，除非加上别名[HubName("")]
                var allHub = $.connection.allHub,timer=null;
                allHub.client.notice = function (msg) {
                    $("body").append("<br/><br/>" + msg);
                }                  
                function hubstart() {                  
                    try {
                        $.connection.hub.start();                      
                    } catch (err) {
                        console.log(err);
                        setTimeout(() => hubstart(), 5000);
                    }                                                                  
                };
                hubstart();
                //心跳检测，重新连接超过指定次数,或是时间后可放弃
                //{connecting: 0, connected: 1, reconnecting: 2, disconnected: 4}
                function Heart() {                    
                    if ($.connection.hub.state != 1) {                       
                        hubstart();
                    }
                    else {
                        timer = null;
                    }
                }                                               
                $.connection.hub.disconnected(() => {
                    timer = setTimeout(() => Heart(), 5000);                  
                });          
                           
        })();
    </script>
</body>
</html>

最后有图有真相：