一个简单的SignalR例子

本文介绍如何使用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

 

本文如有不妥之处,请见谅!

转载于:https://www.cnblogs.com/tsql/p/8663022.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值