MyException - 我的异常网
当前位置:我的异常网» 综合 » 一步一步学习SignalR开展实时通信_3_通过CORS解决跨

一步一步学习SignalR开展实时通信_3_通过CORS解决跨域

www.MyException.Cn  网友分享于:2015-08-26  浏览:0次
一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域

SignalR


前言

这周工作比较忙,一直没有时间学习SignalR,大致希望一周能写一篇关于SignalR的文章。上一篇用Persistent Connections方式实现了个简单的在线聊天功能,这次我们继续深入学习。

关于start()的补充

在上一篇文章里前台的html页面我们通过几句javascript创建了一个,代码如下,也可以下载上次的源码。

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>persistent connections</title>
  5. <script src="Scripts/jquery-1.10.2.min.js"></script>
  6. <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
  7. </head>
  8. <body>
  9. <h1>Echo service</h1>
  10. <div>
  11. <input type="text" id="text" />
  12. <button id="send">Send</button>
  13. </div>
  14. <script>
  15. $(function () {
  16. var connection = $.connection("/echo");
  17. connection.logging = true;
  18. connection.received(function (data) {
  19. $("body").append(data + "<br />");
  20. });
  21. connection.error(function (err) {
  22. alert("存在一个错误. \n" +
  23. "Error: " + err.message);
  24. });
  25. connection.start().done(function () {
  26. $("#send").click(function () {
  27. connection.send($("#text").val());
  28. $("#text").val("").focus();
  29. });
  30. });
  31. });
  32. </script>
  33. </body>
  34. </html>

这里需要做些说明:通过代码var connection = $.connection("/echo");
我们创建了一个连接,通过connection.start().done()来开启连接并在连接完成时处理我们需要处理的事件。
如果你将以下代码

  1. connection.start().done(function () {
  2. connection.send('Hi');
  3. });

分成2部分写,如:

  1. connection.start();
  2. connection.send('Hi');

那么你必须注意:
虽然你在connection.send()之前调用了connection.start()开启了连接,但是connection.start()是一个异步方法,意味着有可能你在调用connection.send()时connection并未开启,那么项目将会报错。
正确方法如之前代码所示,再加上一段开启失败的代码:

  1. var connection = $.connection("/echo");
  2. connection.start(function() {
  3. // 连接开启成功才会进入这里
  4. connection.send("Hi");
  5. }).fail(function() {
  6. //连接开启失败则进入这里
  7. alert("服务开启失败");
  8. });

跨域解决方案

上篇文章里有同学问到跨域的问题,那么在接下来的时间我将会带着大家一起学习。
在SignalR解决跨域,有两种方式:第一种是JSONP,第二种是CORS。

JSONP

如果你的服务必须要支持老版本的浏览器,那么JSONP是唯一选择,否则处于安全的考虑这并不被推荐,具体什么安全因素我并不知晓(有同学知道的话可以说明下),基于快速学习的情况下,我们无需纠缠于此。服务器默认会禁用此功能,我们可以通过初始化时提供一个ConnectionConfiguration对象并设置EnableJSONP属性为true来激活此功能。

  1. public class Startup
  2. {
  3. public void Configuration(IAppBuilder app)
  4. {
  5. var config = new ConnectionConfiguration()
  6. {
  7. EnableJSONP = true
  8. };
  9. app.MapSignalR<EchoConnection>("/echo", config);
  10. }
  11. }

我想这几句代码应该很好理解,我们在前面提到过MapSignalR<TConnection>()有许多重载方法,这是另一个重载方法通过提供一个ConnectionConfiguration对象进行相关配置。

CORS

CORS是一个独立的框架,它可以很方便的解决跨域问题,通过Nuget安装
安装命令:Install-Package microsoft.owin.cors
CORS是通过Owin实现的,所以我们需要在项目启动时对他进行一些配置,和做SignalR映射一样实在Startup中进行配置。

  1. public class Startup
  2. {
  3. public void Configuration(IAppBuilder app)
  4. {
  5. //app.MapSignalR<EchoConnection>("/echo");
  6. app.Map("/echo",
  7. map => {
  8. map.UseCors(CorsOptions.AllowAll);
  9. map.RunSignalR<EchoConnection>();
  10. }
  11. );
  12. }
  13. }

代码应该也不难,这次我们通过app.Map()进行映射,第一个参数是映射的地址,第二个参数是一个lambda表达式,通过UseCors(CorsOptions.AllowAll)允许允许跨域。

CORS跨域演示

JSONP我不做演示了有兴趣的可以自己尝试下,接下来我这里做一个通过CORS来进行跨域聊天。首先我讲上次的项目复制一份,省得再重新打代码,并将复制出来的项目名称由SignalR_1改为SignalR_2_CORS
项目目录如下图所示:

省得麻烦,我把SignalR_1部署在IIS上面,这就充当了 一个远程的SignalR服务。

部署成功后,如图所示:

此时我们讲SignalR_2_CORS项目稍作修改
1. 将Startup中的映射删去,此时SignalR_2_CORS已不做SignalR服务器了,只做客户端来连接SignalR_1提供的服务

2. 将echo中的var connection = $.connection("/echo");改为
var connection = $.connection("http://127.0.0.1:8083/echo");

然后运行SignalR_2_CORS中的echo页面,结果如图所示:

出现了一个错误,这个错误提示是我们自己写的

因为我们的SignalR_1并没有允许跨域连接,那么在SignalR_2_CORS中当然无法连接,接下来我们在项目一中允许跨域连接。

重新编译项目一后再刷新下SignalR_1echo.html页面,注意我们这个页面地址

然后刷新下SignalR_2_CORS的页面,注意这个地址

连接成功,没有报错了,发送个消息试试看(●ˇ∀ˇ●)

结束语

这里通过CORS实现了SignalR的跨域问题,跨域如此简单赶快试试吧 。

注意:在通过Nuget安装CORS包时,我这边提示了Unable to find package 'Microsoft.AspNet.Cors'我已经FQ了,所以这个应该不是需要FQ才能下载,但是在Nuget页面中搜索确实有这个包,具体什么原因引起的我也不清楚,如果你有碰到这个问题请下载解压并添加引用即可,由于Microsoft.AspNet.Cors依赖于Microsoft.AspNet.Cors,所以里面的2个包都要添加引用

源码下载
本文发布至作业部落

参考文献

SignalR Programming in Microsoft ASP.NET pdf 下载

文章评论

我是如何打败拖延症的
我是如何打败拖延症的
我的丈夫是个程序员
我的丈夫是个程序员
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员和编码员之间的区别
程序员和编码员之间的区别
10个调试和排错的小建议
10个调试和排错的小建议
程序员应该关注的一些事儿
程序员应该关注的一些事儿
鲜为人知的编程真相
鲜为人知的编程真相
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些争议最大的编程观点
那些争议最大的编程观点
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
一个程序员的时间管理
一个程序员的时间管理
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
 程序员的样子
程序员的样子
程序员必看的十大电影
程序员必看的十大电影
总结2014中国互联网十大段子
总结2014中国互联网十大段子
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
漫画:程序员的工作
漫画:程序员的工作
如何成为一名黑客
如何成为一名黑客
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
为什么程序员都是夜猫子
为什么程序员都是夜猫子
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
编程语言是女人
编程语言是女人
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Java程序员必看电影
Java程序员必看电影
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
代码女神横空出世
代码女神横空出世
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
每天工作4小时的程序员
每天工作4小时的程序员
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
旅行,写作,编程
旅行,写作,编程
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有