• 使用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 }
    复制代码
    复制代码

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

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

  • 相关阅读:
    CGI与fastcgi
    【总结】手动配置LNMP环境之安装NMP
    yum方式安装的Apache目录详解和配置说明
    W. Mysql
    V. PHP
    U. Apache
    学习进度条博客16
    构建之法阅读笔记05
    构建之法阅读笔记04
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/Alex80/p/5510693.html
Copyright © 2020-2023  润新知