您的位置：首页 > 编程语言 > ASP

使用SignalR实时显示淘宝买家信誉及中差评信息 推荐

2013-04-27 11:10 381 查看
注，本文使用开发环境：VisualStudio2012.2，平台：ASP.NETMVC4，数据库：本文未说明

一、啰嗦故事

接触SignalR已经很长一段时间了，不过也没用它写过什么像样的Demo。今天就与大家分享一个比较简单Demo，本文的重点在于如何使用SignalR。只是以一个实际的例子来说明一下。

Story:故事是的起因是这样地，淘宝卖家是个很可怜的职业，四处寻亲，但是，往往都会因为买家初来炸道，或者出于恶意，或者本身已经养成了中差评习惯而给卖家以中差评。
本身中差评对淘宝店的影响其实也不算小，所以如果能帮卖家避免，最好可以避免。
那么如何避免呢？
首先，卖家是可以自行查看的，但是对于订单量多的卖家来说，是有些辛苦吧，最好可以有个功能。一但有那些给过不良评价的买家来下单时，就立刻提示出来，叮咚~向着这个目标踏进吧。

这是我们的终极效果图,绿色的是马塞克，不要求无码图。



红色背景代表有过差评
黄色背景代表，有过中评或是新号
提示的消息会在买家下单后自动出现在列表的头部（当然是自动的，不需要刷新，要不本节讲SignalR就没意义了是不）
嗯，下面我们来看看如何实现这个主动通知吧

二、走起服务器端

先建立一个ASP.NETMVC项目，这里默认是ASP.NETMVC4Razor引擎
我们先来建立一个Model，用于数据库存储也好，序列化后传递数据到界面也好，都离不开它。

1:[Table("buyers")]

2:publicclassDbBuyer

3:{

4:///<summary>

5:///自增Id

6:///</summary>

7:[Column("id"),Key]

8:publicintId{get;set;}

9:///<summary>

10:///买家昵称

11:///</summary>

12:[Column("nick")]

13:publicstringNick{get;set;}

14:///<summary>

15:///uid

16:///</summary>

17:[Column("buyer_uid")]

18:publicstringBuyerUid{get;set;}

19:///<summary>

20:///买家信誉

21:///</summary>

22:[Column("buyer_rate")]

23:publicintRateCount{get;set;}

24:///<summary>

25:///给出过的中评

26:///</summary>

27:[Column("send_mid")]

28:publicintSendMid{get;set;}

29:///<summary>

30:///给出过的差评

31:///</summary>

32:[Column("send_bad")]

33:publicintSendBad{get;set;}

34:///<summary>

35:///半年内评价

36:///</summary>

37:[Column("half_year_count")]

38:publicintHalfYearCount{get;set;}

39:///<summary>

40:///上个月评价

41:///</summary>

42:[Column("last_month_count")]

43:publicintLastMonthCount{get;set;}

44:[Column("add_time")]

45:publicDateTimeAddTime{get;set;}

46:}


下面进入SignalR正题
引用一个NuGet的包：MicrosoftASP.NETSignalR



然后我们就能看到引入了一些DLL和JS。
我们先建立一个Hub，就叫BuyerHub，如果你没有模板。。。那就自己建个CS类吧（此模板应该内置于2012.2版本中下载见www.visualstudio.com）




1:[HubName("buyer")]

2:publicclassBuyerHub:Hub

3:{

4:privateconstintTakeCount=20;

5:

6:publicList<DbBuyer>GetNeastBuyerInfo()

7:{

8:using(vardb=newEntities())//Efcodefirst

9:{

10://读取最新的买家信息...这个数据从哪来...嗯..无所谓了，自己编吧，或者自己写程序去获取吧

11:varlist=db.DbBuyers.OrderByDescending(c=>c.AddTime).Take(TakeCount)

12:.OrderBy(c=>c.Id).ToList();

13:returnlist;

14:}

15:}

16:}


三、View页面

下面我们建立一个页面Index（ASP.NETMVC，Controller我取名叫做AlertController，RazorView）
使用默认Layout（会引用jQuery）
这里我们编辑Index.cshtml内容如下

1:@modeldynamic

2:

3:<divid="shower">

4:</div>

5:

6:@sectionscripts{

7:<scriptsrc="../bundles/jquerycolor"></script>

8:<scriptsrc="../Scripts/jquery.signalR-1.0.1.js"></script>

9:<scriptsrc="../signalr/hubs"></script>

10:<scripttype="text/javascript"src="@Url.Content("~/Scripts/SignalR/BuyerHub.js")"></script>

11:}



其中~/Scripts/SignalR/BuyerHub.js是我们自己建的js，我们下面来看看这个js我们怎么编写才能让这个SignalR运行起来

1:

2:$(function(){

3:varhub=$.connection.buyer;

4:functioninit(){

5:returnhub.server.getNeastBuyerInfo().done(function(buyers){

6://从BuyerHub获取buyer数组，就是这里的参数

7://遍历显示，如果现在列表中不包含，则插入到第一条

8:vardiv=$("#shower");

9:$.each(buyers,function(index,item){

10:if($("div[data-nick='"+item.Nick+"']",div).length)return;//列表中已经存在则漂过

11:varx=$("<div>").attr("data-nick",item.Nick).html(

12:"<spanstyle='display:inline-block;width:200px'>"+item.Nick+"</span><spanclass='labellabel-success'>信誉："+

13:item.RateCount+

14:"</span><spanclass='labellabel-warning'>中评："+item.SendMid+

15:"</span><spanclass='labellabel-error'>差评："+item.SendBad+

16:"</span><spanclass='labellabel-important'>上月："+item.LastMonthCount+

17:"</span><spanclass='labellabel-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:returninit();

27:}

28:});

29:$.connection.hub.start().pipe(init);//开启客户端SignalR，并首次运行init

30:});


好的，这样就完了成显示信息的过程，但是如果有新数据插入数据库，我们怎么才能得知呢，最简单的就是在插入数据库的时候主动通知一下，我们假设这个通知是通过Web的，于是我们可以去写一个Action去接受通知。
我们在AlertController中建立一个Sync的Action，当用户访问时，就会通知所有客户端触发updateInfo方法

1:publicActionResultSync(stringnick)

2:{

3:GlobalHost.ConnectionManager.GetHubContext<BuyerHub>().Clients.All.updateInfo();

4:returnContent("");

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








自动_评价

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ASP.NET MVC
                                                SignalR
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航