vs2010 使用SignalR 提高B2C商城用户体验（一）

1、需求简介，做为新时代的b2c商城，没有即时通讯，怎么提供用户粘稠度，怎么增加销量，用户购物的第一习惯就是咨询，即时通讯，应运而生。这里使用SignalR来实现即时通讯，再好不过了，不过项目依然简历在2010的基础上，所以不能使用新版本的SignalR了，这里介绍一下1.0.0版本的。

2、整个框架大概是这样搭建的，欢迎拍砖：

　　

3、启动VS2010，新建一个项目，这里我建立的是asp.net mvc4

然后通过nuget引入SignalR所需要的组件

Install-Package Microsoft.AspNet.SignalR -Version 1.0.1

关于nuget怎么使用就不过多介绍了，回车后，所需要的组件基本已经引入项目中了，下面进入开发。

（1）先介绍推送服务器开发：

　　在项目下，新加一个文件夹SignalR,

　　然后建立我们的集线器，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using Owin;
 
namespace SignalRTest.SignalR
{
    [HubName("pushHub")]
    public class PushHub : Hub
    {
        public void Send(string message)
        {
            Clients.All.addMessage(message);
        }
 
        public void Bind(string userKey)
        {
             
        }
 
        public override Task OnConnected()
        {
            var id = Context.ConnectionId;
            var c = Clients.Caller;
            return base.OnConnected();
        }
 
    }
}

　　Send方法，主要用来向客户端广播消息，Bind我本意是做登录校验，然后绑定客户端，OnConnected当客户端发起连接后会出发，里面的成员可以用一个字典进行管理。

　　然后进入Global.asax,配置一下路由，我这里的配置是适用于跨域的，后面会介绍到。

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;
using Microsoft.AspNet.SignalR;
using Owin;
 
namespace SignalRTest
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode,
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            var config = new HubConfiguration();
            config.EnableCrossDomain = true;
            RouteTable.Routes.MapHubs(config);
            AreaRegistration.RegisterAllAreas();
 
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
             
        }
 
        
    }
}

　　

（2）web页面开发：

先创建母版页，请注意js的顺序，json2.js主要是用于支持ie7及以下版本的。

 1 @{

 2     Layout = null;

 3 }

 4 <!DOCTYPE html>

 5 <html>

 6 <head>

 7     <meta name="viewport" content="width=device-width" />

 8     <title>singalr</title>

 9     <script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>

10     <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>

11     <script src="@Url.Content("~/Scripts/jquery.signalR-1.0.1.js")" type="text/javascript"></script>

12     <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

13 </head>

14 <body>

15     <div>

16         @RenderBody()

17     </div>

18 </body>

19 </html>

然后创建主页，我是在homecontroller里面创建的index，这里就不过多介绍了：

 1 @{

 2     Layout = "~/views/shared/_layout.cshtml";

 3 }

 4 <script type="text/javascript">

 5

 6     $(function () {

 7

 8

 9         // Proxy created on the fly

10         var chat = $.connection.pushHub;

11         // Declare a function on the chat hub so the server can invoke it

12         chat.client.addMessage = function ( message) {

13             writeEvent('<b>ny</b> 对大家说: ' + message, 'event-message');

14         };

15

16         $("#broadcast").click(function () {

17             // Call the chat method on the server

18             chat.server.send( $('#msg').val())

19                             .done(function () {

20                                 console.log('Sent message success!');

21

22                             })

23                             .fail(function (e) {

24                                 console.warn(e);

25                             });

26         });

27

28         // Start the connection

29         $.connection.hub.start().done(function() {

30             //绑定

31             chat.server.bind("wo");

32         });

33

34         //A function to write events to the page

35         function writeEvent(eventLog, logClass) {

36             var now = new Date();

37             var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();

38             $('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');

39         }

40     });

41 </script>

42 <h2>

43     Hub Chat</h2>

44 <div>

45     <input type="text" id="Placeholder" value="ny" hidden="true" />

46     <input type="text" id="msg" />

47     <input type="button" id="broadcast" value="广播" />

48     <br />

49     <br />

50     <h3>

51         消息记录： (你是：<span id="MyClientName">ny</span>):

52     </h3>

53     <ul id="messages">

54     </ul>

55 </div>

此时，启动我们的项目

已经可以进行广播了，开启多个客户端看一下效果

是不是感觉很不错。此时，只是当前系统的，并不能做到与其他系统互通有无，那我们加个web方法，提供给其他服务器进行推送调用：

 1 using System;

 2 using System.Collections.Generic;

 3 using System.Linq;

 4 using System.Web;

 5 using System.Web.Mvc;

 6 using Microsoft.AspNet.SignalR;

 7 using Microsoft.AspNet.SignalR.Hubs;

 8 using SignalRTest.SignalR;

 9

10 namespace SignalRTest.Controllers

11 {

12     public class HomeController : Controller

13     {

14         //

15         // GET: /Home/

16         /// <summary>

17         /// 用户界面

18         /// </summary>

19         /// <returns></returns>

20         public ActionResult Index()

21         {

22             return View();

23         }

24

25         /// <summary>

26         /// web接口，推送消息

27         /// </summary>

28         /// <param name="msg"></param>

29         /// <returns></returns>

30         public string Send(string msg)

31         {

32             var context = GlobalHost.ConnectionManager.GetHubContext<PushHub>();

33             context.Clients.All.addMessage(msg);

34             return "ok";

35         }

36

37     }

38 }

这时我们来调用一下看看：

这样，我们就可以给客服人员做一个页面，让他们来给指定用户，或者全站用户广播消息了，是不是感觉很棒。

使用SignalR 提高B2C商城用户体验1的更多相关文章

  1. vs2010 使用SignalR 提高B2C商城用户体验（二）

    vs2010 使用SignalR 提高B2C商城用户体验(二) 上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以 ...

  2. vs2010 使用SignalR 提高B2C商城用户体验（三）

    vs2010 使用SignalR 提高B2C商城用户体验(三) 上一章节,我们的web即时通讯已经可以实现跨域了,但针对我们的需求,还希望,一些客户端程序可以和我们的web用户,在线聊天,所以到Sig ...

  3. vs2010 使用SignalR 提高B2C商城用户体验（一）

    vs2010 使用SignalR 提高B2C商城用户体验(一) 1.需求简介,做为新时代的b2c商城,没有即时通讯,怎么提供用户粘稠度,怎么增加销量,用户购物的第一习惯就是咨询,即时通讯,应运而生.这 ...

  4. php fastcgi_finish_request让你的程序由等待时间，瞬间完成，提高用户体验

    当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...

  5. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  6. Qunar机票技术部就有一个全年很关键的一个指标：搜索缓存命中率，当时已经做到了>99.7%。再往后，每提高0.1%，优化难度成指数级增长了。哪怕是千分之一，也直接影响用户体验，影响每天上万张机票的销售额。 在高并发场景下，提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap，它比起HashMap，有更小粒度的锁，并发读写性能更好。线程安全的StringBuilder取代S

    Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...

  7. 巧用Ajax的beforeSend 提高用户体验--防止重复数据

    巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作.具体可参考jQ ...

  8. 前端如何实现图片懒加载(lazyload) 提高用户体验

    定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...

  9. 如何提高手机APP的用户体验？

    详细内容请点击 随着移动互联网如日中天,如火如荼的时候,手机APP开发日益高涨了起来,关于手机APP的用户体验,也是一个老话长谈的话题.从事这行业也很久了,以下是我个人在工作中的一些关于APP的用户体 ...

随机推荐

  1. Linux下Mysql数据库备份

    今天一同事的电脑无缘无故坏了,找了IT部门检测说是硬盘坏了,数据无法恢复.好悲剧.自己博客也写了好久不容易,要是突然间数据丢了那怎么办!于是写了个数据库自动备份脚本,并创建任务计划,实现每天22:30 ...

  2. linux ssh 安装、安全设置

    环境:ubuntu 12.04   一.简单安装设置 1. 安装ssh 服务器 $ sudo apt-get install openssh 2. 查看运行状态 $ service ssh statu ...

  3. 【BZOJ 1834】 [ZJOI2010]network 网络扩容

    Description 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用.求: 1. 在不扩容的情况下,1到N的最大流: 2. 将1到N的最大流增加K所需的 ...

  4. Ubuntu Linux启用root用户登录

    Ubuntu Linux有一个与众不同的特点,那就是初次使用时,你无法作为root来登录系统,为什么会这样?这就要从系统的安装说起.对于其他Linux系统来 说,一般在安装过程就设定root密码,这样 ...

  5. 集成“支付宝” -b

    大致步骤 1.与支付宝签约获取相关参数 合作者身份 ID 与安全校验码 key2.下载需要导入的文件,做相应设置3.在自己的项目中集成支付的方法代码 详细步骤 1.获取合作者身份 ID 与安全校验码 ...

  6. c#无标题窗体点击任务栏图标正常最小化或还原

    FormBorderStyle等于System.Windows.Forms.FormBorderStyle.None的窗体,点击任务栏图标的时候,是不能象标准窗体那样最小化或还原的. protecte ...

  7. 2002: [Hnoi2010]Bounce 弹飞绵羊 - BZOJ

    Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置 ...

  8. IE 浏览器下 button元素自动触发click？

    为什么这么说呢?且看下面的情形: 当用户焦点在输入框中的时候,当用户按了“Enter”键之后,达到点击登录的效果:所以这里就监听了input的keydown事件,当keyCode是13的时候,就发送请 ...

  9. jmeter 响应结果分析二

    转自:http://www.cnblogs.com/Carrie_Liang/archive/2008/11/10/1330997.html 前文再续,续接上一回.上一篇讲了如何利用Assertion ...

  10. EL表达式对数组、集合操作

    el表达式是通过${key}的方式获取对象中的值.在el表达式中有如下几个隐含的对象,pageScope,requestSope,sessionScope,applicationScope,如果要取$ ...