http与websocket两种协议下的跨域基于ASP.NET MVC--竹子整理
2016-03-09 20:04
633 查看
这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题。这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺。
至于websocket具体是什么意义,用途如何:请百度。
简单说就是建立一个基于互联网的实时通信。
在这里整理下这些内容,方便日后回顾。
一:介绍了WebSocket下的基于SignalR的跨域与不跨域例子
二:简单介绍了Http下的跨域问题
Ⅰ.WebSocket下的跨域
如果使用原生的方法来开发WebSocket应用,还是比较复杂的,不过好在Asp.net给我们提供了一个框架——
SignalR:
微软支持的运行在.NET平台上集客户端与服务器于一体的库。简单来说就是给我们提供了服务端的类库加上前端的JS库。
首先抛开跨域的问题,先写一个SignalR不跨域的例子:
1、NuGet来获得我们所需要的程序集:
SignalR:我们的框架
View Code
如果您认为这篇文章还不错或者有所收获,可以点击右下角的[b]【推荐】按钮,因为你的支持是我继续写作,分享的最大动力![/b]
作者:玛丽的竹子
来源:http://www.cnblogs.com/joeymary/
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
至于websocket具体是什么意义,用途如何:请百度。
简单说就是建立一个基于互联网的实时通信。
在这里整理下这些内容,方便日后回顾。
一:介绍了WebSocket下的基于SignalR的跨域与不跨域例子
二:简单介绍了Http下的跨域问题
Ⅰ.WebSocket下的跨域
如果使用原生的方法来开发WebSocket应用,还是比较复杂的,不过好在Asp.net给我们提供了一个框架——
SignalR:
微软支持的运行在.NET平台上集客户端与服务器于一体的库。简单来说就是给我们提供了服务端的类库加上前端的JS库。
首先抛开跨域的问题,先写一个SignalR不跨域的例子:
1、NuGet来获得我们所需要的程序集:
SignalR:我们的框架
#region 不跨域的方法 //app.MapSignalR(); #endregion #region 跨域的第一种方法 //这个参数"/echo",是我们自己定义的一个路由,与客户端创建SignalR的实例时对应。 app.Map("/echo", map => { map.UseCors(CorsOptions.AllowAll); map.RunSignalR<EchoConnection>(); } ); #endregion #region 第一种方法前端调用代码 // <script src="js/jquery-1.8.2.js"></script> // <script src="js/jquery.signalR-2.2.0.min.js"></script> // <script type="text/javascript"> // $(function () { // var connection = $.connection("http://localhost:23013/echo");//对应的服务器端地址 // //var connection = $.connection("http://192.168.137.1/q"); // connection.logging = true; // connection.received(function (data) { // $("body").append(data + "<br />"); // }); // connection.error(function (err) { // alert("存在一个错误. \n" + // "Error: " + err.message); // }); // connection.start().done(function () { // $("#send").click(function () { // connection.send($("#text").val()); // $("#text").val("").focus(); // }); // }); // }); //</script> #endregion #region 跨域的第二种方法 //app.Map("/signalr", map => //{ // map.UseCors(CorsOptions.AllowAll); // var hubConfiguration = new HubConfiguration // { // EnableJSONP = true//跨域的关键语句 // }; // map.RunSignalR(hubConfiguration); //}); //app.MapSignalR(); #endregion #region 第二种方法前台代码 // <script src="js/jquery-1.8.2.js"></script> // <script src="js/jquery.signalR-2.2.0.min.js"></script> // <script src="http://localhost:23013/signalr/js" type="text/javascript" charset="utf-8"></script>地址是服务器端地址加上/设置的路由/js // <script type="text/javascript"> // var chat = $.connection.myHub; //获取服务端实例 首字母小写,不是跟服务端一致的MyHub //console.log(chat); //chat.connection.url = "http://localhost:23013/signalr";测试项目的地址 // chat.connection.url = "http://localhost:6874/joey"; //1、回调函数 函数名要匹配,参数可以不匹配,后台传过来一个就执行一个,即若后台同时触发了两个同名的sayHello //依次执行 //2、一定要有回调函数,不然不算连接成功,可以不调用服务器端的方法。若只是调用服务器端方法,没写回调函数, //依然不算连接成功 //3、在连接成功的情况下,后台先执行OnConnected事件,再执行前台调用的某个方法 //4、用回调函数来判断是否真的连接成功,$.connection.hub.start().done里直接输出连接成功,是假成功。 //5、所以同样,断开连接是否成功也应用回调函数来判断,这个回调函数对应后台代码应在OnDisconnected事件里 //6、第五点失败,sayGoodBye是在执行完这个事件(OnDisconnected)后才传输到前台,而事件中执行完已经把链接断开了,前台是接收不到的 //chat.client.sayHello = function(connectionCode) { // if(connectionCode == 1) // { // $("#IsConnSuc").val("1");//给隐藏字段赋值,1表示连接成功 // alert("连接成功"); // } // else // { // alert("连接失败"); // } // }; //-----------注释掉的--------------------------------------------------------------------- // chat.client.sayGoodBye = function(connectionCode) { // if(connectionCode == 1) // { // alert("断开连接成功"); // } // else // { // alert("断开连接失败"); // } // }; // //建立连接 // $.connection.hub.start().done(function() { // // Call the Send method on the hub. // chat.server.hello("fd"); //调用服务器端定义的方法 方法名首字母小写,后台对应的方法首字母大小写都能匹配上 // }); //-----------注释掉的--------------------------------------------------------------------- // $(function(){ // $("#start").click(function(){ // //建立连接 // $.connection.hub.start(); // }); // $("#stop").click(function() { // if($("#IsConnSuc").val() == "1"){ // //有连接时,才执行断开连接操作 // $.connection.hub.stop(); // $("#IsConnSuc").val("0"); // alert("断开连接成功"); // } // }); // }); //</script> #endregion
View Code
如果您认为这篇文章还不错或者有所收获,可以点击右下角的[b]【推荐】按钮,因为你的支持是我继续写作,分享的最大动力![/b]
作者:玛丽的竹子
来源:http://www.cnblogs.com/joeymary/
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
相关文章推荐
- 安卓基础:http处理XML文件
- HTTP请求响应头信息|用Servlet如何实现验证码
- Servlet 05 客户端 http请求
- C++中this指针的用法详解 http://blog.chinaunix.net/uid-21411227-id-1826942.html
- Hadoop2.7.2分布式部署1(网络配置篇)
- Java从网络读取图片并保存至本地
- hdu4292 网络流 —最大流
- iOS网络解析中的md5加密+时间戳
- opencv 网络摄像头(webcamera)
- 如何在CentOS7上改变网络接口名
- Linux网络I/O模型
- Http学习
- maven新建web项目提示The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- Apache HttpClient 4.3开发指南 实现URL重定向
- vb6 winhttp 上传文件
- https原理:证书传递、验证和数据加密、解密过程解析
- 解决spring4.x中的MappingJacksonHttpMessageConverter错误
- httpclient4.3 设置代理请求
- 百宝云开源【易语言网络验证系统】完整版,可一键安装
- socket与http的区别