本文介绍如何使用SignalR的Hub制作一个简单的点赞页面。不同浏览器（或者不同窗口）打开同一个页面，在任何一个页面点赞，所有页面同时更新点赞数。

1、使用Visual Studio Community 2013新建一个Web项目，选择空白模板。

2、使用NuGet安装SignalR。

3、添加Startup.cs。

代码如下。

1
2
3
4
5
6
7
8
9
10
namespace SignalRDemo
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

4、添加一个Hub。

代码如下。给Hub起一个名字，方便后面的html页面使用。当html页面触发Rate()方法时，调用所有客户端的rateUpdate()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
namespace SignalRDemo
{
    [HubName("rateHub")]
    public class RateHub : Hub
    {
        //don't do this in real project
        private static int _rating;
 
        public void Rate()
        {
            _rating += 1;
            Clients.All.rateUpdate(_rating);
        }
    }
}

5、添加一个html页面rate.html。代码如下。先声明一个连接，然后创建一个Hub，createHubProxy("rateHub")中使用的就是Hub的名字（HubName）。接下来添加rateUpdate事件处理，即更新点赞数（rateUpdate被服务器端的Hub调用）。最后启动Hub，添加点赞按钮的事件处理（调用服务器端的Hub的Rate方法）。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Rating</title>

</head>

<body>

    <h2>Please rate</h2>

    <input type="button" id="vote" value="Good (0)" />

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

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

    <script type="text/javascript">

        $(function () {

            var con = $.hubConnection();

            var hub = con.createHubProxy("rateHub");

            hub.on('rateUpdate', function (count) {

                $('#vote').val("Good (" + count + ")");

            });

            con.start().done(function () {

                $('#vote').click(function () {

                    hub.invoke("Rate");

                });

            });

        });

    </script>

</body>

</html>

6、将rate.html设置为起始页并运行。多打开几个窗口，点击任意窗口中的按钮，所有窗口中的点赞数量同时更新。

7、这里有个问题。当点赞数大于零时，新打开的窗口的点赞数仍然是0，因为服务器端的Hub不知道有一个新页面打开了（有新的连接）。只需给服务器端Hub添加如下代码，就可以解决。OnConnected事件在出现任意新的连接时触发，Clients.Caller表示连接的发起端。

1
2
3
4
5
public override Task OnConnected()
{
    Clients.Caller.rateUpdate(_rating);
    return base.OnConnected();
}

源码下载。

推荐SignalR官网的一个Demo：http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

SignalR官网:http://www.asp.net/signalr

本文如有不妥之处，请见谅！

一个简单的SignalR例子的更多相关文章

  1. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  2. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

  3. 使用Multiplayer Networking做一个简单的多人游戏例子-3/3（Unity3D开发之二十七）

    使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...

  4. 使用Multiplayer Networking做一个简单的多人游戏例子-2/3（Unity3D开发之二十六）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 ...

  5. 使用Multiplayer Networking做一个简单的多人游戏例子-1/3（Unity3D开发之二十五）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...

  6. 一个简单的cmake例子

    一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库   #在当前目录新建一个build目录,然后cd build ...

  7. 一个简单的springmvc例子 入门（1）

    一直是从事棋牌游戏,平常用的东西 大多数只是使用一些javase的一些 api对spring 这方面 用到的比较少,每次学了都忘,始终记不住.为了 更轻松学习springboot,从新学习了sprin ...

  8. 利用VisualStudio单元测试框架举一个简单的单元测试例子

    本随笔很简单,不涉及mock和stub对象,而是只给出一个简单的利用Visual Studio单元测试框架的最简单例子.如果需要深入理解Unit Test的原理与艺术,请参考<The art o ...

  9. 撸一个简单的MVVM例子

    我个人以为mvvm框架里面最重要的一点就是VM这部分,它要与Model层建立联系,将Model层转换成可以被View层识别的数据结构:其次也要同View建立联系,将数据及时更新到View层上,并且响应 ...

随机推荐

  1. 【ZZ】终于有人把云计算、大数据和人工智能讲明白了！

    终于有人把云计算.大数据和人工智能讲明白了! https://mp.weixin.qq.com/s/MqBP0xziJO-lPm23Bjjh9w 很不错的文章把几个概念讲明白了...图片拷不过来... ...

  2. [转][C#]Environment 类

    当执行 Environment.GetEnvironmentVariables() 时,可以得到以下结果(受所安装软件影响,每台电脑都不一样) Count = ["SystemDrive&q ...

  3. [UE4]场景截图

    要点: 一.鼠标在编辑器关卡中点一下,然后按F9键截图,右下角会出现截图后的文件链接,点击后会自动打开截图文件所在的文件夹.截图的大小正好的关卡视图的大小. 编辑器:F9键截图,只截图关卡视图界面 运 ...

  4. ORACLE 通过连接查询更新 update select

    注意:  关键的地方是where 语句的加入. 在11G中, 如果不加11G , 或造成除匹配的行数更新为相应的值之后, 其余的会变成负数. 所以,执行前需要测试, 普通办法就是:  先查看需要更新的 ...

  5. 牛客网剑指Offer——正则表达式匹配

    1. 题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整 ...

  6. strut2的核心知识和工作原理

    http://blog.csdn.net/laner0515/article/details/27692673/     写的很详细

  7. webpack 配置案例for angular babel

    1.dev.js: const webpack = require('webpack'); const webpackUglifyJsPlugin = require('webpack-uglify- ...

  8. MySQL也真是让人郁闷(关于子查询中使用limit)

    在MySQL4.1中子查询是不能使用LIMIT的,手册中也明确指明 “This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY ...

  9. 最精简的自定义.net 开发框架

    一. 通过自定义的HttpModule和HttpHandler,重写url,自定义路由规则,实现 Web API功能. 简单说 就是  请求路径 例如 service/method, 那么就指向当前应 ...

  10. MySQL安装，库的操作

    一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...