溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息

發(fā)布時間：2020-08-06 12:57:56 來源：網(wǎng)絡(luò) 閱讀：639 作者：chsword 欄目：編程語言

 注，本文使用開發(fā)環(huán)境：Visual Studio 2012.2，平臺：ASP.NET MVC 4，數(shù)據(jù)庫：本文未說明

一、啰嗦故事

接觸SignalR已經(jīng)很長一段時間了，不過也沒用它寫過什么像樣的Demo。今天就與大家分享一個比較簡單Demo，本文的重點(diǎn)在于如何使用SignalR。只是以一個實(shí)際的例子來說明一下。

 

Story:故事是的起因是這樣地，淘寶賣家是個很可憐的職業(yè)，四處尋親，但是，往往都會因為買家初來炸道，或者出于惡意，或者本身已經(jīng)養(yǎng)成了中差評習(xí)慣而給賣家以中差評。

本身中差評對淘寶店的影響其實(shí)也不算小，所以如果能幫賣家避免，最好可以避免。

那么如何避免呢？

首先，賣家是可以自行查看的，但是對于訂單量多的賣家來說，是有些辛苦吧，最好可以有個功能。一但有那些給過不良評價的買家來下單時，就立刻提示出來，叮咚~向著這個目標(biāo)踏進(jìn)吧。

這是我們的終極效果圖,綠色的是馬塞克，不要求無碼圖。

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息

紅色背景代表有過差評

×××背景代表，有過中評或是新號

提示的消息會在買家下單后自動出現(xiàn)在列表的頭部（當(dāng)然是自動的，不需要刷新，要不本節(jié)講SignalR就沒意義了是不）

嗯，下面我們來看看如何實(shí)現(xiàn)這個主動通知吧

二、走起服務(wù)器端

先建立一個ASP.NET MVC項目，這里默認(rèn)是ASP.NET MVC4 Razor引擎

我們先來建立一個Model，用于數(shù)據(jù)庫存儲也好，序列化后傳遞數(shù)據(jù)到界面也好，都離不開它。

   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:          /// 買家信譽(yù)
  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:          /// 半年內(nèi)評價
  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:      }

下面進(jìn)入SignalR正題

引用一個NuGet的包：Microsoft ASP.NET SignalR

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息

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

我們先建立一個Hub，就叫BuyerHub，如果你沒有模板。。。那就自己建個CS類吧（此模板應(yīng)該內(nèi)置于2012.2版本中下載見www.visualstudio.com）

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息

 

   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:                  //讀取最新的買家信息...這個數(shù)據(jù)從哪來...嗯..無所謂了，自己編吧，或者自己寫程序去獲取吧
  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）

使用默認(rèn)Layout（會引用jQuery）

這里我們編輯Index.cshtml內(nèi)容如下

   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運(yùn)行起來

   1:   
   2:  $(function () {
   3:      var hub = $.connection.buyer;
   4:      function init() {
   5:          return hub.server.getNeastBuyerInfo().done(function (buyers) {
   6:              //從BuyerHub獲取buyer數(shù)組，就是這里的參數(shù)
   7:              //遍歷顯示，如果現(xiàn)在列表中不包含，則插入到第一條
   8:              var div = $("#shower");
   9:              $.each(buyers, function (index, item) {
  10:                  if ($("div[data-nick='" + item.Nick + "']", div).length) return;//列表中已經(jīng)存在則漂過
  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'>信譽(yù)：" +
  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");//設(shè)置中差評效果 
  19:                  if (item.SendBad > 0) x.css("background", "red");
  20:                  div.prepend(x);
  21:              });
  22:          });
  23:      }
  24:      $.extend(hub.client, {
  25:          updateInfo: function () {//為client創(chuàng)建一個方法updateInfo一會會用到
  26:              return init();
  27:          }
  28:      });
  29:      $.connection.hub.start().pipe(init);//開啟客戶端SignalR，并首次運(yùn)行init
  30:  });

好的，這樣就完了成顯示信息的過程，但是如果有新數(shù)據(jù)插入數(shù)據(jù)庫，我們怎么才能得知呢，最簡單的就是在插入數(shù)據(jù)庫的時候主動通知一下，我們假設(shè)這個通知是通過Web的，于是我們可以去寫一個Action去接受通知。

我們在AlertController中建立一個Sync的Action，當(dāng)用戶訪問時，就會通知所有客戶端觸發(fā) updateInfo方法

   1:          public ActionResult Sync(string nick)
   2:          {
   3:              GlobalHost.ConnectionManager.GetHubContext<BuyerHub>().Clients.All.updateInfo();
   4:              return Content("");
   5:          }

en,于是。。。就完成了

我們回頭來總結(jié)一下一個SignalR的幾個重要組成

1.Hub，用于提供數(shù)據(jù)

2.一個頁面，用于展示數(shù)據(jù)

3.一個JavaScript用于建立Client，并運(yùn)行WebSocket或輪詢

4.如果有需要還需要一個服務(wù)器端的觸發(fā)功能

四、其它

SignalR官方網(wǎng)址： http://www.asp.net/signalr

開源項目：https://github.com/SignalR/SignalR

未來版本 ：http://aspnetwebstack.codeplex.com

 

 

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息

 

使用SignalR實(shí)時顯示淘寶買家信譽(yù)及中差評信息
自動_評價 
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手