使用SignalR 提高B2C商城用户体验1
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的更多相关文章
- vs2010 使用SignalR 提高B2C商城用户体验（二）
vs2010 使用SignalR 提高B2C商城用户体验(二) 上一节,已经实现了,当前域内的通信,这一节中,介绍一下跨域的即时通信,既然要做,我们肯定要把这个推送及聊天服务器做为一个单独的服务器,以 ...
- vs2010 使用SignalR 提高B2C商城用户体验（三）
vs2010 使用SignalR 提高B2C商城用户体验(三) 上一章节,我们的web即时通讯已经可以实现跨域了,但针对我们的需求,还希望,一些客户端程序可以和我们的web用户,在线聊天,所以到Sig ...
- vs2010 使用SignalR 提高B2C商城用户体验（一）
vs2010 使用SignalR 提高B2C商城用户体验(一) 1.需求简介,做为新时代的b2c商城,没有即时通讯,怎么提供用户粘稠度,怎么增加销量,用户购物的第一习惯就是咨询,即时通讯,应运而生.这 ...
- php fastcgi_finish_request让你的程序由等待时间，瞬间完成，提高用户体验
当PHP运行在FastCGI模式时,PHP FPM提供了一个名为fastcgi_finish_request的方法.按照文档上的说法,此方法可以提高请求的处理速度,如果有些处理可以在页面生成完后再进行 ...
- jQuery实现图片预加载提高页面加载速度和用户体验
我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...
- Qunar机票技术部就有一个全年很关键的一个指标：搜索缓存命中率，当时已经做到了>99.7%。再往后，每提高0.1%，优化难度成指数级增长了。哪怕是千分之一，也直接影响用户体验，影响每天上万张机票的销售额。 在高并发场景下，提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap，它比起HashMap，有更小粒度的锁，并发读写性能更好。线程安全的StringBuilder取代S
Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...
- 巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作.具体可参考jQ ...
- 前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
- 如何提高手机APP的用户体验？
详细内容请点击 随着移动互联网如日中天,如火如荼的时候,手机APP开发日益高涨了起来,关于手机APP的用户体验,也是一个老话长谈的话题.从事这行业也很久了,以下是我个人在工作中的一些关于APP的用户体 ...
随机推荐
- 同时安装vs2010和VS2012后IEnumerable<ModelClientValidationRule>编译错误
错误 类型“System.Web.Mvc.ModelClientValidationRule”同时存在于“c:\Program Files (x86)\Microsoft ASP.NET\ASP.NE ...
- 【BZOJ 2038】[2009国家集训队]小Z的袜子(hose)
Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的项链变 ...
- 使用自定义任务审批字段创建 SharePoint 顺序工作流
http://msdn.microsoft.com/zh-cn/library/hh824675(v=office.14).aspx#odc_sp14_ta_CreatingSPSeqWorkflow ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- zoj 3720
为什么注释掉的地方是错的? 自己的代码好糟烂..... 直接枚举点 判是否在多边形内 加起来求概率 求面积的时候代码写搓了.... 比不过别人两行的代码 而且到现在还找不到错 ...
- spoj 379
题是水题 但丫的题目意思太难懂 ....... 英语水平 ...... #include <cstdio> #include <cstring> #include &l ...
- Unity3D的几种坐标系
原地址:http://www.cnblogs.com/martianzone/p/3371789.html http://www.cnblogs.com/88999660/archive/2013/0 ...
- tornado做简单socket服务器（TCP）
http://blog.csdn.net/chenggong2dm/article/details/9041181 服务器端代码如下: #! /usr/bin/env python #coding=u ...
- 几款开源的图形界面库(GUI Libraries)
SmartWin++ 遵循BSD许可协议的C++ GUI库,建立在Windows API之上,但仍可以通过使用WineLib在Linux/xNix上使用.也支持Pocket PC和基于Windows ...
- IText 生成横向的doc文档
IText生成doc文档需要三个包:iTextAsian.jar,iText-rtf-2.1.4.jar,iText-2.1.4.jar 亲测无误,代码如下: import com.lowagie.t ...