参考文章: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. static,interface and final

    1.static: a)抽象类(abstract class):使用了 abstract 关键字所修饰的 类叫做抽象类.抽象类无法实例化,不能 new 出来一个抽象类的对象(实例). 抽象方法(abs ...

  2. HDU-4716 A Computer Graphics Problem 水题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4716 直接搞.. //STATUS:C++_AC_0MS_288KB #include <fun ...

  3. POJ 3419 Difference Is Beautiful(RMQ变形)

    题意:N个数,M个询问,每个询问为一个区间,求区间最长连续子序列,要求每个数都不同(perfect sequence,简称PS). 题解:很容易求出以每个数为结尾的ps,也就是求区间的最大值.有一个不 ...

  4. Java持久化存储对象Properties的方法list、store、load

    package FileDemo; import java.io.BufferedReader; import java.io.File; import java.io.FileOutputStrea ...

  5. STM32硬件调试详解

    STM32的基本系统主要涉及下面几个部分: 一.电源 1).无论是否使用模拟部分和AD部分,MCU外围出去VCC和GND,VDDA.VSSA.Vref(如果封装有该引脚)都必需要连接,不可悬空: 2) ...

  6. TcxVerticalGrid demo

    procedure TForm1.Button1Click(Sender: TObject);var row: TcxEditorRow; i,t: Integer;begin grid.ClearR ...

  7. 转载ASP.net 中 OutputCache 指令各个参数的作用

    使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...

  8. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  9. Sqlite数据库简介

    在应用sqlite之前需要添加sqlite库,那么我们就会发现有3和3.0的区别,开始我也并不懂,后才知道: 实际上libsqlite3.dylib本身是个链接,它指向libsqlite3.0.dyl ...

  10. 【转】phpmyadmin万能密码漏洞

    影响版本:2.11.3 / 2.11.4 利用方法:用户名处写入‘localhost’@'@”则登录成功. (注意全部是英文标点符号,最后一个为英文双引号) 附上几个php爆绝对路径的办法: phpM ...