vs2010 使用SignalR 提高B2C商城用户体验(一)

时间:2021-12-04 11:21:03

vs2010 使用SignalR 提高B2C商城用户体验(一)

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

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

  vs2010 使用SignalR 提高B2C商城用户体验(一)

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

vs2010 使用SignalR 提高B2C商城用户体验(一)

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

Install-Package Microsoft.AspNet.SignalR -Version 1.0.1

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

(1)先介绍推送服务器开发:

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

  然后建立我们的集线器,

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,配置一下路由,我这里的配置是适用于跨域的,后面会介绍到。

  

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,
// visit http://go.microsoft.com/?LinkId=9394801
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及以下版本的。

 @{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>singalr</title>
<script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR-1.0.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>

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

 @{
Layout = "~/views/shared/_layout.cshtml";
}
<script type="text/javascript"> $(function () { // Proxy created on the fly
var chat = $.connection.pushHub;
// Declare a function on the chat hub so the server can invoke it
chat.client.addMessage = function ( message) {
writeEvent('<b>ny</b> 对大家说: ' + message, 'event-message');
}; $("#broadcast").click(function () {
// Call the chat method on the server
chat.server.send( $('#msg').val())
.done(function () {
console.log('Sent message success!'); })
.fail(function (e) {
console.warn(e);
});
}); // Start the connection
$.connection.hub.start().done(function() {
//绑定
chat.server.bind("wo");
}); //A function to write events to the page
function writeEvent(eventLog, logClass) {
var now = new Date();
var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');
}
});
</script>
<h2>
Hub Chat</h2>
<div>
<input type="text" id="Placeholder" value="ny" hidden="true" />
<input type="text" id="msg" />
<input type="button" id="broadcast" value="广播" />
<br />
<br />
<h3>
消息记录: (你是:<span id="MyClientName">ny</span>):
</h3>
<ul id="messages">
</ul>
</div>

此时,启动我们的项目

vs2010 使用SignalR 提高B2C商城用户体验(一)

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

vs2010 使用SignalR 提高B2C商城用户体验(一)

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

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using SignalRTest.SignalR; namespace SignalRTest.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
/// <summary>
/// 用户界面
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
} /// <summary>
/// web接口,推送消息
/// </summary>
/// <param name="msg"></param>
/// <returns></returns>
public string Send(string msg)
{
var context = GlobalHost.ConnectionManager.GetHubContext<PushHub>();
context.Clients.All.addMessage(msg);
return "ok";
} }
}

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

vs2010 使用SignalR 提高B2C商城用户体验(一)

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

今天先到这里,要去面试个人,到这里,我们的推送服务器基本搭建完成,可以在这个基础上进行扩展,做出一个很棒的推送服务器,下一章我们会介绍跨域通信,与其他子站通讯,还有与客户端通信。

vs2010 使用SignalR 提高B2C商城用户体验(一)的更多相关文章

  1. vs2010 使用SignalR 提高B2C商城用户体验(二)

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

  2. vs2010 使用SignalR 提高B2C商城用户体验(三)

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

  3. 使用SignalR 提高B2C商城用户体验1

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

  4. php fastcgi&lowbar;finish&lowbar;request让你的程序由等待时间,瞬间完成,提高用户体验

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

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

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

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

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

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

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

  8. 前端如何实现图片懒加载&lpar;lazyload&rpar; 提高用户体验

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

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

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

随机推荐

  1. &period;Net 转战 Android 4&period;4 日常笔记目录

    .Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建 .Net 转战 Android 4.4 日常笔记(2)--HelloWorld入门程序 .Net 转战 Android 4.4 ...

  2. 集成ShareSDK,分享成功后QQ和空间回调不执行的可能原因

    AndroidMainifest.xml中的如箭头所示的id与assets下ShareSDK.xml中配置的QQ的AppId一定要相同.

  3. POJ 3393 Lucky and Good Months by Gregorian Calendar 模拟题

    题目:http://poj.org/problem?id=3393 不多说了,简单模拟题,因为粗心写错了两个字母,导致错了N遍,模拟还是一贯的恶心,代码实在不想优化了,写的难看了点.. #includ ...

  4. powerdesigner逆向工程 oracle

    我们已经有了数据库,希望使用powerdesigner工具生成pdm文件. 本文使用的版本是 15.0 1,  File-->Reverse Engineer-->Database... ...

  5. Mydumper介绍

    Mydumper是一个针对MySQL和Drizzle的高性能多线程备份和恢复工具.开发人员主要来自MySQL,Facebook,SkySQL公司.目前已经在一些线上使用了Mydumper. 一.Myd ...

  6. UVa 3602 - DNA Consensus String 水题 难度&colon; 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  7. 机器学习 Matplotlib库入门

    2017-07-21 15:22:05 Matplotlib库是一个优秀的python的数据可视化的第三方类库,其中的pyplot支持了类似matlab的图像输出操作.matplotlib.pyplo ...

  8. Android ViewPager设置监听注意事项

    首先 implements View.OnClickListener 因为Item比较多用这个方便 设置监听要注意地方,如果在 onCreate 直接 findViewById布局里的ID是会出错的 ...

  9. 文件属性及OS模块使用&lpar;IO入门2&rpar;

    转载请标明出处: http://www.cnblogs.com/why168888/p/6422270.html 本文出自:[Edwin博客园] 文件属性及OS模块使用(IO入门2) 1. pytho ...

  10. 查看Oracle latch &lowbar;spin&lowbar;count默认值

    查看Oracle latch  _spin_count默认值 SELECT X.KSPPINM NAME, Y.KSPFTCTXVL VALUE, Y.KSPFTCTXDF ISDEFAULT FRO ...