本文介绍如何使用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]自定义函数，快速增加输入参数的一种方法

  2. [UE4]打包EXE

    Building configuration 1.Development:开发模式.不会压缩文件 2.Shipping,成品模式.移动版本会自动压缩文件

  3. Android中Handler.removeCallbacksAndMessages(null)的作用

    众所周知,在Android开发中会大量使用到Handler.但是,由于与activity生命周期不一致,当一个Activity被销毁时,如果Handler对象有Message在排队,则无法释放,进而导 ...

  4. [ERR] Node is not empty. Either the node already knows other nodes (check with C

    [root@node00 src]# ./redis-trib.rb add-node --slave --master-id4f6424e47a2275d2b7696bfbf8588e8c4c3a5 ...

  5. tensorFlow 三种启动图的用法

    tf.Session(),tf.InteractivesSession(),tf.train.Supervisor().managed_session()  用法的区别: tf.Session() 构 ...

  6. FIN vs RST in TCP connections different

    question: The way I understand this, there are 2 ways to close TCP connection: send FIN flag send RS ...

  7. OpenJudge 兔子与樱花

    [题解] 求任意两点间的最短路径.此题数据量较小,用Floyd算法,时间复杂度为O(n^3). 参考https://blog.csdn.net/qq_34594236/article/details/ ...

  8. 关于HSTS

    HSTS(HTTP Strict Transport Security) 当用户在浏览器中输入一个域名,如果没有注明前缀(也就是没输入"http"的时候)的时候,浏览器会默认按照h ...

  9. jquery遍历指定元素下的img图片改变其路径

    $(".jieshao img").each(function (i) { $(this).attr("src", "manager/" + ...

  10. 面向对象之—property，staticmethod

    一 特性( property) property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值. property是内置的一种封装方法:把一个属性“伪装”成一个数据属性,做法就是在需要伪装 ...