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 ...
随机推荐
- linux的性能调优
单机调优: 分析性能瓶颈的原因,解决它. cpu子系统 内存子系统 IO子系统 网络系统 @cpu子系统调优 cpu技术指标 xeon E5520 2.27GHz 8192kb # c ...
- matplot 绘制定制饼图
1.普通风格 代码 import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = 'SimHei' # 使图形中的中文正常编码显示 ...
- django bms
1. 创建模型 一对多: 需要在""多""的表创建一个""关键字段"" 关联 就像在mysql的哪项少的比如(书与出版 ...
- CentOS7 最小安装 vmware 创建虚拟机 nmcli ip systemctl
镜像网站 一些开源软件的国内镜像源 站点版 (一).企业站 1.搜狐:http://mirrors.sohu.com/ 2.网易:http://mirrors.163.com/ 3.阿里云:http: ...
- gnome 3 插件设置
插件安装及管理方法 应该需提前在gnome-tweaks中打开user-theme,重启电脑后才可找到Add-ons Debian9 下在应用商店插件add-ons里进行选择安装,在应用商店已安装应用 ...
- [RN] React Native 让 Flatlist 支持 选中多个值，并获取所选择的值
React Native 让 Flatlist 支持 选中多个值,并获取所选择的值 实现效果如下: 实现代码: import React, {Component} from 'react'; im ...
- 使用golang写一个redis-cli
使用golang写一个redis-cli 0. redis通信协议 redis的客户端(redis-cli)和服务端(redis-server)的通信是建立在tcp连接之上, 两者之间数据传输的编码解 ...
- 【BZOJ3837】[PA2013]Filary
[BZOJ3837][PA2013]Filary 题面 darkbzoj 题解 考虑到模数为\(2\)时答案至少为\(\frac n2\),这是我们答案的下界. 那么我们对于任意的一个数,它们答案集合 ...
- WPF 数据绑定,界面刷新的两种方法-----INotifyPropertyChanged
.Netformwork4.0及以下版本 -------INotifyPropertyChanged 命名空间: System.ComponentModel 后台代码 public partial c ...
- shell中echo输出换行的方法
[~]#echo "Hello world.\nHello sea" Hello world.\nHello sea [~]#echo -e "Hello world.\ ...