SignalR (二)

在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下:

1. 创建一个 mvc 4 web 应用程序,并选择 Basic

SignalR (二)_第1张图片


SignalR (二)_第2张图片


2. 创建一个 Home 控制器, 创建好后,目录应该是这样的:

SignalR (二)_第3张图片


3. 在项目中,鼠标右键打开 Nuget 程序管理包,在 Nuget 程序管理包中 输入 signalr 这样的字符串进行搜索,在搜索结果中选中 Microsoft ASP.NET SignalR 这个项目,并点击安装

SignalR (二)_第4张图片


4. 在刚创建好的 Home 控制器 添加 一个 Index 的 Action ,并创建视图,视图的完整代码如下:


    


    5.  在项目中创建 OWin Startup 启动类, 并在Configuration(IAppBuilder app) 中添加以下 代码:app.MapHubs();
      这段代码的意义就是将 应用程序映射到 Hub 中去,这是在程序启动运行时就会执行的。

    SignalR (二)_第5张图片


    6. 添加 ChatHub.cs 类,并创建 send(string name, string message) 方法,以便在客户端能调用

        public class ChatHub : Hub
        {
            public void Send(string name, string message)
            {
                Clients.All.broadcastMessage(name, message);
            }
    
        }


    7. 对项目进行编译,如果没有错的话,程序执行的结果应该是这样的(以下是用fire fox浏览器):

    SignalR (二)_第6张图片


    SignalR (二)_第7张图片


    在用IE 调试时,在项目中我们可以看到自动生成的一些调用脚本,其中 hubs.js 就是个我们在客户端所引用的     ,它将会把服务器中的方法推送到客户端,以便在客户端可以调用


    SignalR (二)_第8张图片

    Hubs.js 的完整代码如下:

    /*!
     * ASP.NET SignalR JavaScript Library v2.1.2
     * http://signalr.net/
     *
     * Copyright Microsoft Open Technologies, Inc. All rights reserved.
     * Licensed under the Apache 2.0
     * https://github.com/SignalR/SignalR/blob/master/LICENSE.md
     *
     */
    
    /// 
    /// 
    (function ($, window, undefined) {
        /// 
        "use strict";
    
        if (typeof ($.signalR) !== "function") {
            throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
        }
    
        var signalR = $.signalR;
    
        function makeProxyCallback(hub, callback) {
            return function () {
                // Call the client hub method
                callback.apply(hub, $.makeArray(arguments));
            };
        }
    
        function registerHubProxies(instance, shouldSubscribe) {
            var key, hub, memberKey, memberValue, subscriptionMethod;
    
            for (key in instance) {
                if (instance.hasOwnProperty(key)) {
                    hub = instance[key];
    
                    if (!(hub.hubName)) {
                        // Not a client hub
                        continue;
                    }
    
                    if (shouldSubscribe) {
                        // We want to subscribe to the hub events
                        subscriptionMethod = hub.on;
                    } else {
                        // We want to unsubscribe from the hub events
                        subscriptionMethod = hub.off;
                    }
    
                    // Loop through all members on the hub and find client hub functions to subscribe/unsubscribe
                    for (memberKey in hub.client) {
                        if (hub.client.hasOwnProperty(memberKey)) {
                            memberValue = hub.client[memberKey];
    
                            if (!$.isFunction(memberValue)) {
                                // Not a client hub function
                                continue;
                            }
    
                            subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
                        }
                    }
                }
            }
        }
    
        $.hubConnection.prototype.createHubProxies = function () {
            var proxies = {};
            this.starting(function () {
                // Register the hub proxies as subscribed
                // (instance, shouldSubscribe)
                registerHubProxies(proxies, true);
    
                this._registerSubscribedHubs();
            }).disconnected(function () {
                // Unsubscribe all hub proxies when we "disconnect".  This is to ensure that we do not re-add functional call backs.
                // (instance, shouldSubscribe)
                registerHubProxies(proxies, false);
            });
    
            proxies['chatHub'] = this.createHubProxy('chatHub'); 
            proxies['chatHub'].client = { };
            proxies['chatHub'].server = {
                send: function (name, message) {
                    return proxies['chatHub'].invoke.apply(proxies['chatHub'], $.merge(["Send"], $.makeArray(arguments)));
                 }
            };
    
            return proxies;
        };
    
        signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
        $.extend(signalR, signalR.hub.createHubProxies());
    
    }(window.jQuery, window));


    好了,非常感谢你的阅读,如果有什么好的想法,欢迎与我交流。

    源码下载地址:下载源码
        



    

    你可能感兴趣的:(MVC,SignalR)