在上节中，我们已经初步对 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="Send" />

        <input type="hidden" id="displayname" />

        <ul id="discussion"></ul>

    </div>

    <script src="/Scripts/jquery-1.8.2.min.js"></script>

    <script src="/Scripts/jquery.signalR-2.1.2.min.js"></script>

    <script src="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="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 = 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));

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

源码下载地址：下载源码

 

SignalR (二）的更多相关文章

  1. 二、在 ASP.NET Core 中使用 SignalR之类库

    一.前段代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="view ...

  2. 基于SignalR的消息推送与二维码描登录实现

    1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...

  3. [Asp.net 开发系列之SignalR篇]专题二：使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

  4. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（二） 之 ChatServer搭建，连接服务器，以及注意事项。

    上篇:ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取) 上一篇我们已经完成了初步界面的搭建工作,本篇将介绍IM的核心内容 ...

  5. vs2010 使用SignalR 提高B2C商城用户体验（二）

    vs2010 使用SignalR 提高B2C商城用户体验(二) 上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以 ...

  6. SignalR 设计理念(二)

    SignalR 设计理念(二) 实现客户端和服务器端的实时通讯. 前言: 客户端方法忽略大小写,主要原因基于是URL对大小写不敏感的问题,开发者之间为了更好的协同开发,定下的开发者协议. 问题阐述 客 ...

  7. Python GUI之tkinter窗口视窗教程大集合（看这篇就够了） JAVA日志的前世今生 .NET MVC采用SignalR更新在线用户数 C#多线程编程系列（五）- 使用任务并行库 C#多线程编程系列（三）- 线程同步 C#多线程编程系列（二）- 线程基础 C#多线程编程系列（一）- 简介

    Python GUI之tkinter窗口视窗教程大集合(看这篇就够了) 一.前言 由于本篇文章较长,所以下面给出内容目录方便跳转阅读,当然也可以用博客页面最右侧的文章目录导航栏进行跳转查阅. 一.前言 ...

  8. IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯（二）

    IdentityServer4 + SignalR Core +RabbitMQ 构建web即时通讯(二) IdentityServer4 用户中心生成数据库 上文已经创建了所有的数据库上下文迁移代码 ...

  9. SignalR的简单使用(二)

    原文:SignalR的简单使用(二) 之前提到SignalR代理在网页,通过生成的Js来完成相关的功能.但我不禁想一个问题, 难到SignalR的服务端就能寄存在web端吗,通过访问网页能方式才能启动 ...

随机推荐

  1. shell 脚本实战笔记(10)--spark集群脚本片段念念碎

    前言: 通过对spark集群脚本的研读, 对一些重要的shell脚本技巧, 做下笔记. *). 取当前脚本的目录 sbin=`dirname "$0"` sbin=`cd &quo ...

  2. 20155237 2016-2017-2 《Java程序设计》第6周学习总结

    20155237 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入与输出 InputStream与OutputStream 流(Stream)是对 ...

  3. C# NPOI导出Excel和EPPlus导出Excel

    转自:http://www.cnblogs.com/tanpeng/p/6155749.html 系统中经常会使用导出Excel的功能.之前使用的是NPOI,但是导出数据行数多就报内存溢出. 最近看到 ...

  4. dbt 基本试用

    dbt 是一个很不错的进行etl 中的t 处理的工具,灵活简单,我们需要写的就是select 语句 dbt 帮助我们进行处理 测试集成了graphql 以及使用docker 运行 安装 pip ins ...

  5. pipelinedb Continuous transforms 操作

    Continuous transforms 可以进行数据的转换,数据是不进行存储,主要是可以加入到其他的stream pipeline 中,或者写到其他外部 存储中,和存储过程结合使用,当前默认内置一 ...

  6. 01.ubuntu14.04安装HI3518EV200 SDK的过程

    转载,侵删 1.海思SDK安装编译 Hi3518EV200_SDK是基于Hi3518EV200_DMEB的软件开发包,包含了在Linux相关应用开发时使用的各种工具及其源代码,是用户开发中最基本的软件 ...

  7. meta viewport 理解

    移动设备上的浏览器如果不指明 viewport 这个meta,当你从移动设备上浏览网页的时候,它假设(你浏览的是桌面版并且你想看到所有的内容),不只是一个左上角.因此,它会把viewport的宽度设置 ...

  8. 51nod 1673 树有几多愁——虚树+状压DP

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1673 建一个虚树. 一种贪心的想法是把较小的值填到叶子上,这样一个小值限制到的 ...

  9. bzoj 4137 [FJOI2015]火星商店问题——线段树分治+可持久化01trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4137 关于可持久化01trie树:https://www.cnblogs.com/LadyL ...

  10. 洛谷2530(codevs2098)化工厂装箱员

    题目:https://www.luogu.org/problemnew/show/P2530 dp或搜索. dp做法就是 当前值+1 转移到 当前某一维为0.位置前进了c位 的地方.但没写. 写了搜索 ...