在上节中，我们已经初步对 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 + Mvc 4 web 应用程序的更多相关文章

  1. spring mvc构建WEB应用程序入门例子

    在使用spring mvc 构建web应用程序之前,需要了解spring mvc 的请求过程是怎样的,然后记录下如何搭建一个超简单的spring mvc例子. 1) spring mvc的请求经历 请 ...

  2. 深入了解如何构建您的第一个多语言ASP。NET MVC 5 Web应用程序

    下载demo - 3.9 MB 介绍 这篇文章解释了如何创建一个简单的多语言ASP.NET MVC 5 Web应用程序.该应用程序将能够处理英语(美国),西班牙语和法语.英语将是默认语言.当然,扩展解 ...

  3. ASP.NET MVC - 发布web应用程序、部署到IIS

    发布项目 右击项目 - 发布 选择IIS - 点击发布 发布方法 - 文件系统,目标位置 - 选择与项目所在目录不同的目录(也即,指定一个发布生成文件的目录),文件发布选项 - 不选 - 点击发布 安 ...

  4. 在Asp.net MVC 3 web应用程序中，我们会用到ViewData与ViewBag，对比一下：

    Asp.net MVC中的ViewData与ViewBag ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP. ...

  5. 为什么 web 开发人员需要迁移到. NET Core, 并使用 ASP.NET Core MVC 构建 web 和 webservice/API

    2018 .NET开发者调查报告: .NET Core 是怎么样的状态,这里我们看到了还有非常多的.net开发人员还在观望,本文给大家一个建议.这仅代表我的个人意见, 我有充分的理由推荐.net 程序 ...

  6. net core体系-web应用程序-4asp.net core2.0 项目实战（CMS）-第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了   原文链接:https://www.cnblogs.com/yilezhu/p/9985451.ht ...

  7. Web 应用程序中的安全向量 – ASP.NET MVC 4 系列

           Web 程序运行在标准的.基于文本的协议(HTTP 和 HTML)之上,所以特别容易受到自动攻击的伤害.本章主要介绍黑客如何滥用应用程序,以及针对这些问题的应对措施.   威胁:跨站脚本 ...

  8. 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  9. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

随机推荐

  1. 读博 在没有导师PUSH的情况下该何去何从？

    读博已有两月之久,与导师也是仅有的一面之缘,短短数分钟谈话大致总结便是看看基础知识,再然后就没有什么了,突然之间有些小懵逼.突然间感慨这就是我的博士生涯的生活,这就没有啦,以后就这么过啦?在读博士之前 ...

  2. 在python中的使用

    操作步骤: 1. 连接数据库,生成数据库连接对象 conn = pymongo.MongoClient('localhost',27017) 2. 选择要操作的数据库,生成数据库对象 (__setit ...

  3. 《DSP using MATLAB》Problem 4.21

    快到龙抬头,居然下雪了,天空飘起了雪花,温度下降了近20°. 代码: %% -------------------------------------------------------------- ...

  4. hdu2079 选课时间(题目已修改,注意读题) 母函数

    计算数的和的种类,母函数裸题 #include<stdio.h> #include<string.h> ],c2[],a,b; int main(){ int T; while ...

  5. hdu 5182 结构体排序

    BC # 32 : 打 BC 的时候没看全三个关键字,WA 了五发,花了近一小时,问了一下才发现少看一个条件,于是顺利给跪. 题意:给出若干城市的两次空气质量,首先按空气质量差排序,若相等则按第二次排 ...

  6. @Transactional + FetchType.LYZY (hibernate) <---> Exception: could not initialize proxy - no Session;

    转自: https://blog.csdn.net/blueheart20/article/details/52912023 4.问题的解决 尝试1:  在Service方法中新增了@Transact ...

  7. ppt罗列项排版

    关于罗列项的排版(1,....2,......3,......4,........)

  8. test20190320 全连（fc）

    题意 全连(fc) [题目背景] 还记得若干年前那段互相比较<克罗地亚狂想曲>的分数的日子吗? [题目描述] E.Space 喜欢打音游. 但是他技术不好,总是拿不到全连(Full Com ...

  9. 将一个list转成json数组-晚上坐49路回去打卡

  10. day43 数据库学习egon的博客 约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...