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代码:

 1     /**
 2               获取后台Signalr服务地址,绑定$.connection.notifyHub
 3             */
 4             function bindNotifyServier() {       
 5                 var url = "";
 6                 mwc.restApi.post({
 7                     //请求地址
 8                     url: '/Home/GetNotifyUrl',
 9                     //是否锁定UI
10                     isBlockUI: true,
11                     //成功函数
12                     success: function (data) {
13                         console.log("获取推送消息地址:" + data.NotifyUrl);
14                         url = data.NotifyUrl;
15                         initData(url);
16                     }
17                 });          
18             }
19 
20     /** 初始化数据
21             */
22             function initData(notifyUrl) {
23                 //获取消息集线器对象    
24                 
25                 $.connection.hub.url = notifyUrl;
26                 var notifyHubProxy = $.connection.notifyHub;             
27                 notifyHubProxy.client.Notify = function (notify) {
28                     console.log('收到消息:' + notify);
29                     $notfiy = JSON.parse(notify);
30                     speckText($notfiy.Message);
31                     if (typeof (notify.length) != 'undefined') {
32                         vm.Notifies.push($notfiy);
33                         console.log('压入消息');
34                         return;
35                     }
36                     var hasExist = false;
37                     //是否已存在此消息
38                     $.each(vm.Notifies, function (i, v) {
39                         if (v.Id == notify.Id) {
40                             vm.Notifies.splice(i, 1, $notfiy)
41                             hasExist = true;
42                             return;
43                         }
44                     });
45                     //如果不存在则添加
46                     if (!hasExist) {
47                         vm.Notifies.push($notfiy);
48                         if (vm.Notifies.length > 8)
49                             vm.Notifies.splice(7, 1)
50                     }
51                     console.debug(vm.Notifies);
52                 };
53                 $.connection.hub.start({ transport: ['webSockets', 'longPolling'] }).done(function () {
54                     console.debug('已成功连接服务器！');
55                 }).fail(function () { console.log('连接失败！'); });
56             };

View Code

 

 

后台推送代码:

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

 

示例图:

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

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

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

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