本文介绍如何使用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. [UE4]Get All Widgets Of Class、Get All Widgets with Interface，根据类名或者接口UI实例对象

    Get All Widgets Of Class.Get All Widgets with Interface,是系统蓝图函数库提供的方法,可以在任何蓝图中使用. 可以方便地获得UI实例对象,进而使用 ...

  2. [UE4]根据名字调用函数（蓝图）

    一.Set Timer by Function Name 二.Set Timer by Event

  3. c#day01

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace test ...

  4. 00006 - Linux中使用export命令设置环境变量

    功能说明:设置或显示环境变量. #################################################################################### ...

  5. iis ajax post 跨域问题解决

    iis ajax post时会遇到跨域的问题 只需要在IIS中http响应头中增加:Access-Control-Allow-Origin:*,即可解决问题

  6. 猴哥来了-游戏开发记录17-微信排行榜bug

    上线后排行榜bug 1.排序算法 const dataSorter = (gameDatas, field = Consts.OpenDataKeys.LevelKey) => {  let d ...

  7. Spring MVC 类型转换

    SpringMVC类型转换: 1 日期类型转换: private Date birthday; <label for="">生日:<input type=&quo ...

  8. Android---页面跳转

    1.首先在一个布局文件(.XML)中绘画了一个跳转按钮(id为btn1): <Button         android:id="@+id/btn1"         an ...

  9. Java - 23 Java 抽象类

    Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...

  10. CS229 6.2 Neurons Networks Backpropagation Algorithm

    今天得主题是BP算法.大规模的神经网络可以使用batch gradient descent算法求解,也可以使用 stochastic gradient descent 算法,求解的关键问题在于求得每层 ...