Blazor Server でSlackへ通知する

SlackのWebhook機能を使い、Blazor Serverに Slackワークスペースのチャネルへ投稿する処理を実装した。
※インターネット接続可能なアプリなら何でも、WebhookからSlack通知することが出来る。
ソースコードはGitHubで公開しています。

Slack Webhook のURL取得から、そのURLを使った実装、通知までの流れ。

Webhookについて

・SlackのWebhook詳細については Incoming Webhook の設定を参照下さい。

ソースコード構成

ソースコード変更内容を解説

Util/Slack.cs

・Slack投稿用の処理を纏めた共通部品を追加。
・jsonデータを Http Post でSlackへ送り、Slackの該当チャネルへ投稿している。


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;

namespace WebApplication1.Util
{
    public class Payload
    {
        public string channel { get; set; }
        public string username { get; set; }
        public string text { get; set; }
        public string icon_emoji { get; set; }
        public string icon_url { get; set; }
    }

    public static class Slack
    {
        public static void PostExec(string value)
        {
            var payload = new Payload
            {
                channel = "#検証",
                username = "TestApp1",
                icon_emoji = ":star:",
                text = value,
            };

            var json = JsonSerializer.Serialize(payload);

            var client = new HttpClient();
            var content = new StringContent(json, Encoding.UTF8, "application/json");
            var res = client.PostAsync("Webhook URL", content).Result;
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http;

using System.Text;

using System.Text.Json;

using System.Threading.Tasks;

namespace WebApplication1.Util

{

public class Payload

{

public string channel { get; set; }

public string username { get; set; }

public string text { get; set; }

public string icon_emoji { get; set; }

public string icon_url { get; set; }

}

public static class Slack

{

public static void PostExec(string value)

{

var payload = new Payload

{

channel = "#検証",

username = "TestApp1",

icon_emoji = ":star:",

text = value,

};

var json = JsonSerializer.Serialize(payload);

var client = new HttpClient();

var content = new StringContent(json, Encoding.UTF8, "application/json");

var res = client.PostAsync("Webhook URL", content).Result;

}

Pages/Counter.razor

・currentCount変数の値をSlackへ投稿する処理を追加。


@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;

        Slack.PostExec(currentCount.ToString());
    }
}

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

private int currentCount = 0;

private void IncrementCount()

{

currentCount++;

Slack.PostExec(currentCount.ToString());

}

_Imports.razor

・共通部品の参照を追加。


@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using WebApplication1
@using WebApplication1.Shared
@using WebApplication1.Util

@using System.Net.Http

@using Microsoft.AspNetCore.Authorization

@using Microsoft.AspNetCore.Components.Authorization

@using Microsoft.AspNetCore.Components.Forms

@using Microsoft.AspNetCore.Components.Routing

@using Microsoft.AspNetCore.Components.Web

@using Microsoft.AspNetCore.Components.Web.Virtualization

@using Microsoft.JSInterop

@using WebApplication1

@using WebApplication1.Shared

@using WebApplication1.Util

Visual Studio プロジェクト

今回使った Visual Studio プロジェクトテンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。