参考文章: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,以实现商家客户端和用户直接通信。

SignalR 跨域设置的更多相关文章

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

    做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...

  2. vue-cli的跨域设置

    概述 今天打算快速使用vue-cli建立一个小应用用于测试,使用axios发送http请求,但是遇到了跨域问题,总结了一下,供以后开发时参考,相信对其他人也有用. vue-cli的跨域设置 在vue. ...

  3. WebApi服务以及跨域设置

    WCF 它利用TCP.HTTP.MSMQ等传输协议构建“契约先行”的服务.WCF最初为基于SOAP的服务而设计[xml],繁琐.冗余.慢.沉重 WebApi 基于http协议,轻量级的,支持URL路由 ...

  4. Mac下的Chrome或Safari访问跨域设置,MBP上使用模拟器Simulator.app或iphone+Safari调试网页

    Mac下的Chrome或Safari访问跨域设置: mac下终端启动Chrome $ open -a Google\ Chrome --args --disable-web-security 或 /A ...

  5. Asp.net core 跨域设置

    验证环境: dotnet core 2.1/Asp.net core2.1 一.作用域在中间件层  配置的方式是在startup.cs文件Configure(IApplicationBuilder a ...

  6. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  7. jexus手动跨域设置

    AP.NET MVC默认跨域方法如下: <system.webServer> <validation validateIntegratedModeConfiguration=&quo ...

  8. SSO单点登录、跨域重定向、跨域设置Cookie、京东单点登录实例分析

    最近在研究SSO单点登录技术,其中有一种就是通过js的跨域设置cookie来达到单点登录目的的,下面就已京东商城为例来解释下跨域设置cookie的过程 涉及的关键知识点: 1.jquery ajax跨 ...

  9. Chrome Ajax 跨域设置

    一.前言 web 开发中 Ajax 是十分常见的技术,但是在前后端使用接口对接的调试过程中不可避免会碰到跨域问题.今天我给大家介绍一个十分简单有效的方法. 跨域经典错误 二.Chrome 跨域设置 首 ...

随机推荐

  1. eclipse下使用tomcat启动maven项目

    最近学习使用maven,建立了一个maven项目使用eclipse下tomcat启动时报错: 严重: ContainerBase.addChild: start: org.apache.catalin ...

  2. jitsi-meet

    Jitsi Meet在Ubuntu上的快速安装与卸载 1. 进入到终端,切换到root用户 # sudo su 添加相应的代码仓库: # echo 'deb http://download.jitsi ...

  3. MapReduce 开发环境搭建(Eclipse\MyEclipse + Maven)

    写在前面的话 可详细参考,一定得去看 HBase 开发环境搭建(Eclipse\MyEclipse + Maven) Zookeeper项目开发环境搭建(Eclipse\MyEclipse + Mav ...

  4. 100% opacity UILabel over a 50% opacity background (UIView?) UIView是百分之50透明而上面的UILable是100%不透明

    So right now I have a UIView with a UILabel in it. I want the background to have an opacity < 1.0 ...

  5. 给Qt应用程序添加图标文件ico setWindowIcon

    1:通过qmake生成makefile实现过程: (1) 找到一张图片.ico,名字改为myappico.ico:注意:Qt5.2中 ico文件是256 * 256. (2) 创建一个新的文本文档,内 ...

  6. SQL提高查询效益之in、not in、between、like等条件讲述

    在使用SQL语句查询数据库记录时,如果要查询相同的内容,有着不同的多种方法. 仍然,尽管使用多种方法可以得到相同的结果,但是,如果您使用不同的方法,在执行效益上是截然不同的.因此,我们得仔细考虑,如果 ...

  7. web.xml(spring/spring mvc/hibernate)

    <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" ...

  8. MATLAB学习拾遗

    1.坐标轴修饰 axis equal:axis([0,6,0,6]) 不修饰则为默认网格 grid on 2.不太漂亮的pretty命令 3. Laplace变换 syms t s a b f1=ex ...

  9. 解决下载Android Build-tools 19.1.0失败

    准备从Eclipse转到Android Studio了.今天尝试Android Studio的时候,被它提醒我SDK的Android Build-tools版本过低,需要升级. 于是打开Android ...

  10. xcode 4 制作静态库详解

    合并.a文件,制作通用静态库 这二个库一个是用于真机运行的一个是用于模拟器运行的.其实我们可以利用lipo将这二个文件打包成一个通用的a文件.命令如下: 将/Users/user/Library/De ...