zoukankan      html  css  js  c++  java
  • 使用SignalR实时显示淘宝买家信誉及中差评信息

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

     
     

    注,本文使用开发环境:Visual Studio 2012.2,平台:ASP.NET MVC 4,数据库:本文未说明

    一、啰嗦故事

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

    Story:故事是的起因是这样地,淘宝卖家是个很可怜的职业,四处寻亲,但是,往往都会因为买家初来炸道,或者出于恶意,或者本身已经养成了中差评习惯而给卖家以中差评。

    本身中差评对淘宝店的影响其实也不算小,所以如果能帮卖家避免,最好可以避免。

    那么如何避免呢?

    首先,卖家是可以自行查看的,但是对于订单量多的卖家来说,是有些辛苦吧,最好可以有个功能。一但有那些给过不良评价的买家来下单时,就立刻提示出来,叮咚~向着这个目标踏进吧。

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

    image

    红色背景代表有过差评

    黄色背景代表,有过中评或是新号

    提示的消息会在买家下单后自动出现在列表的头部(当然是自动的,不需要刷新,要不本节讲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

    image

    然后我们就能看到引入了一些DLL和JS。

    我们先建立一个Hub,就叫BuyerHub,如果你没有模板。。。那就自己建个CS类吧(此模板应该内置于2012.2版本中下载见www.visualstudio.com

    image

       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

  • 相关阅读:
    [Windows]wmic查看运行进程的参数
    Java8中的foreach跳出循环break/return
    Python Learning(6)字典
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(三): 整合阿里云 OSS 服务 -- 上传、下载文件、图片
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(四): 整合阿里云 短信服务、整合 JWT 单点登录
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
    Servlet、Jsp
    BIO、NIO、AIO
    HashMap (JDK1.8) 分析
    mysql常见笔试题
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3045990.html
Copyright © 2011-2022 走看看