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

简介: 注,本文使用开发环境:Visual Studio 2012.2,平台:ASP.NET MVC 4,数据库:本文未说明 一、啰嗦故事 接触SignalR已经很长一段时间了,不过也没用它写过什么像样的Demo。

注,本文使用开发环境: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;width: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

 

 

image

 

目录
打赏
0
0
0
0
1
分享
相关文章
淘宝详情API接口:实现营销自动化的黄金通道
在当今的数字化时代,电子商务正在迅速发展,其中淘宝作为中国最大的电商平台之一,拥有着巨大的用户群体和丰富的商品资源。对于许多卖家来说,如何在这个巨大的市场中脱颖而出,营销策略是至关重要的。而淘宝详情API接口则为卖家提供了一个实现营销自动化的黄金通道。
借助API接口实现自营商城上货采集,无货源模式采集商品
在无货源模式的自营商城中,通过API接口实现商品采集是一个高效且灵活的方式。这种方式允许商家直接从供应商或其他电商平台的API接口中获取商品信息,然后将这些信息导入到自己的商城中,无需自己拥有实际的库存。
京东商品评论数据接口:洞察消费者心声的重要渠道
京东商品评论数据接口提供了商品用户评价信息,包括评价内容、时间、星级、用户头像、昵称、图片和视频地址等。使用时需注册京东开放平台账号,获取认证信息,查阅API文档,明确所需商品信息并调用接口,解析返回的JSON数据以获取评论。此接口适用于市场分析、产品改进、提升用户体验、品牌塑造与口碑营销以及电商运营决策等多个场景,帮助企业深入了解消费者需求,优化产品和服务。
微店商品详情数据接口:接入淘宝代购系统的连接桥梁,展示前端页面
微店API让开发者获取商品详尽信息,如名称、价格等。作为淘宝代购系统的桥梁,它支持数据同步、商品及订单管理。通过多平台API,实现实时商品数据抓取,提供一致购物流程。此外,还能进行价格比较、库存监控,提升用户交互体验,并辅助数据分析以优化采购策略。开发者需按规范对接API,并参考官方文档获取最新信息。
支付系统13------支付系统的资料在技术库里的在线支付当中,怎样获取微信平台证书那?怎样获取微信平台证书那?第一步打开我们的微信支付平台的文档中心
支付系统13------支付系统的资料在技术库里的在线支付当中,怎样获取微信平台证书那?怎样获取微信平台证书那?第一步打开我们的微信支付平台的文档中心
会员系统02--,后台管理系统,包含网站运营,统计分析,用户中心,财务管理,资金明细,系统管理,参数配置,后台管理系统可以观看配置资料,广告位的相关资料,客服工单最主要是客户反馈给我们的问题,登录统计
会员系统02--,后台管理系统,包含网站运营,统计分析,用户中心,财务管理,资金明细,系统管理,参数配置,后台管理系统可以观看配置资料,广告位的相关资料,客服工单最主要是客户反馈给我们的问题,登录统计
淘宝评论数据API接口:洞察消费者声音的关键工具
随着全球电商的快速发展,速卖通(AliExpress)作为知名的跨境电商平台,为卖家提供了广阔的销售渠道。为了更好地满足卖家的需求,速卖通提供了丰富的API接口,使卖家能够自动化、高效地管理商品、订单和用户数据。本文将围绕速卖通AliExpress API接口开发系列展开探讨,帮助卖家更好地理解和应用这些接口。
36分布式电商项目 - 运营商后台(广告管理)
36分布式电商项目 - 运营商后台(广告管理)
75 1
抖音商品详情API接口在电商行业中的重要性及实时数据获取实现
随着移动互联网的快速发展,电商行业不断壮大。抖音作为一款短视频社交应用,近年来在电商领域取得了显著成果。本文将探讨抖音商品详情API接口在电商行业中的重要性,以及如何通过实时数据获取提高业务效率。我们将介绍相关的技术背景、API接口的基础知识、实时数据获取的方法和代码实现,并通过一个案例来展示具体应用。
TienChin 渠道管理-前端展示渠道信息
TienChin 渠道管理-前端展示渠道信息
66 0
TienChin 渠道管理-前端展示渠道信息
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等