ASP.NET Core SignalR 入門教程

原創 zhoubangbang1 2020-06-26 17:01

本教程介紹使用 SignalR 生成實時應用的基礎知識。 您將學習：
1.    創建 Web 項目。
2.    添加 SignalR 客戶端庫。
3.    創建 SignalR 中心。
4.    配置項目以使用 SignalR。
5.    添加可將消息從任何客戶端發送到所有連接客戶端的代碼。
最後，你將擁有一個工作聊天應用：

創建 Web 項目

1.從菜單中選擇“文件”>“新建項目” 。

2.在“新建項目”對話框中，選擇“已安裝”>“Visual C#”>“Web”>“ASP.NET Core Web 應用” 。 將項目命名爲“SignalRChat” 。

 

3．選擇“Web 應用”，以創建使用 Razor Pages 的項目 。

4. 選擇“.NET Core”目標框架，選擇“ASP.NET Core 2.1”，然後單擊“確定” 。

添加 SignalR 客戶端庫

Microsoft.AspNetCore.App 元包中包括 SignalR 服務器庫。 JavaScript 客戶端庫不會自動包含在項目中。 對於此教程，使用庫管理器 (LibMan) 從 unpkg 獲取客戶端庫。 unpkg 是一個內容分發網絡 (CDN)，可以分發在 npm（即 Node.js 包管理器）中找到的任何內容。

  1. 在“解決方案資源管理器” 中，右鍵單擊項目，然後選擇“添加” >“客戶端庫” 。

2.    在“添加客戶端庫” 對話框中，對於“提供程序” ，選擇“unpkg” 。
3.    對於“庫” ，輸入 @aspnet/signalr@1，然後選擇不是預覽版的最新版本。
4.    選擇“選擇特定文件” ，展開“dist/browser” 文件夾，然後選擇“signalr.js” 和“signalr.min.js” 。
5.    將“目標位置” 設置爲 wwwroot/lib/signalr/ ，然後選擇“安裝” 。

創建 SignalR 中心
中心是一個類，用作處理客戶端 - 服務器通信的高級管道。
?    在 SignalRChat 項目文件夾中，創建 Hubs 文件夾 。
?    在 Hubs 文件夾中，使用以下代碼創建 ChatHub.cs 文件 ：
ChatHub 類繼承自 SignalR Hub。 Hub 類管理連接、組和消息。
可通過已連接客戶端調用 SendMessage，以向所有客戶端發送消息。 本教程後面部分將顯示調用該方法的 JavaScript 客戶端代碼。 SignalR 代碼是異步模式，可提供最大的可伸縮性。
 

namespace SignalRChatTest.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

配置 SignalR
必須將 SignalR 服務器配置爲將 SignalR 請求傳遞給 SignalR。
 1. 將以下突出顯示的代碼添加到 Startup.cs 文件 
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChatTest.Hubs;

namespace SignalRChatTest
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseSignalR(routes =>
            {
                routes.MapHub<ChatHub>("/chatHub");
            });
            app.UseMvc();
        }
    }
}

添加 SignalR 客戶端代碼

@*@page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="~/images/banner1.svg" alt="ASP.NET" class="img-responsive" />
                <div class="carousel-caption" role="option">
                    <p>
                        Learn how to build ASP.NET apps that can run anywhere.
                        <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409">
                            Learn More
                        </a>
                    </p>
                </div>
            </div>
            <div class="item">
                <img src="~/images/banner2.svg" alt="Visual Studio" class="img-responsive" />
                <div class="carousel-caption" role="option">
                    <p>
                        There are powerful new features in Visual Studio for building modern web apps.
                        <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409">
                            Learn More
                        </a>
                    </p>
                </div>
            </div>
            <div class="item">
                <img src="~/images/banner3.svg" alt="Microsoft Azure" class="img-responsive" />
                <div class="carousel-caption" role="option">
                    <p>
                        Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.
                        <a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409">
                            Learn More
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="row">
        <div class="col-md-3">
            <h2>Application uses</h2>
            <ul>
                <li>Sample pages using ASP.NET Core Razor Pages</li>
                <li>Theming using <a href="https://go.microsoft.com/fwlink/?LinkID=398939">Bootstrap</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>How to</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?linkid=852130">Working with Razor Pages.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699315">Manage User Secrets using Secret Manager.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699316">Use logging to log a message.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699317">Add packages using NuGet.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699319">Target development, staging or production environment.</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>Overview</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=518008">Conceptual overview of what is ASP.NET Core</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=699320">Fundamentals of ASP.NET Core such as Startup and middleware.</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=398602">Working with Data</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkId=398603">Security</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699321">Client side development</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699322">Develop on different platforms</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=699323">Read more on the documentation site</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h2>Run &amp; Deploy</h2>
            <ul>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=517851">Run your app</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=517853">Run tools such as EF migrations and more</a></li>
                <li><a href="https://go.microsoft.com/fwlink/?LinkID=398609">Publish to Microsoft Azure App Service</a></li>
            </ul>
        </div>
    </div>*@
@page
<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            User..........<input type="text" id="userInput" />
            <br />
            Message...<input type="text" id="messageInput" />
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

在 wwwroot/js 文件夾中，使用以下代碼創建 chat.js 文件 ：

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

運行應用

1.從地址欄複製 URL，打開另一個瀏覽器實例或選項卡，並在地址欄中粘貼該 URL。

2.選擇任一瀏覽器，輸入名稱和消息，然後選擇“發送消息”按鈕 。

3.兩個頁面上立即顯示名稱和消息

請關注我的微信公衆號，我們一起進步：

  1.  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Swagger的 ASP.NET Core Web API 幫助頁

使用 Web API 時，瞭解其各種方法對開發人員來說可能是一項挑戰。 Swagger 也稱爲OpenAPI，解決了爲 Web API 生成有用文檔和幫助頁的問題。 它具有諸如交互式文檔、客戶端 SDK 生成和 API 可發現性等優點。

zhoubangbang1 2020-06-26 17:01:31

使用 ASP.NET Core 創建 Web API系列

使用 ASP.NET Core 創建 Web API 此次主要介紹使用 ASP.NET Core 構建 Web API 的基礎知識。 在本教程中，你將瞭解： 創建 Web API 項目。 添加模型類和數據庫上下文。 使用 CRUD 方法構

zhoubangbang1 2020-06-26 17:01:31

ASP.NET Core 基礎知識之 Startup 類配置

Startup 類配置服務和應用的請求管道。   ASP.NET Core 應用使用 Startup 類，按照約定命名爲 Startup。 Startup 類： 1.可選擇性地包括 ConfigureServices 方法以配置應用的服務

zhoubangbang1 2020-06-26 17:01:31

ASP.NET Core SignalR系列之Hub教程

zhoubangbang1 2020-02-22 19:09:54

Swagger的 ASP.NET Core Web API 幫助頁

使用 Web API 時，瞭解其各種方法對開發人員來說可能是一項挑戰。 Swagger 也稱爲OpenAPI，解決了爲 Web API 生成有用文檔和幫助頁的問題。 它具有諸如交互式文檔、客戶端 SDK 生成和 API 可發現性等優點。

zhoubangbang1 2020-06-26 17:01:31

使用 ASP.NET Core 創建 Web API系列

使用 ASP.NET Core 創建 Web API 此次主要介紹使用 ASP.NET Core 構建 Web API 的基礎知識。 在本教程中，你將瞭解： 創建 Web API 項目。 添加模型類和數據庫上下文。 使用 CRUD 方法構

zhoubangbang1 2020-06-26 17:01:31

ASP.NET Core 基礎知識之 Startup 類配置

Startup 類配置服務和應用的請求管道。   ASP.NET Core 應用使用 Startup 類，按照約定命名爲 Startup。 Startup 類： 1.可選擇性地包括 ConfigureServices 方法以配置應用的服務

zhoubangbang1 2020-06-26 17:01:31

ASP.NET Core SignalR系列之Hub教程

zhoubangbang1 2020-02-22 19:09:54