您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
注，本文使用开发环境：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: }
下面我们建立一个页面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
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。