您的位置:首页 > 理论基础 > 计算机网络

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:我们的框架

#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/
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: