使用SignalR实时显示淘宝买家信誉及中差评信息
使用SignalR实时显示淘宝买家信誉及中差评信息
注，本文使用开发环境：Visual Studio 2012.2，平台：ASP.NET MVC 4，数据库：本文未说明
一、啰嗦故事
接触SignalR已经很长一段时间了，不过也没用它写过什么像样的Demo。今天就与大家分享一个比较简单Demo，本文的重点在于如何使用SignalR。只是以一个实际的例子来说明一下。
Story:故事是的起因是这样地，淘宝卖家是个很可怜的职业，四处寻亲，但是，往往都会因为买家初来炸道，或者出于恶意，或者本身已经养成了中差评习惯而给卖家以中差评。
本身中差评对淘宝店的影响其实也不算小，所以如果能帮卖家避免，最好可以避免。
那么如何避免呢？
首先，卖家是可以自行查看的，但是对于订单量多的卖家来说，是有些辛苦吧，最好可以有个功能。一但有那些给过不良评价的买家来下单时，就立刻提示出来，叮咚~向着这个目标踏进吧。
这是我们的终极效果图,绿色的是马塞克，不要求无码图。
红色背景代表有过差评
黄色背景代表，有过中评或是新号
提示的消息会在买家下单后自动出现在列表的头部（当然是自动的，不需要刷新，要不本节讲SignalR就没意义了是不）
嗯，下面我们来看看如何实现这个主动通知吧
二、走起服务器端
先建立一个ASP.NET MVC项目，这里默认是ASP.NET MVC4 Razor引擎
我们先来建立一个Model，用于数据库存储也好，序列化后传递数据到界面也好，都离不开它。
1: [Table( "buyers" )]
2: public class DbBuyer
3: {
4: /// <summary>
5: /// 自增Id
6: /// </summary>
7: [Column( "id" ), Key]
8: public int Id { get; set; }
9: /// <summary>
10: /// 买家昵称
11: /// </summary>
12: [Column( "nick" )]
13: public string Nick { get; set; }
14: /// <summary>
15: /// uid
16: /// </summary>
17: [Column( "buyer_uid" )]
18: public string BuyerUid { get; set; }
19: /// <summary>
20: /// 买家信誉
21: /// </summary>
22: [Column( "buyer_rate" )]
23: public int RateCount { get; set; }
24: /// <summary>
25: /// 给出过的中评
26: /// </summary>
27: [Column( "send_mid" )]
28: public int SendMid { get; set; }
29: /// <summary>
30: /// 给出过的差评
31: /// </summary>
32: [Column( "send_bad" )]
33: public int SendBad { get; set; }
34: /// <summary>
35: /// 半年内评价
36: /// </summary>
37: [Column( "half_year_count" )]
38: public int HalfYearCount { get; set; }
39: /// <summary>
40: /// 上个月评价
41: /// </summary>
42: [Column( "last_month_count" )]
43: public int LastMonthCount { get; set; }
44: [Column( "add_time" )]
45: public DateTime AddTime { get; set; }
46: }
下面进入SignalR正题
引用一个NuGet的包：Microsoft ASP.NET SignalR
然后我们就能看到引入了一些DLL和JS。
我们先建立一个Hub，就叫BuyerHub，如果你没有模板。。。那就自己建个CS类吧（此模板应该内置于2012.2版本中下载见 www.visualstudio.com ）
1: [HubName( "buyer" )]
2: public class BuyerHub:Hub
3: {
4: private const int TakeCount = 20;
5:
6: public List<DbBuyer> GetNeastBuyerInfo()
7: {
8: using (var db = new Entities()) //Ef code first
9: {
10: //读取最新的买家信息...这个数据从哪来...嗯..无所谓了，自己编吧，或者自己写程序去获取吧
11: var list= db.DbBuyers.OrderByDescending(c => c.AddTime).Take(TakeCount)
12: .OrderBy(c=>c.Id).ToList();
13: return list;
14: }
15: }
16: }
三、View页面
下面我们建立一个页面Index（ASP.NET MVC，Controller我取名叫做AlertController，Razor View）
使用默认Layout（会引用jQuery）
这里我们编辑Index.cshtml内容如下
1: @model dynamic
2:
3: < div id ="shower" >
4: </ div >
5:
6: @section scripts{
7: < script src ="bundles/jquerycolor" ></ script >
8: <script src= "Scripts/jquery.signalR-1.0.1.js" ></script>
9: <script src= "signalr/hubs" ></script>
10: <script type= "text/javascript" src= "@Url.Content(" ~/Scripts/SignalR/BuyerHub.js ")" > </ script >
11: }
其中~/Scripts/SignalR/BuyerHub.js是我们自己建的js，我们下面来看看这个js我们怎么编写才能让这个SignalR运行起来
1:
2: $( function () {
3: var hub = $.connection.buyer;
4: function init() {
5: return hub.server.getNeastBuyerInfo().done( function (buyers) {
6: //从BuyerHub获取buyer数组，就是这里的参数
7: //遍历显示，如果现在列表中不包含，则插入到第一条
8: var div = $( "#shower" );
9: $.each(buyers, function (index, item) {
10: if ($( "div[data-nick='" + item.Nick + "']" , div).length) return ; //列表中已经存在则漂过
11: var x = $( "<div>" ).attr( "data-nick" , item.Nick).html(
12: "<span style='display:inline-block;200px'>" + item.Nick + "</span> <span class='label label-success'>信誉：" +
13: item.RateCount +
14: " </span><span class='label label-warning'>中评：" + item.SendMid +
15: " </span><span class='label label-error'>差评：" + item.SendBad +
16: " </span><span class='label label-important'>上月：" + item.LastMonthCount +
17: " </span><span class='label label-info'>半年：" + item.HalfYearCount+ "</span>" );
18: if (item.SendMid > 0 || item.RateCount==0) x.css( "background" , "yellow" ); //设置中差评效果
19: if (item.SendBad > 0) x.css( "background" , "red" );
20: div.prepend(x);
21: });
22: });
23: }
24: $.extend(hub.client, {
25: updateInfo: function () { //为client创建一个方法updateInfo一会会用到
26: return init();
27: }
28: });
29: $.connection.hub.start().pipe(init); //开启客户端SignalR，并首次运行init
30: });
好的，这样就完了成显示信息的过程，但是如果有新数据插入数据库，我们怎么才能得知呢，最简单的就是在插入数据库的时候主动通知一下，我们假设这个通知是通过Web的，于是我们可以去写一个Action去接受通知。
我们在AlertController中建立一个Sync的Action，当用户访问时，就会通知所有客户端触发 updateInfo方法
1: public ActionResult Sync( string nick)
2: {
3: GlobalHost.ConnectionManager.GetHubContext<BuyerHub>().Clients.All.updateInfo();
4: return Content( "" );
5: }
en,于是。。。就完成了
我们回头来总结一下一个SignalR的几个重要组成
1.Hub，用于提供数据
2.一个页面，用于展示数据
3.一个JavaScript用于建立Client，并运行WebSocket或轮询
4.如果有需要还需要一个服务器端的触发功能
四、其它
SignalR官方网址： http://www.asp.net/signalr
开源项目： https://github.com/SignalR/SignalR
未来版本 ： http://aspnetwebstack.codeplex.com
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息
查看更多关于使用SignalR实时显示淘宝买家信誉及中差评信息的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did45979
接触SignalR已经很长一段时间了，不过也没用它写过什么像样的Demo。今天就与大家分享一个比较简单Demo，本文的重点在于如何使用SignalR。只是以一个实际的例子来说明一下。
Story:故事是的起因是这样地，淘宝卖家是个很可怜的职业，四处寻亲，但是，往往都会因为买家初来炸道，或者出于恶意，或者本身已经养成了中差评习惯而给卖家以中差评。
本身中差评对淘宝店的影响其实也不算小，所以如果能帮卖家避免，最好可以避免。
那么如何避免呢？
首先，卖家是可以自行查看的，但是对于订单量多的卖家来说，是有些辛苦吧，最好可以有个功能。一但有那些给过不良评价的买家来下单时，就立刻提示出来，叮咚~向着这个目标踏进吧。
这是我们的终极效果图,绿色的是马塞克，不要求无码图。
红色背景代表有过差评
黄色背景代表，有过中评或是新号
提示的消息会在买家下单后自动出现在列表的头部（当然是自动的，不需要刷新，要不本节讲SignalR就没意义了是不）
嗯，下面我们来看看如何实现这个主动通知吧
二、走起服务器端
先建立一个ASP.NET MVC项目，这里默认是ASP.NET MVC4 Razor引擎
我们先来建立一个Model，用于数据库存储也好，序列化后传递数据到界面也好，都离不开它。
1: [Table( "buyers" )]2: public class DbBuyer3: {4: /// <summary>5: /// 自增Id6: /// </summary>7: [Column( "id" ), Key]8: public int Id { get; set; }9: /// <summary>10: /// 买家昵称11: /// </summary>12: [Column( "nick" )]13: public string Nick { get; set; }14: /// <summary>15: /// uid16: /// </summary>17: [Column( "buyer_uid" )]18: public string BuyerUid { get; set; }19: /// <summary>20: /// 买家信誉21: /// </summary>22: [Column( "buyer_rate" )]23: public int RateCount { get; set; }24: /// <summary>25: /// 给出过的中评26: /// </summary>27: [Column( "send_mid" )]28: public int SendMid { get; set; }29: /// <summary>30: /// 给出过的差评31: /// </summary>32: [Column( "send_bad" )]33: public int SendBad { get; set; }34: /// <summary>35: /// 半年内评价36: /// </summary>37: [Column( "half_year_count" )]38: public int HalfYearCount { get; set; }39: /// <summary>40: /// 上个月评价41: /// </summary>42: [Column( "last_month_count" )]43: public int LastMonthCount { get; set; }44: [Column( "add_time" )]45: public DateTime AddTime { get; set; }46: }下面进入SignalR正题
引用一个NuGet的包：Microsoft ASP.NET SignalR
然后我们就能看到引入了一些DLL和JS。
我们先建立一个Hub，就叫BuyerHub，如果你没有模板。。。那就自己建个CS类吧（此模板应该内置于2012.2版本中下载见 www.visualstudio.com ）
1: [HubName( "buyer" )]2: public class BuyerHub:Hub3: {4: private const int TakeCount = 20;5:6: public List<DbBuyer> GetNeastBuyerInfo()7: {8: using (var db = new Entities()) //Ef code first9: {10: //读取最新的买家信息...这个数据从哪来...嗯..无所谓了，自己编吧，或者自己写程序去获取吧11: var list= db.DbBuyers.OrderByDescending(c => c.AddTime).Take(TakeCount)12: .OrderBy(c=>c.Id).ToList();13: return list;14: }15: }16: }三、View页面
下面我们建立一个页面Index（ASP.NET MVC，Controller我取名叫做AlertController，Razor View）
使用默认Layout（会引用jQuery）
这里我们编辑Index.cshtml内容如下
1: @model dynamic2:3: < div id ="shower" >4: </ div >5:6: @section scripts{7: < script src ="bundles/jquerycolor" ></ script >8: <script src= "Scripts/jquery.signalR-1.0.1.js" ></script>9: <script src= "signalr/hubs" ></script>10: <script type= "text/javascript" src= "@Url.Content(" ~/Scripts/SignalR/BuyerHub.js ")" > </ script >11: }其中~/Scripts/SignalR/BuyerHub.js是我们自己建的js，我们下面来看看这个js我们怎么编写才能让这个SignalR运行起来
1:2: $( function () {3: var hub = $.connection.buyer;4: function init() {5: return hub.server.getNeastBuyerInfo().done( function (buyers) {6: //从BuyerHub获取buyer数组，就是这里的参数7: //遍历显示，如果现在列表中不包含，则插入到第一条8: var div = $( "#shower" );9: $.each(buyers, function (index, item) {10: if ($( "div[data-nick='" + item.Nick + "']" , div).length) return ; //列表中已经存在则漂过11: var x = $( "<div>" ).attr( "data-nick" , item.Nick).html(12: "<span style='display:inline-block;200px'>" + item.Nick + "</span> <span class='label label-success'>信誉：" +13: item.RateCount +14: " </span><span class='label label-warning'>中评：" + item.SendMid +15: " </span><span class='label label-error'>差评：" + item.SendBad +16: " </span><span class='label label-important'>上月：" + item.LastMonthCount +17: " </span><span class='label label-info'>半年：" + item.HalfYearCount+ "</span>" );18: if (item.SendMid > 0 || item.RateCount==0) x.css( "background" , "yellow" ); //设置中差评效果19: if (item.SendBad > 0) x.css( "background" , "red" );20: div.prepend(x);21: });22: });23: }24: $.extend(hub.client, {25: updateInfo: function () { //为client创建一个方法updateInfo一会会用到26: return init();27: }28: });29: $.connection.hub.start().pipe(init); //开启客户端SignalR，并首次运行init30: });好的，这样就完了成显示信息的过程，但是如果有新数据插入数据库，我们怎么才能得知呢，最简单的就是在插入数据库的时候主动通知一下，我们假设这个通知是通过Web的，于是我们可以去写一个Action去接受通知。
我们在AlertController中建立一个Sync的Action，当用户访问时，就会通知所有客户端触发 updateInfo方法
1: public ActionResult Sync( string nick)2: {3: GlobalHost.ConnectionManager.GetHubContext<BuyerHub>().Clients.All.updateInfo();4: return Content( "" );5: }en,于是。。。就完成了
我们回头来总结一下一个SignalR的几个重要组成
1.Hub，用于提供数据
2.一个页面，用于展示数据
3.一个JavaScript用于建立Client，并运行WebSocket或轮询
4.如果有需要还需要一个服务器端的触发功能
四、其它
SignalR官方网址： http://www.asp.net/signalr
开源项目： https://github.com/SignalR/SignalR
未来版本 ： http://aspnetwebstack.codeplex.com
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于使用SignalR实时显示淘宝买家信誉及中差评信息的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did45979