[渣譯文] SignalR 2.0 系列： 開始使用SignalR 2.0

時間  2019-11-26
標籤 譯文 signalr 2.0 系列 開始 使用 简体版
原文   原文鏈接

英文渣水平，大夥湊合着看吧……javascript

這是微軟官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻譯，這裏是第四篇：開始使用SignalR 2.0css

原文：Getting Started with SignalR 2.0html

PS.前面的那篇從SignalR1.0升級爲2.0跳過了……只有幾步，有興趣的同窗能夠本身去看。java

概述

本教程展現瞭如何使用SignalR2.0構建一個基於瀏覽器的聊天室程序。你將把SignalR庫添加到一個空的ASP.NET Web應用程序中，建立用於發送消息到客戶端的集線器(Hubs)類，建立一個HTML頁面讓用戶在該頁面上發送和接收聊天信息。對於如何在MVC5環境中中建立一個聊天室，請參閱Getting Started with SignalR 2.0 and MVC 5。jquery

SignalR是一個開源的.Net庫，用於構建須要實時用戶交互或實時數據更新的Web應用程序。好比社交應用，多用戶在線遊戲，商務協做，新聞，天氣，金融或更新應用程序。以上一般被成爲實時應用程序。git

SignalR簡化構建實時應用程序的過程。它包括一個ASP.NET服務器庫和一個JavaScript客戶端庫，使其更易於管理客戶端到服務器端的鏈接並推送內容更新到客戶端。您能夠將SignalR庫添加到現有的ASP.NET應用程序以得到實時功能。程序員

本教程將演示如下SignalR開發任務：github

  • 添加SignalR庫到ASP.NET Web應用程序
  • 創建一個集線器類來推送更新內容到客戶端
  • 創建一個.Net開放Web接口(OWIN)啓動類來配置應用程序
  • 在網頁中使用SignalR jQuery庫發送和顯示更新消息

下面的屏幕截圖顯示了在瀏覽器中運行的聊天應用程序，每一個新加入聊天室的用戶均可以隨意發言。web

設置項目

本節說明如何使用VS2013及SignalR 2.0庫來建立一個空的ASP.NET WEB引用程序並向其中添加SignalR，以建立聊天室。瀏覽器

1.在VS2013中建立一個新的WEB應用程序。

2.在新的ASP.NET項目窗口中，選擇空項目並肯定建立。

3.在解決方案資源管理器中，右擊該項目，選擇添加—新建項，選擇SignalR集線器類(v2)，命名爲ChatHub.cs並添加，以下圖：

這一步將建立ChatHub類，並將一組SignalR腳本和程序集引用添加到項目中。

注意：您還能夠經過NuGet來添加SignalR到項目中，經過打開工具—庫軟件包管理器—包管理器控制檯 ，並運行一個命令：

 install-package Microsoft.AspNet.SignalR

若是您使用包管理器控制檯來添加SignalR，請在添加後再執行建立ChatHub類這一步。

4.在解決方案資源管理器中，展開腳本文件夾，能夠看到項目已經添加了jQuery及SignalR的JS引用。

5.用編輯你的ChatHub文件，刪除Hello方法並添加Send方法，以下面的代碼：

using System;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

6.在解決方案資源管理器中，右擊該項目，而後單擊添加—新建項—OWIN啓動類，將類命名爲Startup並添加。

7.在啓動類的配置方法中添加SignalR的映射，以下面的代碼：

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRChat.Startup))]

namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

8.在解決方案資源管理器中，右鍵單擊該項目，而後單擊添加—新建項—HTML頁面，命名爲index.html並添加。

 

9.用下面的代碼替換掉HTML中的。

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.0.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

注意：若是你使用包管理器來安裝了SignalR，請覈對腳本目錄中的SignalR腳本文件名和上面HTML中代碼所引用的是否一致，好比下圖：

11.保存所有項。

運行示例

1.按下F5在調試模式下運行該項目，若是一切正常，HTML會在瀏覽器中打開並提示一個對話框。

2.輸入用戶名並肯定。

3.複製這個瀏覽器中的URL，打開一個新的瀏覽器實例，在另外一個瀏覽器中，輸入一個新用戶名。

4.在每一個瀏覽器實例中添加評論併發送，評論將被髮送到全部瀏覽器的頁面中。

注意：這個簡單的聊天室沒有在服務器上維護一個聊天上下文，全部發送的評論將實時廣播給打開了頁面的全部瀏覽器，因此新加入的用戶沒法看到之前的歷史記錄。

5.在解決方案資源管理器中，檢查正在運行的應用程序的腳本文件，你能夠看到SignalR庫動態生成的Hub腳本文件，該文件管理jQuery腳本和服務器代碼之間的通信。

回顧

SignalR聊天室程序演示了兩個基本的SignalR開發任務：在服務器端建立一個集線器做爲主要協調對象，並使用SignalR和jQuery來發送和接收評論。

SignalR集線器(Hub)

在代碼示例中的ChatHub類派生自Microsoft.AspNet.SignalR.Hub類。是最一般的創建SignalR應用程序的方法就是從Hub類派生。 你能夠建立你的集線器類的公共方法，而後從網頁中的腳本調用它們來訪問這些方法。

這本示例中，客戶端調用ChatHub.Send來發送新評論。反之，集線器經過調用Clients.All.broadcastMessage來將新評論發送至全部客戶端。

Send方法演示了使用集線器的概念：

  • 在集線器上創建公共方法，使客戶端能夠調用它們。
  • 使用使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性訪問鏈接到該集線器的全部客戶端。
  • 調用客戶端方法（好比broadcastMessage函數）來更新客戶端。

SignalR和jQuery

HTML頁面展現瞭如何使用SignalR jQuery庫與SignalR集線器通信，即定義了一個代理引用集線器，聲明一個函數可讓服務器推送內容到客戶端，而且開始實時鏈接以發送消息到集線器上。

下面的代碼定義了一個集線器代理的引用。

 var chat = $.connection.chatHub;

注意：在JS中引用服務器類及成員應當使用駝峯(camel)式拼寫法。該代碼示例使用chatHub引用了服務器端的ChatHub。

下面的代碼演示瞭如何建立一個回調函數，服務器上的集線器類調用這個函數來推送內容並更新到每一個客戶端。前兩行代碼表示將輸入的內容進行HTML編碼，做爲一個簡單的防止腳本注入的方法。

    chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

下面的代碼顯示瞭如何打開與集線器的鏈接。該代碼啓動鏈接，而後傳遞一個函數來處理HTML頁面上發送按鈕的點擊事件。

    $.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

注意：此方法可確保SignalR在事件句柄處理以前就創建好通信鏈接。

下一步

您已經瞭解到SignalR框架是如何構建起一個實時Web應用程序的，您還了解並演練了幾個開發任務：添加SignalR庫到Web應用程序中，建立一個集線器類及如何從集線器發送、接收消息。

要了解更多，請參閱如下鏈接：

 

做者：帕特里克·弗萊徹-帕特里克·弗萊徹是ASP.NET開發團隊的程序員，做家，目前正在SignalR項目工做。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程