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 ...
随机推荐
- 综合架构之Rsync备份服务，服务端和客户端配置
服务端配置(即备份服务器) ps:客户端配置见下方 配置一个新服务的步骤: 第一步:先将该服务下载 yum install -y rsync 第二步:编写服务配置文件 配置文件:/etc/rsyncd ...
- 团队第四次作业：alpha1发布成绩汇总
一.作业题目 团队第四次作业:alpha1发布 二.作业评分标准 博客评分规则(总分100)博客要求 给出开头和团队成员列表(10') 给出发布地址以及安装手册(20') 给出测试报告(40') 给出 ...
- Spring——JDBC——数据库
1.Spring 的数据访问哲学 数据访问的功能放到一个或者多个专注于此项任务的组件.这样的组件通常称为数据访问对象(data access object)DAO或者Repository. 为了避免应 ...
- 修改JDK安装路径的作用
JDK的默认安装路径是Program Files文件夹,而Program Files的两个英文单词间有空格, 而当JDK的安装路径里包含空格时,在设置CLASSPATH时,可能会引发莫名奇妙的错误, ...
- 梅尔倒谱系数特征（Mel-frequency cepstral coefficients，MFCC）
引言 感知实验表明,人耳对于声音信号的感知聚焦于某一特定频率区域内,而非在整个频谱包络中. MFCC特征是应用非常广泛的语音特征. 语音的MFCC特征是基于人耳感知实验得到,将人耳当成特定的滤波器,只 ...
- Mybatis集成ehcache
Mybatis集成ehcache 1.为什么需要缓存 拉高程序的性能 2. 什么样的数据需要缓存 很少被修改或根本不改的数据 业务场景比如:耗时较高的统计分析sql.电话账单查询sql等 3. ehc ...
- 洛谷 p1516 青蛙的约会 题解
dalao们真是太强了,吊打我无名蒟蒻 我连题解都看不懂,在此篇题解中,我尽量用语言描述,不用公式推导(dalao喜欢看公式的话绕道,这篇题解留给像我一样弱的) 进入正题 如果不会扩展欧里几德的话请先 ...
- C函数之readlink
函数原型; #include<unistd.h> ssize_t readlink(const char *path, char *buf, size_t bufsiz); 函数说明: r ...
- 如何排查 Linux 机器是否已经被入侵？
原文: https://mp.weixin.qq.com/s/XP0eD40zpwajdv11bsbKkw http://www.cnblogs.com/stonehe/p/7562374.html ...
- 一个web请求的全过程
参考文档:http://www.mamicode.com/info-detail-1357508.html 名词解释DNS: DNS(Domain Name System,域名系统),因特网上作为域名 ...