Asp SignalR跨域实例WebApi+js

准备

前段时间因为公司项目要用到SignaIR，我研究了半天，才成功推送消息到客户端。发现跨域其实也很简单，后面我会附上Dome链接。

环境

我这里用的是 ：
1.vs 2019
2.WEB ASP窗体
3. ASP WebAPi

安装NuGet程序包

首先导入NuGet程序包 工具—NuGet程序包管理
webAPI程序：
1.Microsoft.AspNet.SignalR
2.Microsoft.Owin.Cors （注：解决JS跨域问题）
如何需要webAPI 跨域请安装Microsoft ASP.NET.WebAPI.Cors （但请注意跨域的优先级）
ASP 窗体
1.Microsoft.AspNet.SignalR.JS (注：单独安装SignalR.JS即可)

代码块

WebApi端（代码）

1.创建配置OWIN Startup应用程序类

2.Startup应用程序配置
app.UseCors 将CORS中间件添加到web应用程序管道中以允许跨域。
app.MapSignalR 将 SignalR 集线器映射到“/signalr”处的应用生成器管道。

    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
            //允许跨域
             app.UseCors(CorsOptions.AllowAll);
            app.MapSignalR("/chatHub", new HubConfiguration());
            //自己设定访问路径，同时设置Hub配置项，无需指定启动的Hub类，因为它们被自动识别
        }
    }

3.创建Hub集线器 它提供与所连接的SignalR进行通信的方法

    [HubName(hubName:"chatHub")]
    public class ChatHub : Hub
    {
        public void Hello()
        {
            Clients.All.hello("你好");
        }
    }

4.WebApi 服务代码
为了方便webAPi 方便调用 SignalR 进行通信把消息推送到web端。新建一个类，我这里类名为BaseApiController，上代码：

    public class BaseApiController<T> : ApiController where T : Hub
    {
        protected IHubConnectionContext<dynamic> Clients { set; get; }

        protected IGroupManager Groups { set; get; }

        protected BaseApiController()
        {
            var context = GlobalHost.ConnectionManager.GetHubContext<T>();
            Clients = context.Clients;
            Groups = context.Groups;
        }
    }

1.IHubConnectionContext Hub 所有连接信息接口
2.GetHubContext 获取Hub 连接的上下文
5.WebAPI调用

    public class ValuesController : BaseApiController<ChatHub>
    {
        // GET api/values
        public string Get()
        {
            Clients.All.hello("webAPI 数据：这是跨域");
            
            return "Hello";
        }

    }

当有请求进入Get 方法，信息会发送到所有有连接的客户端， hello 为客户端创建方法。

ASP 客户端（代码）

    <script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
    <script type="text/javascript">
        jQuery.support.cors = true;
        $(function () {
            var connection = $.hubConnection("https://localhost:44368/chatHub");//根据设置好的映射路径创建连接
            var proxy = connection.createHubProxy("chatHub");//根据连接创建我们需要访问的hub代理。chatHub这里是之前创建好的chathub类
            connection.start(function () {
                //调用服务端方法
                proxy.invoke("hello");//调用chatHub中hello方法
            });
            //为客户端创建方法,这里hello 是webAPi发送指定方法
            proxy.on("hello", function (msg) {
                alert(msg);
            });
        })
    </script>

为了方便大家观看我就不把注释单独拿出来讲解了。

JS代码很少，但要注意看代码注释

SignalR跨域支持 到此结束。。

希望大家 ：学之所用 用其所学