vs2010 使用SignalR 提升B2C商城用戶體驗（一）

時間 2019-11-18

標籤 vs2010 使用 signalr 提升 b2c 商城用戶體驗欄目 C&C++ 简体版

原文原文鏈接

vs2010 使用SignalR 提升B2C商城用戶體驗（一）javascript

一、需求簡介，作爲新時代的b2c商城，沒有即時通信，怎麼提供用戶粘稠度，怎麼增長銷量，用戶購物的第一習慣就是諮詢，即時通信，應運而生。這裏使用SignalR來實現即時通信，再好不過了，不過項目依然簡歷在2010的基礎上，因此不能使用新版本的SignalR了，這裏介紹一下1.0.0版本的。html

二、整個框架大概是這樣搭建的，歡迎拍磚：java

三、啓動VS2010，新建一個項目，這裏我創建的是asp.net mvc4jquery

而後經過nuget引入SignalR所須要的組件 web

Install-Package Microsoft.AspNet.SignalR -Version 1.0.1面試

關於nuget怎麼使用就不過多介紹了，回車後，所須要的組件基本已經引入項目中了，下面進入開發。json

（1）先介紹推送服務器開發：跨域

　　在項目下，新加一個文件夾SignalR,服務器

　　而後創建咱們的集線器，mvc

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及如下版本的。

 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 }