参考文章: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. [转载]mac下homebrew的使用

    该文转自:https://www.zybuluo.com/phper/note/87055 mac系统也是基于unix的系统,所以也继承类很多unix的特性,包括软件的编译,安装等.ubuntu下有快 ...

  2. leetcode@ [279]Perfect Squares

    https://leetcode.com/problems/perfect-squares/ Given a positive integer n, find the least number of ...

  3. Android实例-设置消息提醒(XE8+小米2)

    相关资料: 1.官网实例:http://docwiki.embarcadero.com/RADStudio/XE5/en/Mobile_Tutorial:_Using_the_Notification ...

  4. A Tour of Go Images

    Package image defines the Image interface: package image type Image interface { ColorModel() color.M ...

  5. Java & XML Tool Overview

    As mentioned in the introduction Sun now provides these tools for XML Processing in Java: StAX Reade ...

  6. nyoj 69 数的长度

    数的长度 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出 ...

  7. C#操作JSON学习

    JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的文本格式,可以很容易在 ...

  8. NGUI学习笔记(四):动态加载UI和NGUI事件

    动态加载UI 我们进入一个场景后,如果将这个场景所有可能用到的UI都直接放在场景中做好,由于要在进入场景时就部署好所有的UI对象,那么当UI对象较多时会碰到的问题是:1.初始化场景会产生非常明显的卡顿 ...

  9. 关系数据库 范式(NF: Normal Form) 说明

    关系数据库 范式(NF: Normal Form) 说明 数据库电话insertdelete存储oracle   目录(?)[+]   一.范式概述(NF:NormalForm) 数据库的设计范式是数 ...

  10. Riesz-Thorin插值不等式