2024年7月19日 星期五

Elasticsearch 系列 : 如何使用 C# / NEST 找到是否有匹配符合的 index 名稱

 

Elasticsearch 系列 : 如何使用 C# / NEST 找到是否有匹配符合的 index 名稱


在 Elasticsearch 中,index 是一個非常重要的概念,它是用來存儲相關數據的地方,而在 Elasticsearch 中,index 的名稱是唯一的,這意味著在 Elasticsearch 中,每一個 index 都有一個唯一的名稱。


然而,有時候我們需要在 Elasticsearch 中找到是否有匹配符合的 index 名稱,這時候,我們可以使用 C# / NEST 套件來達到這個目的。例如,若有一群 Index 名稱為 : myIndex2020, myIndex2021, myIndex2022, myIndex2023, myIndex2024 等等,這些 Index 將會儲存當年度的資料,此時,若想要針對所有 Index 名稱前面有 myIndex 的 Index 進行使用 DSL 查詢,就需要先找到這些 Index 名稱。


有了這些 Index 名稱之後,我們就可以使用 C# / NEST 套件來進行查詢。在這篇文章中,將會介紹如何使用 C# / NEST 套件,來找到是否有匹配符合的 index 名稱。

這裡的範例程式碼將會隨機產生10個索引檔案,然後再使用 C# / NEST 套件來找到是否有匹配符合的 index 名稱。


建立測試專案

請依照底下的操作,建立起這篇文章需要用到的練習專案

  • 打開 Visual Studio 2022 IDE 應用程式
  • 從 [Visual Studio 2022] 對話窗中,點選右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗右半部
    • 切換 [所有語言 (L)] 下拉選單控制項為 [C#]
    • 切換 [所有專案類型 (T)] 下拉選單控制項為 [主控台]
  • 在中間的專案範本清單中,找到並且點選 [主控台應用程式] 專案範本選項

    專案,用於建立可在 Windows、Linux 及 macOS 於 .NET 執行的命令列應用程式

  • 點選右下角的 [下一步] 按鈕
  • 在 [設定新的專案] 對話窗
  • 找到 [專案名稱] 欄位,輸入 csElasticsearchNestFindIndex 作為專案名稱
  • 在剛剛輸入的 [專案名稱] 欄位下方,確認沒有勾選 [將解決方案與專案至於相同目錄中] 這個檢查盒控制項
  • 點選右下角的 [下一步] 按鈕
  • 現在將會看到 [其他資訊] 對話窗
  • 在 [架構] 欄位中,請選擇最新的開發框架,這裡選擇的 [架構] 是 : .NET 8.0 (長期支援)
  • 在這個練習中,需要去勾選 [不要使用最上層陳述式(T)] 這個檢查盒控制項

    這裡的這個操作,可以由讀者自行決定是否要勾選這個檢查盒控制項

  • 請點選右下角的 [建立] 按鈕

稍微等候一下,這個主控台專案將會建立完成


安裝要用到的 NuGet 開發套件

因為開發此專案時會用到這些 NuGet 套件,請依照底下說明,將需要用到的 NuGet 套件安裝起來。


安裝 NEST 套件

對於這個 NuGet 套件 [NEST] 其可以提供一個 .NET 平台的 Elasticsearch 客戶端庫,它允許您從 .NET 應用程序與 Elasticsearch 集群進行通信和互動。該庫為 Elasticsearch 提供了一個強類型的、易於使用的 API,可以用於執行各種操作,如索引管理、文檔檢索、搜索、數據分析等。

請依照底下說明操作步驟,將這個套件安裝到專案內

  • 滑鼠右擊 [方案總管] 視窗內的 [專案節點] 下方的 [相依性] 節點
  • 從彈出功能表清單中,點選 [管理 NuGet 套件] 這個功能選項清單
  • 此時,將會看到 [NuGet: csElasticsearchCreate] 視窗
  • 切換此視窗的標籤頁次到名稱為 [瀏覽] 這個標籤頁次
  • 在左上方找到一個搜尋文字輸入盒,在此輸入 NEST
  • 在視窗右方,將會看到該套件詳細說明的內容,其中,右上方有的 [安裝] 按鈕
  • 點選這個 [安裝] 按鈕,將這個套件安裝到專案內

建立要使用的程式碼

  • 在 [方案總管] 內找到並且開啟 [Program.cs] 檔案這個節點
  • 使用底下 C# 程式碼,將原本的程式碼取代掉

using Nest;

namespace csElasticsearchNestFindIndex;

[ElasticsearchType(IdProperty = nameof(BlogId))]
public class Blog
{
    public int BlogId { get; set; }
    public string Title { get; set; } = string.Empty;
    public string Content { get; set; } = string.Empty;
    public DateTime CreateAt { get; set; } = DateTime.Now;
    public DateTime UpdateAt { get; set; } = DateTime.Now;
}

internal class Program
{
    static string IndexPrefix = "random-index";
    static async Task Main(string[] args)
    {
        var settings = new ConnectionSettings(new Uri("http://10.1.1.231:9200/"))
            .DisableDirectStreaming()
            //.OnRequestCompleted(response =>
            //{
            //    Console.WriteLine($"Request: {response.RequestBodyInBytes?.Length} bytes");
            //    Console.WriteLine($"Response: {response.ResponseBodyInBytes?.Length} bytes");
            //})
            .BasicAuthentication("elastic", "elastic");

        var client = new ElasticClient(settings);

        await MakeRandomIndex(client);
        await FindMatchIndex(client);
    }

    static async Task FindMatchIndex(IElasticClient client)
    {
        var indexNamesResponse = await client.Indices.GetAliasAsync();
        var indexNames = indexNamesResponse.Indices.Keys.ToList();
        var findIndex = indexNames
            .Where(x=>x.Name.Contains(IndexPrefix+"-"));
        foreach (var index in findIndex)
        {
            Console.WriteLine($"Found index : {index}");
        }
        await Console.Out.WriteLineAsync($"按下任一按鍵,將會開始刪除 {IndexPrefix}- 開頭的索引名稱");
        Console.ReadKey();
        foreach (var index in findIndex)
        {
            await client.Indices.DeleteAsync(index);
            Console.WriteLine($"Found index : {index}");
        }
    }

    static async Task MakeRandomIndex(IElasticClient client)
    {
        int totalIndex = 10;
        Random random = new Random();
        for (var i = 0; i < totalIndex; i++)
        {
            var indexName = $"{IndexPrefix}-{i}";

            var response = await client.IndexAsync<Blog>(new Blog()
            {
                BlogId = random.Next(),
                Title = $"Nice to meet your 999",
                Content = $"Hello Elasticsearch 999",
                CreateAt = DateTime.Now.AddDays(999),
                UpdateAt = DateTime.Now.AddDays(999),
            }, idx => idx.Index(indexName));
            if (response.IsValid)
            {
                //Console.WriteLine($"Index document with ID {response.Id} succeeded.");
            }
            else
            {
                Console.WriteLine($"Error Message : {response.DebugInformation}");
            }
        }

        Console.WriteLine($"Total indices ({totalIndex}) has beed created");
    }
}


首先,設計一個 Blog 類別,這個類別將會用來當作索引的資料模型


接下來就是要開始建立10個隨機索引名稱,這裡的索引名稱將會採用 "random-index" 作為前綴,然後再加上一個數字,這個數字將會是從 0 到 9 的隨機數字。這樣的需求將會設計到 [MakeRandomIndex] 方法內。而在 Program.cs 內,將會使用 await MakeRandomIndex(client); 方式來呼叫這個方法。


在這個 [MakeRandomIndex] 方法內,會建立一個可以循環執行10次的迴圈,每次會在具有該迴圈索引值的索引檔案名稱內,新增一筆文件,直到10個索引檔案都完全建立出來。


接下來就會使用 await FindMatchIndex(client); 方式來呼叫 [FindMatchIndex] 方法,這個方法將會用來找到是否有匹配符合的 index 名稱,並且將這些 index 名稱列出來。


在這個方法內會先使用 await client.Indices.GetAliasAsync(); 來取得所有的索引名稱,然後再使用 LINQ 查詢語法,來找到是否有匹配符合的 index 名稱,最後再將這些 index 名稱列出來。


執行程式


  • 按下 F5 鍵,開始執行這個程式
  • 程式將會開始執行,並且在主控台視窗內,將會看到類似下圖的輸出結果
Total indices (10) has beed created
Found index : random-index-0
Found index : random-index-3
Found index : random-index-2
Found index : random-index-7
Found index : random-index-1
Found index : random-index-9
Found index : random-index-6
Found index : random-index-8
Found index : random-index-5
Found index : random-index-4
按下任一按鍵,將會開始刪除 random-index- 開頭的索引名稱
Found index : random-index-0
Found index : random-index-3
Found index : random-index-2
Found index : random-index-7
Found index : random-index-1
Found index : random-index-9
Found index : random-index-6
Found index : random-index-8
Found index : random-index-5
Found index : random-index-4




2024年7月18日 星期四

.NET 8 Blazor 001 - 了解 SSR Static Server Render 運作模式

.NET 8 Blazor 001 - 了解 SSR Static Server Render 運作模式

在 2023 年底,微軟正式推出 .NET 8 平台,對於 Blazor 這個 UI 開發框架,有著許多重大變化,其中最為重要的就是關於 Render 渲染(或稱為 轉譯)模式的運作機制,在微軟官方的文件中,將會有這樣的定義 :

轉譯一詞意指產生瀏覽器所顯示的 HTML 標記。

在 Blazor 中,轉譯是指將組件樹狀結構轉換為 HTML 標記。在 .NET 8 之前的版本,將會提供這兩種轉譯模式:伺服器端轉譯和客戶端轉譯。用戶端轉譯 (CSR) 意指最終的 HTML 標記由用戶端上的 Blazor WebAssembly 執行階段產生。伺服器端轉譯 (SSR) 意指最終的 HTML 標記由伺服器上的 ASP.NET Core 執行階段所產生。

在 .NET 8 中,Blazor 支援了一種新的運作模式,這個新的運作模式稱為 SSR (Static Server Render) 靜態伺服器渲染模式,這個模式將會讓 Blazor 應用程式在伺服器端進行渲染,然後再將渲染結果傳送給客戶端,這樣可以讓 Blazor 應用程式在客戶端的效能得到提升。

這裡總結 .NET 8 Blazor 支援的轉譯

  • 靜態伺服器

    靜態伺服器端轉譯 Static Server-Side Render (SSR)

    轉譯位置:伺服器

  • 互動式伺服器

    使用 Blazor Server 的互動式伺服器端轉譯 Interactive server-side rendering (interactive SSR) 。

    轉譯位置:伺服器

  • 互動式 WebAssembly

    使用 Blazor WebAssembly 的用戶端轉譯 Interactive WebAssembly , Client-side rendering (CSR)。

    轉譯位置:Client

  • 互動式自動 Interactive Auto

    一開始使用 Blazor Server 進行互動式 SSR,然後在下載 Blazor 套件組合之後,於後續造訪時使用 CSR。

    轉譯位置:伺服器,然後用戶端

要如何充分應用與善用這樣的架構,將會是未來 Blazor 開發者需要思考的議題。因此,了解到各種轉譯模式的運作原理,將會有助於未來 Blazor 開發者在開發 Blazor 應用程式時,能夠更加靈活的運用這些技術。

在這篇文章中,將會介紹如何在 .NET 8 Blazor 應用程式中,使用 SSR 靜態伺服器渲染模式,這是一種採用讓 Blazor 應用程式在伺服器端進行渲染,然後再將渲染結果傳送給客戶端。

這一系列的文章,將會採用 Visual Studio 17.10.1 IDE 作為開發工具,並且使用 .NET 8 作為開發平台。

建立測試專案

請依照底下的操作,建立起這篇文章需要用到的練習專案

  • 打開 Visual Studio 2022 IDE 應用程式
  • 從 [Visual Studio 2022] 對話窗中,點選右下方的 [建立新的專案] 按鈕
  • 在 [建立新專案] 對話窗右半部
    • 切換 [所有語言 (L)] 下拉選單控制項為 [C#]
    • 切換 [所有專案類型 (T)] 下拉選單控制項為 [Web]
  • 在中間的專案範本清單中,找到並且點選 [Blazor Web App] 專案範本選項

    A project template for creating a Blazor Web app that support both server-side rending and client interactivity. This template can be used for web apps with rich dynamic user interfaces (UIs)

  • 點選右下角的 [下一步] 按鈕
  • 在 [設定新的專案] 對話窗
  • 找到 [專案名稱] 欄位,輸入 csBlazorSSR 作為專案名稱
  • 在剛剛輸入的 [專案名稱] 欄位下方,確認沒有勾選 [將解決方案與專案至於相同目錄中] 這個檢查盒控制項

  • 點選右下角的 [下一步] 按鈕
  • 現在將會看到 [其他資訊] 對話窗
  • 在 [架構] 欄位中,請選擇最新的開發框架,這裡選擇的 [架構] 是 : .NET 8.0 (長期支援)
  • 在 [驗證類型] 欄位中,請選擇 [無]
  • 勾選 [針對 HTTPS 進行設定] 檢查盒欄位
  • 在 [Interactive render mode] 欄位中,請選擇 [None]
  • 在 [Interactivity location] 欄位中,請選擇 [Per pages/component]
  • 勾選 [Include sample pages] 檢查盒欄位
  • 勾選 [Do not use top-level statements] 檢查盒欄位

    這裡的這個操作,可以由讀者自行決定是否要勾選這個檢查盒控制項

  • 不要勾選 [在 .NET Aspire 協調流程中登入] 檢查盒欄位

  • 請點選右下角的 [建立] 按鈕

稍微等候一下,這個 Blazor Web App 專案將會建立完成

Program.cs - Blazor 專案程式進入點

現在依序從程式進入點的 Program.cs 檔案中,了解到關於 Blazor SSR 的設定方式

在專案的根目錄下,找到 Program.cs 檔案,並且打開這個檔案,這個檔案的內容如下

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>();

app.Run();

對於 WebApplication.CreateBuilder 這個方法,將會回傳一個 WebApplicationBuilder 物件,這個物件將會用來設定應用程式的服務和中介軟體 (管線和路由)。

在上述程式碼中,使用了 builder.Services.AddRazorComponents(); 這個方法,這個方法將會將 Razor 元件 ( 副檔案名稱為 .razor ) 服務加入到容器中,這個服務將會用來支援 Razor 元件的渲染。

這個 builder.Build() 方法將會 Build 出一個 WebApplication 物件,這個物件將會用來設定應用程式的 HTTP 請求管線。

在最後第二行程式碼中,使用了 app.MapRazorComponents<App>(); 這個方法,這個方法將會將 App 元件 (App.razor) 指定為預設根元件 (載入的第一個元件)。

最後的 app.Run(); 方法將會啟動這個 Blazor 應用程式。此時,這個 Web 專案將會啟動起來。

App.razor - Blazor 應用程式的根元件

從 [Components] 資料夾內找到並且打開 [App.razor] 這個檔案,就會看到底下內容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="csBlazorSSR.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

從這個 [App.razor] 檔案中可以看出,這是一個相當簡單的 HTML5 的頁面,這個頁面中包含了一個 <head> 標籤和一個 <body> 標籤,這個頁面中還包含了一個 <Routes /> 元件,這個元件將會用來顯示路由的內容。而在 <head> 標籤中,還包含了一個 <HeadOutlet /> 元件,這個元件將會用來轉譯 PageTitle 和 HeadContent 元件提供的內容。

若執行這個專案之後,首先將會路由到 [Home] 頁面,現在可以查看該網頁的原始碼,可以得到底下的 <head> 區段的內容。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <base href="/">
  <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="csBlazorSSR.styles.css">
  <link rel="icon" type="image/png" href="favicon.png">
  <title>Home</title>
</head>

在這個操作例子中,可以看到 <HeadOutlet /> 元件,將會被替換成為 <title>Home</title>。而網頁的標題將會被設定為 [Home],如下圖

現在切換到 [Weather] 頁面,可以看到網頁的標題將會被設定為 [Weather Forecast],此時查看該頁面原始碼,就會看到原先的 <title>Home</title> 變成了 <title>Weather</title>,如下圖

這樣的設計方式,將會讓 Blazor 應用程式的開發者可以更加靈活的設定網頁的標題,這樣的設計方式將會讓 Blazor 應用程式的開發者可以更加靈活的設定網頁的標題。

而對於 <Routes /> ,這是一個 Blazor 的 Razor 元件,這個元件將會用來顯示路由的內容,這個元件將會根據瀏覽器的 URL 來決定要顯示的 Razor 元件。

Routes.razor - Blazor 路由元件

在 [Components] 資料夾內找到並且打開 [Routes.razor] 這個檔案,就會看到底下內容

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

<Router AppAssembly="typeof(Program).Assembly"> : Router 組件是 Blazor 中用來處理路由的組件。AppAssembly 屬性指定了應用程式的主要程式集,Blazor 會在這個程式集中尋找路由定義。typeof(Program).Assembly 表示應用程式的主程式集,即通常包含路由定義的程式集。

<Found Context="routeData"> : Found 是 Router 組件的子組件之一,用來處理找到匹配路由的情況。Context 屬性定義了一個變數物件(這裡是 routeData),這個變數會包含匹配路由的相關資料。

<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" /> : RouteView 是一個用來呈現匹配路由組件的組件。 RouteData:這個屬性將 Found 組件中的 routeData 傳遞給 RouteView,用來告訴 RouteView 應該呈現哪個組件。 DefaultLayout:指定一個預設的版面配置。這裡使用了 typeof(Layout.MainLayout),表示當匹配的組件沒有明確指定版面配置時,會使用 MainLayout 這個版面配置。

<FocusOnNavigate RouteData="routeData" Selector="h1" /> : FocusOnNavigate 是一個自定義的組件,用來在導航後設定焦點。 RouteData:同樣地,將 routeData 傳遞給 FocusOnNavigate,用來觸發導航事件。 Selector:指定一個 CSS 選擇器,FocusOnNavigate 會在導航後將焦點設定到符合這個選擇器的元素上。這裡的 h1 表示導航後會將焦點設定到第一個 <h1> 元素上。

這段程式碼定義了 Blazor 應用程式的路由邏輯。當使用者導航到一個 URL 時,Router 組件會在指定的程式集中尋找匹配的路由。如果找到匹配的路由,Found 組件會將 routeData 傳遞給 RouteView 和 FocusOnNavigateRouteView 負責呈現匹配的組件,並且應用指定的版面配置(如果匹配的組件沒有指定版面配置,則使用預設的 MainLayout)。FocusOnNavigate 則負責在導航後將焦點設定到指定的元素上,這裡是將焦點設定到第一個 <h1> 元素。

觀察 SSR 靜態伺服器渲染模式

現在再次執行這個專案,接著,開啟無痕視窗

按下 F12 按鍵,進入到開發人員模式,切換到 [Network] 標籤頁次,接著在網址列輸入 https://localhost:7193/,就會看到底下的畫面

然後按下 Enter 鍵之後,觀察 [Network] 標籤頁次,可以看到底下的畫面

在 [Network] 標籤頁次中,觀察到第一個請求是 https://localhost:7193/,這個請求是用來下載首頁的 HTML 內容,這與傳統的 ASP.NET Core MVC 或者 ASP.NET Core Razor Page 一樣,所有的 HTML 內容都是在後端伺服器中產生出來,透過 HTTP 通訊協定 Response 回應到瀏覽器用戶端上,接著,瀏覽器會將這些 HTML 渲染到瀏覽器畫面上。

現在,在瀏覽器畫面上,點選 [Weather] 頁面,觀察 [Network] 標籤頁次,可以看到底下的畫面

此時將會看到送出一個 GET https://localhost:7193/weather URL 請求,這個請求是用來下載 Weather 頁面的 HTML 內容,不過,這次所送出的類型並不是 [document] 而是 [fetch] ,這是 .NET 8 Blazor SSR 推出的新功能,這裡僅會取得 Weather 更新後的 HTML 內容,將這些內容渲染到瀏覽器網頁上,因此,無須重新全部載入所有網頁、css、javascrit 檔案,可以提升運行速度。