首页 > 代码库 > SignalR (二）

SignalR (二）

2024-10-25 09:08:02   207人阅读

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

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

技术分享

 

技术分享

 

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

技术分享

 

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

技术分享

 

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

<body>    <div class="container">        <input type="text" id="message" id="message" />        <input type="button" id="sendmessage" value="http://www.mamicode.com/Send" />        <input type="hidden" id="displayname" />        <ul id="discussion"></ul>    </div>    <script src="http://www.mamicode.com/Scripts/jquery-1.8.2.min.js"></script>    <script src="http://www.mamicode.com/Scripts/jquery.signalR-2.1.2.min.js"></script>    <script src="http://www.mamicode.com/signalr/hubs"> </script>    <script type="text/javascript">        $(function () {            // 定义一个代理， 以引用 Hub            var chat = $.connection.chatHub;            //定义client端的javascript function，供server端hub，通过dynamic的方式，调用所有Clients的javascript function            // 在对话框中输入聊天者的姓名.            $(‘#displayname‘).val(prompt(‘Enter your name:‘, ‘‘));            // 创建一个函数，以使 Hub 可以广播消息。            chat.client.broadcastMessage = function (name, message) {                // 对字符串进行html 编码                var encodedName = $(‘#displayname‘).text(name).html();                var encodedMsg = $(‘#message‘).text(message).html();                //在页面中追加并显示聊天信息                $(‘#discussion‘).append(‘•‘ + encodedName + ‘:  ‘ + encodedMsg + ‘‘ + ‘</br>‘);            };            // 设置消息框的焦点格式.            $(‘#message‘).focus();            // 与服务器建立连接            $.connection.hub.start().done(function () {                             $(‘#sendmessage‘).click(function () {                    // 在Hub中调用 Send 方法                    chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());                    // 清空消息输入框                    $(‘#message‘).val(‘‘).focus();                });            });        });    </script></body>

 


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

技术分享


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浏览器)：

技术分享

 

技术分享


在用IE 调试时，在项目中我们可以看到自动生成的一些调用脚本，其中 hubs.js 就是个我们在客户端所引用的     <script src="http://www.mamicode.com/signalr/hubs"> </script>，它将会把服务器中的方法推送到客户端，以便在客户端可以调用

 

技术分享

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 * *//// <reference path="..\..\SignalR.Client.JS\Scripts\jquery-1.6.4.js" />/// <reference path="jquery.signalR.js" />(function ($, window, undefined) {    /// <param name="$" type="jQuery" />    "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 = http://www.mamicode.com/hub.client[memberKey];"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));

 


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

源码下载地址：下载源码
    

 

 

 

SignalR (二）


联系
我们