在上节中，我们已经初步对 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. 常用增强学习实验环境 II (ViZDoom, Roboschool, TensorFlow Agents, ELF, Coach等) （转载）

    原文链接:http://blog.csdn.net/jinzhuojun/article/details/78508203 前段时间Nature上发表的升级版Alpha Go - AlphaGo Ze ...

  2. 转载： Linux 操作系统挂起、休眠、关机相关命令

    最近每天的工作都难以在当天结束,而本人又不是那种善于熬夜的人,因此就需要将电脑中的工作文件全部保存,以往都是将所有工作文件保存关机,但是最近发现Linux系统有一个好神奇的命令: 休眠: sudo p ...

  3. Nuxt开发搭建博客系统

    nuxt.js第三方插件的使用?路由的配置pages目录自动生成路由layoutsdefault.vueerror.vueVuex的使用权限篇Mysqladvice nuxt.js 追求完美,相信大家 ...

  4. JavaScript高级程序设计——闭包

    前言 有很多人搞不清匿名函数和闭包这两个概念,经常混用.闭包是指有权访问另一个函数作用域中的变量的函数.匿名函数就是没有实际名字的函数. 闭包 概念 闭包,其实是一种语言特性,它是指的是程序设计语言中 ...

  5. hdu2083 简易版之最短距离 排序水题

    给出数轴n个坐标,求一个点到所有点距离总和最小.排序后最中间一个点或两个点之间就是最优 #include<stdio.h> #include<algorithm> using ...

  6. TensorFlow笔记-07-神经网络优化-学习率,滑动平均

    TensorFlow笔记-07-神经网络优化-学习率,滑动平均 学习率 学习率 learning_rate: 表示了每次参数更新的幅度大小.学习率过大,会导致待优化的参数在最小值附近波动,不收敛:学习 ...

  7. 使用C＃和MSMQ开发消息处理程序

    简介 MSMQ(微软消息队列)是Windows操作系统中消息应用程序的基础,是用于创建分布式.松散连接的消息通讯应用程序的开发工具.消息队列和电子邮件有着很多相似处,他们都包含多个属性,用于保存消息, ...

  8. package.json 文件中的版本号

    版本号,格式:"主要版本,次要版本,补丁版本" 指定版本:比如1.2.2,遵循"主版本,次要版本,补丁版本"的格式规定,安装时只安装指定版本. 波浪号(tild ...

  9. Spring Boot 整合 FastDFS 客户端

    原文地址:Spring Boot 整合 FastDFS 客户端 博客地址:http://www.extlight.com 一.前言 前两篇介绍整体上介绍了通过 Nginx 和 FastDFS 的整合来 ...

  10. 更改默认打开wifi功能

    一.打开以下目录 /home/tingpan/openwrt/barrier_breaker/package/kernel/mac80211/files/lib/wifi 找到mac80211.sh ...