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再是長輪詢。