Signalr指定Websocket方式跨域数据传输

跨域通俗理解就是两个域名后面的web服务地址，即都是独立的网站。现实业务的情况会有很多需要跨域推送数据的情况，

比如类似饿了么商户后台会收到客户端确认订单后，后台服务会推送一条订单消息给商户前台。

Signalr跨域代码:

   public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            try
            {
                Air.Log.Logger.Default.Trace("配置signalr");
                //新增管道异常处理模块
                GlobalHost.HubPipeline.AddModule(new ErrorHandlingPipelineModule());
                GlobalHost.HubPipeline.AddModule(new LoggingPipelineModule());
                app.Map("/WebApiSignalr", map =>
                {
                    //支持跨域
                    map.UseCors(CorsOptions.AllowAll);
                    var hubConfiguration = new HubConfiguration
                    {
                        // You can enable JSONP by uncommenting line below.
                        // JSONP requests are insecure but some older browsers (and some
                        // versions of IE) require JSONP to work cross domain
                        // EnableJSONP = true
                        EnableJSONP = true,
                        EnableDetailedErrors = true
                    };
                    map.RunSignalR(hubConfiguration);
                });
                Air.Log.Logger.Default.Trace("配置signalr完毕");
            }
            catch (Exception ea)
            {
                Air.Log.Logger.Default.Error("Startup异常", ea);
            }
        }
    }

前台js代码:

     /**
               获取后台Signalr服务地址,绑定$.connection.notifyHub
             */
             function bindNotifyServier() {
                 var url = "";
                 mwc.restApi.post({
                     //请求地址
                     url: '/Home/GetNotifyUrl',
                     //是否锁定UI
                     isBlockUI: true,
                     //成功函数
                     success: function (data) {
                         console.log("获取推送消息地址:" + data.NotifyUrl);
                         url = data.NotifyUrl;
                         initData(url);
                     }
                 });
             }

     /** 初始化数据
             */
             function initData(notifyUrl) {
                 //获取消息集线器对象    

                 $.connection.hub.url = notifyUrl;
                 var notifyHubProxy = $.connection.notifyHub;
                 notifyHubProxy.client.Notify = function (notify) {
                     console.log('收到消息:' + notify);
                     $notfiy = JSON.parse(notify);
                     speckText($notfiy.Message);
                     if (typeof (notify.length) != 'undefined') {
                         vm.Notifies.push($notfiy);
                         console.log('压入消息');
                         return;
                     }
                     var hasExist = false;
                     //是否已存在此消息
                     $.each(vm.Notifies, function (i, v) {
                         if (v.Id == notify.Id) {
                             vm.Notifies.splice(i, , $notfiy)
                             hasExist = true;
                             return;
                         }
                     });
                     //如果不存在则添加
                     if (!hasExist) {
                         vm.Notifies.push($notfiy);
                         if (vm.Notifies.length > )
                             vm.Notifies.splice(, )
                     }
                     console.debug(vm.Notifies);
                 };
                 $.connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () {
                     console.debug('已成功连接服务器！');
                 }).fail(function () { console.log('连接失败！'); });
             };

后台推送代码:

      var notifier = NotifyManager.Current.Notifier;
                         VmSiteNotify vmNotify = new VmSiteNotify();                         
                         vmNotify.Message = "测试下!";
                         vmNotify.Title = "测试推送";
                         notifier.NotifyTo(vmNotify, user.RoleId.ToString());

示例图:

如上图 的方式就是方式为websocket，查看通讯方式是不是websocket就看http请求的Requet Headers下是不是有上图红框框下圈中的信息。

这里要留意上面js的代码，我是写了这样一段：$.connection.hub.start({ transport: ['webSockets', 'longPolling'] })

这一段的意思就是优先websocket的通讯方式,不然感觉我的实际环境支持websocket实际上浏览器的调试结果告诉我也是走的其他通讯方式。

所以最好在start时候明确通讯方式，上面js的意思是优先websocket再是长轮询。