参考文章: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. 【Linux 命令】Linux系统下强制用户下线——who,pkill

    [日期]2014年11月18日 [平台]Centos 6.5 [工具]who pkill [步骤] 1)准备工作 以root身份登录. 2)执行who命令,查看有哪些用户已登录到当前主机

  2. 数组(Array)

    1. 数组(Array):相同类型数据的集合就叫做数组. 2. 数组的定义与赋值(系统会默认初始化) 普通数组: package com.li; public class Array{ public ...

  3. leetcode@ [300] Longest Increasing Subsequence (记忆化搜索)

    https://leetcode.com/problems/longest-increasing-subsequence/ Given an unsorted array of integers, f ...

  4. Packetbeat协议扩展开发教程(3)

    原文链接:http://elasticsearch.cn/article/54 书接上回:http://elasticsearch.cn/article/53 前面介绍了Packetbeat的项目结构 ...

  5. 推荐eclipse velocity一款插件 --- veloeclipse

    vm文件在eclipse展示很丑,关键字没有颜色之差.这里,推荐一款极其好用的velocity插件  -- veloeclipse 在 Eclipse 版本 4.5.0, 离线安装 Veloeclip ...

  6. innobackupex 单脚本循环7天一全备6增备脚本更新

    #!/bin/bash #日期转为天数 function date2days { echo "$*" | awk '{ z=-$)/); y=$+-z; m=$+*z-; j=*m ...

  7. SpringMVC学习 DispatcherServlet (转载)

    3.1.DispatcherServlet作用 DispatcherServlet是前端控制器设计模式的实现,提供spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring Io ...

  8. 学习 MFC之 工具栏(二)

    对于InitToolBar()函数进行进一步解析: 1.首先声明一个全局对象:  CToolBar m_toolbar; 2.然后用create()创建toolbar: //创建ToolBar工具条 ...

  9. centos yum安装mysql

    查看有没有安装包 # yum list mysql 安装mysql客户端 # yum install mysql # yum list mysql-server 安装mysql 服务器端 # yum ...

  10. Linux SO_KEEPALIVE属性,心跳

    对于面向连接的TCP socket,在实际应用中通常都要检測对端是否处于连接中,连接port分两种情况: 1.连接正常关闭,调用close() shutdown()连接优雅关闭,send与recv立刻 ...