ASP.NET SignalR 系列（八）之跨域推送
前面几章讲的都是同域下的推送和订阅。这种讲讲如何跨域
对于SignalR来说，默认是不允许跨域的，因为安全问题。虽如此，但同时提供了跨域方案。
两种跨域方式：
1：JSONP
2：CORS
JSONP的方式比Cors更不安全。下面分别讲讲怎么使用
一、JSONP方式
服务端设置：
Startup.cs文件
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
//JSONP方式
app.MapSignalR(new HubConfiguration() {EnableJSONP = true});
}
}
然后在全局文件中Global.cs注册，允许jsonp
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes); //注册为允许跨域，JSONP模式需要
var config = new HubConfiguration();
config.EnableJSONP = true; }
}
前端：在其他项目中新建一个html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://localhost:59831/Scripts/jquery.signalR-2.3.0.min.js"></script>
<script src="http://localhost:59831/signalr/hub/hubs"></script> <!--指向集线器服务器-->
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 20px;
} .input {
padding-left: 5px;
}
</style>
</head>
<body>
<div>
<h4>这是跨域的页面</h4>
<hr />
<p>
<input type="text" id="content" placeholder="发送内容" class="input" /> <input type="button" value="发送" class="btn btn-sm btn-info" id="btn_send" />
</p> <div>
<h4>接收到的信息：</h4>
<ul id="dataContainer"></ul>
</div>
</div> <script language="javascript">
$(function () {
$.connection.hub.url = 'http://localhost:59831/signalr'; //指定signalR服务器，这个是关键，signalR为固定，系统默认。除非集线器那边重定义。
var chat = $.connection.demoHub; //连接服务端集线器，demoHub为服务端集线器名称，js上首字母须改为小写（系统默认）
//定义客户端方法，此客户端方法必须与服务端集线器中的方法名称、参数均一致。
//实际上是服务端调用了前端的js方法（订阅）
chat.client.show = function (content) {
var html = '<li>' + htmlEncode(content) + "</li>";
$("#dataContainer").append(html);
} //定义推送，跨域启动时，必须指定 jsonp：true
$.connection.hub.start({ jsonp: true })
.done(function () {
$("#btn_send").click(function () {
chat.server.hello($("#content").val()); //将客户端的content内容发送到服务端
$("#content").val("");
});
});
});
//编码
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
</body>
</html>
上效果图：
从上图可以看到，用到的域名不同，一个端口号59831 ，一个61625。实现了跨域
第二种：Cors 模式
该模式需要下载Microsoft.Owin.Cors组件，可从Nuget中获取
安装完成后，注册Strartup.cs文件
public void Configuration(IAppBuilder app)
{
////系统默认
//app.MapSignalR();
//JSONP方式
//app.MapSignalR(new HubConfiguration() {EnableJSONP = true}); //Cors跨域模式
app.Map("/signalr", map =>
{
// Setup the CORS middleware to run before SignalR.
// By default this will allow all origins. You can
// configure the set of origins and/or http verbs by
// providing a cors options with a different policy.
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
};
// Run the SignalR pipeline. We're not using MapSignalR
// since this branch already runs under the "/signalr"
// path.
map.RunSignalR(hubConfiguration);
});
}
如果需要同时兼容 JSONP，那么将上面EnableJSONP = true 注释取消即可。
cors模式，不需要再global中注册了，如果要兼容JSONP，那么注册还是需要保留
下面上前端：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://localhost:59831/Scripts/jquery.signalR-2.3.0.min.js"></script>
<script src="http://localhost:59831/signalr/hub/hubs"></script>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 20px;
} .input {
padding-left: 5px;
}
</style>
</head>
<body>
<div>
<h4>这是跨域的页面</h4>
<hr />
<p>
<input type="text" id="content" placeholder="发送内容" class="input" /> <input type="button" value="发送" class="btn btn-sm btn-info" id="btn_send" />
</p> <div>
<h4>接收到的信息：</h4>
<ul id="dataContainer"></ul>
</div>
</div> <script language="javascript">
$(function () {
$.connection.hub.url = 'http://localhost:59831/signalr'; //指定signalR服务器
jQuery.support.cors = true; //Cors模式必须设置
var chat = $.connection.demoHub; //连接服务端集线器，demoHub为服务端集线器名称，js上首字母须改为小写（系统默认）
//定义客户端方法，此客户端方法必须与服务端集线器中的方法名称、参数均一致。
//实际上是服务端调用了前端的js方法（订阅）
chat.client.show = function (content) {
var html = '<li>' + htmlEncode(content) + "</li>";
$("#dataContainer").append(html);
} //定义推送，启动时无需再设置jsonp：true
$.connection.hub.start()
.done(function () {
$("#btn_send").click(function () {
chat.server.hello($("#content").val()); //将客户端的content内容发送到服务端
$("#content").val("");
});
});
});
//编码
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
</body>
</html>
效果如下图：
至此，两种跨域模式均讲解完成。
cors相对来说安全性比较高，但是对客户端要求比较高，比如低版本的IE不支持。
JSONP的模式安全性较低，但是对低版本IE兼容比较好。
所以再使用的时候，根据实际情况做选择，或者同时兼容。
ASP.NET SignalR 系列（八）之跨域推送的更多相关文章
- Asp.net SignalR 实现服务端消息实时推送到所有Web端
ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加 ...
- asp.net core 系列之允许跨域访问-1(Enable Cross-Origin Requests:CORS)
接上篇的允许跨域 4.CORS 策略(Policy)的选项 这里讲解Policy可以设置的选项: 设置允许的访问源 设置允许的HTTP methods 设置允许的请求头(request header) ...
- asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
这一节主要讲如何测试跨域问题 你可以直接在官网下载示例代码,也可以自己写,我这里直接使用官网样例进行演示 样例代码下载: Cors 一.提供服务方,这里使用的是API 1.创建一个API项目.或者直接 ...
- Signalr指定Websocket方式跨域数据传输
跨域通俗理解就是两个域名后面的web服务地址,即都是独立的网站.现实业务的情况会有很多需要跨域推送数据的情况, 比如类似饿了么商户后台会收到客户端确认订单后,后台服务会推送一条订单消息给商户前台. S ...
- 《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)
从现在开始相关文章请到: http://lko2o.com/moon 接着上一篇:<ASP.NET SignalR系列>第三课 SignalR的支持平台 一.概述 SignalR常常依托于 ...
- 《ASP.NET SignalR系列》第一课 认识SignalR
从现在开始相关文章请到: http://lko2o.com/moon 一.概述 ASP.NET signalr对ASP.NET开发者来说是一个新的程序库,它能让我们更加容易便捷地开发实时通信功能; s ...
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR
接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...
- 《ASP.NET SignalR系列》第三课 SignalR的支持平台
从现在开始相关文章请到: http://lko2o.com/moon 接着第二课:<ASP.NET SignalR系列>第二课 SignalR的使用说明 一.服务器系统要求 SignalR ...
随机推荐
- Mysql数据库之调整最大连接数
.查看最大连接数 show variables like '%max_connections%'; 2.修改最大连接数 set GLOBAL max_connections = 200; 以下的文章主 ...
- linux常见性能分析工具
vmstat sar (来源于sysstat工具包,需要yum sysstat)iostat (来源于sysstat工具包,需要yum sysstat)free -muptimene ...
- 目标检测论文解读13——FPN
引言 对于小目标通常需要用到多尺度检测,作者提出的FPN是一种快速且效果好的多尺度检测方法. 方法 a,b,c是之前的方法,其中a,c用到了多尺度检测的思想,但他们都存在明显的缺点. a方法:把每图片 ...
- Nginx+Tomcat实现动静分离和负载均衡
一.什么是动静分离? Nginx动静分离简单来说就是把动态和静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是将动态请求和静态请求分开,可以理解成使用Nginx处理静态 ...
- [BZOJ2667][cqoi2012][kcoj]模拟工厂
题目描述 Description 有一个称为“模拟工厂”的游戏是这样的:在时刻0,工厂的生产力等于1.在每个时刻,你可以提高生产力或者生产商品.如果选择提高生产力,在下一个时刻时工厂的生产力加1:如果 ...
- vue CSS使用/deep/
比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地 ...
- web前端图片模糊到清晰的实现过程
在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现? 默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我们 ...
- 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础
2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...
- MongoDB查询和sql查询的总结
查询所有表或集合 sql show tables mongodb db.getCollectionNames() 删除集合或表 sql drop table 表名 mongodb ...
- Spring JDBC最佳实践(1)
原文地址:https://my.oschina.net/u/218421/blog/38513 Spring提供了两种使用JDBC API的最佳实践,一种是以JdbcTemplate为核心的基于Tem ...