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, 1, $notfiy)
                            hasExist = true;
                            return;
                        }
                    });
                    //如果不存在则添加
                    if (!hasExist) {
                        vm.Notifies.push($notfiy);
                        if (vm.Notifies.length > 8)
                            vm.Notifies.splice(7, 1)
                    }
                    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再是长轮询。