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

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,

　　然后建立我们的集线器，

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>

此时，启动我们的项目

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

是不是感觉很不错。此时，只是当前系统的，并不能做到与其他系统互通有无，那我们加个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商城用户体验（一）

最新文章

热门文章