跨域通俗理解就是两个域名后面的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再是长轮询。