SignalR 跨域设置

参考文章:http://www.cnblogs.com/nywd/p/3691813.html

上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以方便扩展使用,这样就要使用跨域技术,既然基于ajax,那么跨域肯定是基于jsonp,下面我们介绍一下跨域的基本配置:

1、服务器的配置,我们打开项目中的Global.asax,在Application_Start中做如下配置:

protected void Application_Start()
        {
            var config = new HubConfiguration();
            config.EnableCrossDomain = true;
            RouteTable.Routes.MapHubs(config);
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

        }
config.EnableCrossDomain = true;

  这句代码,就指定了当前的所有集线器都可以跨域进行使用。

  2、web端配置,我们新建一个项目,然后添加一个html页面,msg.html,添加header部分:

<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/Scripts/json2.js" type="text/javascript"></script>
<script src="/Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
<script src="http://localhost:2154/signalr/hubs" type="text/javascript"></script>

http://localhost:2154/signalr/hubs 就是我们推送服务器的地址了,如果真正上线了,肯定使用推送服务器的域名地址,如:push.xxx.com,然后我们来写js方法,html部分基本一致:

<script type="text/javascript">

        $(function () {

            $.connection.hub.url = "http://localhost:2154/signalr";
            // Proxy created on the fly
            var chat = $.connection.pushHub;
            // Declare a function on the chat hub so the server can invoke it
            chat.client.addMessage = function (message) {
                writeEvent(‘<b>ny</b> 对大家说: ‘ + message, ‘event-message‘);
            };

            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.server.send($(‘#msg‘).val())
                            .done(function () {
                                console.log(‘Sent message success!‘);
                            })
                            .fail(function (e) {
                                console.warn(e);
                            });
            });

                        // Start the connection

                        $.connection.hub.start({ xdomain: true});

            //A function to write events to the page
            function writeEvent(eventLog, logClass) {
                var now = new Date();
                var nowStr = now.getHours() + ‘:‘ + now.getMinutes() + ‘:‘ + now.getSeconds();
                $(‘#messages‘).prepend(‘<li class="‘ + logClass + ‘"><b>‘ + nowStr + ‘</b> ‘ + eventLog + ‘.</li>‘);
            }
        });
</script>

1、首先要指定hub根地址:$.connection.hub.url = "http://localhost:2154/signalr";

  2、启动连接时,添加跨域参数: $.connection.hub.start({ xdomain: true});

  很简单,现在配置已经完成了,我们来启动浏览器测试一下:

可以看到,2个web服务器之间已经实现了互通,而且我们指定使用ie7,说明兼容性是很好的,xp都淘汰了ie6咱也就不测了: )。

  接下来我们要做什么,找个ui设计师,把我们站点的聊天窗口美化一下,做个iframe,在右下角,点击,既出现我们的聊天界面,然后和其他客户端的用户还有我们的客服人员进行聊天,是不是很赞,

要开饭了,明天我们继续介绍客户端连接SignalR,以实现商家客户端和用户直接通信。

时间: 2024-10-17 03:52:44

SignalR 跨域设置的相关文章

chrome跨域设置

最近在学习Angular路由,用版本为54.0的chrome运行示例中的html时出现禁止跨域现象,如下: google了下解决方法,转载如下,原文地址:http://www.cnblogs.com/cshi/p/5660039.html 做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一

chrome浏览器的跨域设置——包括版本49前后两种设置

做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一下新版本chrome的跨域设置方法. 版本号49之前的跨域设置 先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加--disable-web-security就可以了. 具体做法为: 1.下载并安装好chorme浏览器后在桌面找

【JavaScript】JS跨域设置和取Cookie

cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样读取Cookie以及域的设置. AD: 在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name名称和value值这两个属性以外,还有四个属性.这些属性是:

windows &amp; mac chrome浏览器的跨域设置—包括版本49前后两种设置

做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一下新版本chrome的跨域设置方法. 版本号49之前的跨域设置 先介绍一下老方法,参考了一些网上的教程,其实直接在打开命令上加--disable-web-security就可以了. 具体做法为: 1.下载并安装好chorme浏览器后在桌面找

openlayers跨域设置后出现http status 500错误

最近需要弄一下地理信息系统,用到openlayers和geoserver.在解决跨域的时候出现如下问题.求解决方案啊. 问题如下: 附:已经安装了python27,环境变量path中也添加了:c:\Python27 参考了http://www.360doc.com/content/13/1005/23/7669533_319260563.shtml这篇文章设置后,打开http://localhost:8080/gis/cgi/proxy.cgi 得到的页面如下: openlayers跨域设置后出

阿里云OSS跨域设置配置后不生效

OSS跨域资源共享(CORS)错误及排除 跨域资源共享(Cross Origin Resource Sharing,简称 CORS)的介绍及配置请参看跨域资源共享最佳实践. CORS配置有以下几项: 来源(AllowedOrigin)允许跨域请求的来源,可以同时指定多个.配置时需带上完整的域信息,例如http://10.100.100.100:8001或https://www.aliyun.com.注意, 不要遗漏了协议名http或https ,如果端口不是默认的80,还需要带上端口.如果不能确

跨域设置

# 参考: https://blog.csdn.net/linzi1994/article/details/82724429 https://www.cnblogs.com/ShaunChen/p/5998800.html # 配置详解: # 跨域设置 CORS_ORIGIN_ALLOW_ALL = True # 允许所有域名 CORS_ALLOW_CREDENTIALS = True # 允许获取cookie CORS_URLS_REGEX = r'^.*$' CORS_ORIGIN_WHIT

vue-cli的跨域设置

概述 今天打算快速使用vue-cli建立一个小应用用于测试,使用axios发送http请求,但是遇到了跨域问题,总结了一下,供以后开发时参考,相信对其他人也有用. vue-cli的跨域设置 在vue.config.js里面的devServer的proxy加入如下设置. // vue.config.js const tableauApi = 'https://tableau.proxy.web.yimian.com.cn/'; module.exports = { devServer: { pro

WebAPI跨域设置

自定义webapi的路由规则,控制到action 跨域设置:(服务端)webconfig文件中,system.webServer节点下添加 <!--跨域请求:三个配置信息--> <httpProtocol> <customHeaders> <!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)--> <add name="Access-Control-Allow-Methods" value="