SignalR教程9-JavaScript客户端连接服务器

资源引用

JavaScript客户端需要引用jQuery和SignalR核心js文件.jQuery 版本必须 1.6.4 或者比其更新的版本. 如果使用生成的代理, 还需要引用生成的代理文件.下面的例子展示如何引用这些js。

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>

这些引用顺序必须是jQuery, SignalR core,最后是SignalR代理.引用的代理文件使js自动生成的,不是一个真实的文件. SignalR在 "/signalr/hubs"路径生成一个虚拟的代理文件.如果MapSignalR改变了连接地址，代理文件的路径也会改变为在链接地址后面加上"/hubs"。

注意：
Windows 8 (Windows Store) JavaScript客户端,使用真实文件而非生成文件.

在ASP.NET MVC 4 or 5 Razor 视图里, 使用波浪线引用程序的根目录:

<script src="~/signalr/hubs"></script>

在ASP.NET MVC 3 Razor, 使用Url.Content引用代理:

<script src="@Url.Content("~/signalr/hubs")"></script>

在ASP.NET Web Forms中, 使用ResolveClientUrl引用代理或者通过ScriptManager使用相对路径注册它（波浪线开头）。

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

引用方式和引用一个css或者js基本相同，在有些情况下，如果引用一个url没有使用波浪线~，在vs中测试会正确运行，但部署到完整的IIS上可能会出现404错误。

建立连接

一般的在连接之前，需要建立一个连接对象，创建一个代理，注册事件处理方法用于服务器调用。当代理和事件处理建立完成，通过调用start方法建立连接。

如果使用代理文件，不需要建立连接对象，因为代理已经帮助生成了。

建立连接 (使用代理)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

建立连接(不使用代理)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

例子代码使用默认的 "/signalr"地址连接到SignalR服务. 使用不同的地址参见,ASP.NET SignalR Hubs API Guide - Server - The /signalr URL.

默认的, hub的地址是当前的服务器;如果连接到一个不同的服务器, 在start方法连接之前指定url，例子如下:

$.connection.hub.url = ';

注意：
一般的需要在链接前注册事件处理. 如果想连接之后注册多个,则必须在连接之前注册至少一个。 因为一个app中可能有多个Hubs,但如果你只用其中一个，你并不想触发所有的OnConnected事件. 当连接完成，当前的客户端方法告诉SignalR触发OnConnected event，如果在连接之前没有注册事件处理，后注册的事件处理程序会执行。但是Hub's OnConnected方法不会被执行。

start方法执行顺序

start方法异步执行的. 但可以调用回调函数，例如pipe, done, 和 fail.

如果在连接完成后执行代码，例如调用一个服务器方法，将这些代码放入回调函数或者从一个回调函数调用它。连接完成后执行.done回调函数，执行代码在服务器上OnConnected中代码之后。

查看代理是否可用

查看代理文件内容，双击hubs。可以通过浏览"/signalR/hubs" 路径查看，例如，如果你的站点运行在http://localhost:56699，则通过浏览器浏览http://localhost:56699/SignalR/hubs获取内容，SignalR代理文件也可以使用真实的物理路径存储，在使用缓存和与其他文佳捆绑加载又或者获取智能提示的情境下，开发者可能想这么处理。

可通过以下步骤，创建代理文件
1. 安装 Microsoft.AspNet.SignalR.Utils NuGet package.
2. 打开命令控制台转到包含SignalR.exe的工具文件夹 。工具文件夹在下面的路径中:[当前结果方案文件夹]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools
3. 输入下面的命令:
signalr ghp /path:[包含Hub class的 .dll路径 ]
The path to your .dll is typically the bin folder in your project folder.
这条命令创建了一个server.js文件，在signalr.exe的文件夹下.
4.把server.js文件放在你工程的合适位置, 重命名,然后添加一个引用替代 "signalr/hubs"引用.

跨域连接

一般的如果浏览器加载页面http://contoso.com,SignalR在同一个域里面, 即 http://contoso.com/signalr. 如果页面http://contoso.com连接到http://fabrikam.com/signalr,这就是一个跨域链接，出于安全考虑默认的跨域链接是禁止的。

在SignalR 1.x,跨域连接通过一个 EnableCrossDomain flag控制. 这个flag控制 JSONP和CORS请求.
所有CORS支持已经从SignalR的服务器组件中删除（如果检测到浏览器支持，JavaScript客户端仍然正常使用CORS），并且已经提供了新的OWIN中间件来支持这些场景

如果客户端需要JSONP（以支持旧版浏览器中的跨域请求），则需要通过将HubConfiguration对象上的EnableJSONP设置为true来显式启用它，如下所示。 JSONP默认是禁用的，因为它比CORS的安全性要低。
将Microsoft.Owin.Cors添加到项目中：要安装此库，请在软件包管理器控制台中运行以下命令：
Install-Package Microsoft.Owin.Cors
这个命令将把2.1.0版本的包添加到你的项目中
调用UseCors
以下代码片段演示了如何在SignalR 2中实现跨域连接。
在SignalR 2中实现跨域请求
以下代码演示了如何在SignalR 2项目中启用CORS或JSONP。此代码示例使用Map和RunSignalR而不是MapSignalR，以便CORS中间件仅针对需要CORS支持的SignalR请求运行（而不是针对MapSignalR中指定路径的所有流量）。Map还可以用于任何其他中间件需要运行一个特定的URL前缀，而不是整个应用程序。

using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Owin;
namespace MyWebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Branch the pipeline here for requests that start with "/signalr"
            app.Map("/signalr", map =>
            {
                // Setup the CORS middleware to run before SignalR.
                // By default this will allow all origins. You can 
                // configure the set of origins and/or http verbs by
                // providing a cors options with a different policy.
                map.UseCors(CorsOptions.AllowAll);
                var hubConfiguration = new HubConfiguration 
                {
                    // You can enable JSONP by uncommenting line below.
                    // JSONP requests are insecure but some older browsers (and some
                    // versions of IE) require JSONP to work cross domain
                    // EnableJSONP = true
                };
                // Run the SignalR pipeline. We're not using MapSignalR
                // since this branch already runs under the "/signalr"
                // path.
                map.RunSignalR(hubConfiguration);
            });
        }
    }
}

注意：不要设置jQuery.support.cors为true，因为这会让浏览器误以为支持cors而禁用jsonp