Tutorial: Membuat aplikasi notifikasi tanpa server dengan Azure Functions dan layanan Azure Web PubSub

Artikel
01/12/2024

Layanan Azure Web PubSub membantu Anda membangun aplikasi web Olahpesan real time menggunakan WebSocket. Azure Functions adalah platform tanpa server yang memungkinkan Anda menjalankan kode Anda tanpa mengelola infrastruktur apa pun. Dalam tutorial ini, Anda mempelajari cara menggunakan layanan Azure Web PubSub dan Azure Functions untuk membangun aplikasi tanpa server dengan Olahpesan real time di pada skenario pemberitahuan.

Dalam tutorial ini, Anda akan mempelajari cara:

Membangun aplikasi pemberitahuan tanpa server
Menangani input fungsi Web PubSub dan pengikatan output
Menjalankan fungsi sampel secara lokal
Menyebarkan fungsi ke Aplikasi Azure Function

Prasyarat

Editor kode seperti Visual Studio Code
Node.js, versi 18.x atau lebih tinggi.

Catatan

Untuk informasi selengkapnya tentang versi aplikasi yang Node.js, lihat Dokumentasi versi runtime Azure Functions.
Azure Functions Core Tools (V4 atau lebih disukai) untuk menjalankan aplikasi Azure Function secara lokal dan menyebarkan ke Azure.
Azure CLI untuk mengelola sumber daya Azure.

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Masuk ke portal Microsoft Azure di https://portal.azure.com/ dengan akun Azure Anda.

Membuat instans layanan Azure Web PubSub

Aplikasi Anda akan terhubung ke instans layanan Web PubSub di Azure.

Pilih tombol Baru yang ditemukan di sudut kiri atas portal Microsoft Azure. Di layar Baru, ketik Web PubSub di kotak pencarian dan tekan enter. (Anda juga dapat mencari Azure Web PubSub dari kategori Web.)
Pilih Web PubSub dari hasil pencarian, lalu pilih Buat.

Masukkan pengaturan berikut.

Pengaturan	Nilai yang disarankan	Deskripsi
Nama sumber daya	Nama unik secara global	Nama unik global yang mengidentifikasi instans layanan Web PubSub baru Anda. Karakter yang valid adalah `a-z`, `A-Z`, `0-9`, dan `-`.
Langganan	Langganan Anda	Langganan Azure tempat instans layanan Web PubSub baru ini dibuat.
Grup Sumber Daya	myResourceGroup	Nama untuk grup sumber daya baru untuk membuat instans layanan Web PubSub Anda.
Location	US Barat	Pilih wilayah di dekat Anda.
Tingkat harga	Gratis	Anda dapat mencoba layanan Azure Web PubSub secara gratis terlebih dahulu. Pelajari lebih lanjut tingkat harga layanan Azure Web PubSub
Jumlah unit	-	Jumlah unit menentukan berapa banyak koneksi yang dapat diterima instans layanan Web PubSub Anda. Setiap unit mendukung paling banyak 1.000 koneksi bersamaan. Ini hanya dapat dikonfigurasi dalam tingkat Standar.

Screenshot of creating the Azure Web PubSub instance in portal.

Pilih Buat untuk mulai menyebarkan instans layanan Web PubSub.

Membuat dan menjalankan fungsi secara lokal

Pastikan Anda telah menginstal Azure Functions Core Tools. Sekarang, buat direktori kosong untuk proyek. Jalankan perintah di dalam direktori kerja ini. Gunakan salah satu opsi yang diberikan di bawah ini.
```
func init --worker-runtime javascript --model V4
```
```
func init --worker-runtime javascript --model V3
```
```
func init --worker-runtime dotnet
```
```
func init --worker-runtime dotnet-isolated
```
```
func init --worker-runtime python --model V1
```
Ikuti langkah-langkah untuk menginstal Microsoft.Azure.WebJobs.Extensions.WebPubSub.
Konfirmasi atau perbarui host.jsonekstensiBundle ke versi 4.* atau yang lebih baru untuk mendapatkan dukungan Web PubSub. Untuk memperbarui host.json, buka file di editor, lalu ganti ekstensi versi yang adaBundle ke versi 4.* atau yang lebih baru.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[4.*, 5.0.0)"
    }
}
```
Konfirmasi atau perbarui host.jsonekstensiBundle ke versi 3.3.0 atau yang lebih baru untuk mendapatkan dukungan Web PubSub. Untuk memperbarui host.json, buka file di editor, lalu ganti ekstensi versi yang adaBundle ke versi 3.3.0 atau yang lebih baru.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```
```
dotnet add package Microsoft.Azure.WebJobs.Extensions.WebPubSub
```
```
dotnet add package Microsoft.Azure.Functions.Worker.Extensions.WebPubSub --prerelease
```
Perbarui host.jsonextensionBundle ke versi 3.3.0 atau yang lebih baru untuk mendapatkan dukungan Web PubSub. Untuk memperbarui host.json, buka file di editor, lalu ganti ekstensi versi yang adaBundle ke versi 3.3.0 atau yang lebih baru.
```
{
    "extensionBundle": {
        "id": "Microsoft.Azure.Functions.ExtensionBundle",
        "version": "[3.3.*, 4.0.0)"
    }
}
```

Buat fungsi index untuk membaca dan menghosting halaman web statis untuk klien.

func new -n index -t HttpTrigger

Perbarui src/functions/index.js dan salin kode berikut.

const { app } = require('@azure/functions');
const { readFile } = require('fs/promises');

app.http('index', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    handler: async (context) => {
        const content = await readFile('index.html', 'utf8', (err, data) => {
            if (err) {
                context.err(err)
                return
            }
        });

        return { 
            status: 200,
            headers: { 
                'Content-Type': 'text/html'
            }, 
            body: content, 
        };
    }
});

Perbarui index/function.json dan salin kode json berikut.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Perbarui index/index.js dan salin kode berikut.

var fs = require('fs');
var path = require('path');

module.exports = function (context, req) {
    var index = context.executionContext.functionDirectory + '/../index.html';
    context.log("index.html path: " + index);
    fs.readFile(index, 'utf8', function (err, data) {
        if (err) {
            console.log(err);
            context.done(err);
        }
        context.res = {
            status: 200,
            headers: {
                'Content-Type': 'text/html'
            },
            body: data
        };
        context.done();
    });
}

Perbarui index.cs dan ganti fungsi Run dengan kode berikut.

[FunctionName("index")]
public static IActionResult Run([HttpTrigger(AuthorizationLevel.Anonymous)] HttpRequest req, ExecutionContext context, ILogger log)
{
    var indexFile = Path.Combine(context.FunctionAppDirectory, "index.html");
    log.LogInformation($"index.html path: {indexFile}.");
    return new ContentResult
    {
        Content = File.ReadAllText(indexFile),
        ContentType = "text/html",
    };
}

Perbarui index.cs dan ganti fungsi Run dengan kode berikut.

[Function("index")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req, FunctionContext context)
{
    var path = Path.Combine(context.FunctionDefinition.PathToAssembly, "../index.html");
    _logger.LogInformation($"index.html path: {path}.");

    var response = req.CreateResponse();
    response.WriteString(File.ReadAllText(path));
    response.Headers.Add("Content-Type", "text/html");
    return response;
}

Perbarui index/function.json dan salin kode json berikut.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get",
        "post"
      ]
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    }
  ]
}

Perbarui index/__init__.py dan salin kode berikut.

import os

import azure.functions as func

def main(req: func.HttpRequest) -> func.HttpResponse:
    f = open(os.path.dirname(os.path.realpath(__file__)) + '/../index.html')
    return func.HttpResponse(f.read(), mimetype='text/html')

Buat fungsi negotiate untuk membantu klien mendapatkan url koneksi layanan dengan token akses.

func new -n negotiate -t HttpTrigger

Perbarui src/functions/negotiate.js dan salin kode berikut.

const { app, input } = require('@azure/functions');

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    hub: 'notification'
});

app.http('negotiate', {
    methods: ['GET', 'POST'],
    authLevel: 'anonymous',
    extraInputs: [connection],
    handler: async (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get('connection')) };
    },
});

Perbarui negotiate/function.json dan salin kode json berikut.

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

Buat folder negosiasi dan perbarui negotiate/index.js serta salin kode berikut.

module.exports = function (context, req, connection) {
    context.res = { body: connection };
    context.done();
};

Perbarui negotiate.cs dan ganti fungsi Run dengan kode berikut.

[FunctionName("negotiate")]
public static WebPubSubConnection Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    [WebPubSubConnection(Hub = "notification")] WebPubSubConnection connection,
    ILogger log)
{
    log.LogInformation("Connecting...");

    return connection;
}

Tambahkan using pernyataan di header untuk mengatasi dependensi yang diperlukan.
```
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
```

Perbarui negotiate.cs dan ganti fungsi Run dengan kode berikut.

[Function("negotiate")]
public HttpResponseData Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req,
    [WebPubSubConnectionInput(Hub = "notification")] WebPubSubConnection connectionInfo)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    response.WriteAsJsonAsync(connectionInfo);
    return response;
}

Buat folder negosiasi dan perbarui negotiate/function.json dan salin kode json berikut.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "notification",
      "direction": "in"
    }
  ]
}

Perbarui negotiate/__init__.py dan salin kode berikut.

import logging

import azure.functions as func


def main(req: func.HttpRequest, connection) -> func.HttpResponse:
    return func.HttpResponse(connection)

Buat fungsi notification untuk menghasilkan pemberitahuan dengan TimerTrigger.

func new -n notification -t TimerTrigger

Perbarui src/functions/notification.js dan salin kode berikut.

const { app, output } = require('@azure/functions');

const wpsAction = output.generic({
    type: 'webPubSub',
    name: 'action',
    hub: 'notification'
});

app.timer('notification', {
    schedule: "*/10 * * * * *",
    extraOutputs: [wpsAction],
    handler: (myTimer, context) => {
        context.extraOutputs.set(wpsAction, {
            actionName: 'sendToAll',
            data: `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
            dataType: 'text',
        });
    },
});

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

Perbarui notification/function.json dan salin kode json berikut.

{
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

Perbarui notification/index.js dan salin kode berikut.

module.exports = function (context, myTimer) {
    context.bindings.actions = {
        "actionName": "sendToAll",
        "data": `[DateTime: ${new Date()}] Temperature: ${getValue(22, 1)}\xB0C, Humidity: ${getValue(40, 2)}%`,
        "dataType": "text"
    }
    context.done();
};

function getValue(baseNum, floatNum) {
    return (baseNum + 2 * floatNum * (Math.random() - 0.5)).toFixed(3);
}

Perbarui notification.cs dan ganti fungsi Run dengan kode berikut.

[FunctionName("notification")]
public static async Task Run([TimerTrigger("*/10 * * * * *")]TimerInfo myTimer, ILogger log,
    [WebPubSub(Hub = "notification")] IAsyncCollector<WebPubSubAction> actions)
{
    await actions.AddAsync(new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    });
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

Tambahkan using pernyataan di header untuk mengatasi dependensi yang diperlukan.

using System.Threading.Tasks;
using Microsoft.Azure.WebJobs.Extensions.WebPubSub;
using Microsoft.Azure.WebPubSub.Common;

Perbarui notification.cs dan ganti fungsi Run dengan kode berikut.

[Function("notification")]
[WebPubSubOutput(Hub = "notification")]
public SendToAllAction Run([TimerTrigger("*/10 * * * * *")] MyInfo myTimer)
{
    return new SendToAllAction
    {
        Data = BinaryData.FromString($"[DateTime: {DateTime.Now}] Temperature: {GetValue(23, 1)}{'\xB0'}C, Humidity: {GetValue(40, 2)}%"),
        DataType = WebPubSubDataType.Text
    };
}

private static string GetValue(double baseNum, double floatNum)
{
    var rng = new Random();
    var value = baseNum + floatNum * 2 * (rng.NextDouble() - 0.5);
    return value.ToString("0.000");
}

Buat pemberitahuan folder dan perbarui notification/function.json dan salin kode json berikut.

{
  "scriptFile": "__init__.py",
  "bindings": [
    {
      "name": "myTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "*/10 * * * * *"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "notification",
      "direction": "out"
    }
  ]
}

Perbarui notification/__init__.py dan salin kode berikut.

import datetime
import random
import json

import azure.functions as func

def main(myTimer: func.TimerRequest, actions: func.Out[str]) -> None:
    time = datetime.datetime.now().strftime("%A %d-%b-%Y %H:%M:%S")
    actions.set(json.dumps({
        'actionName': 'sendToAll',
        'data': '\x5B DateTime: {0} \x5D Temperature: {1:.3f} \xB0C, Humidity: {2:.3f} \x25'.format(time, 22 + 2 * (random.random() - 0.5), 44 + 4 * (random.random() - 0.5)),
        'dataType': 'text'
    }))

Tambahkan halaman index.html tunggal klien di folder akar proyek dan salin konten.

<html>
    <body>
    <h1>Azure Web PubSub Notification</h1>
    <div id="messages"></div>
    <script>
        (async function () {
            let messages = document.querySelector('#messages');
            let res = await fetch(`${window.location.origin}/api/negotiate`);
            let url = await res.json();
            let ws = new WebSocket(url.url);
            ws.onopen = () => console.log('connected');

            ws.onmessage = event => {
                let m = document.createElement('p');
                m.innerText = event.data;
                messages.appendChild(m);
            };
        })();
    </script>
    </body>
</html>

Karena proyek C# mengkompilasi file ke folder output yang berbeda, Anda perlu memperbarui Anda *.csproj untuk membuat halaman konten sesuai dengannya.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Karena proyek C# mengkompilasi file ke folder output yang berbeda, Anda perlu memperbarui Anda *.csproj untuk membuat halaman konten sesuai dengannya.

<ItemGroup>
    <None Update="index.html">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>

Mengonfigurasi dan menjalankan aplikasi Fungsi Azure
- Di browser, buka portal Microsoft Azure dan konfirmasikan instans Layanan Web PubSub yang Anda sebarkan sebelumnya berhasil dibuat. Narigasikan ke instans.
- Pilih Kunci dan salin string koneksi.
Jalankan perintah di folder fungsi untuk mengatur layanan string koneksi. Ganti <connection-string> dengan nilai Anda sesuai kebutuhan.
```
func settings add WebPubSubConnectionString "<connection-string>"
```
Catatan

TimerTrigger yang digunakan dalam sampel memiliki dependensi pada Azure Storage, tetapi Anda dapat menggunakan emulator penyimpanan lokal saat Fungsi berjalan secara lokal. Jika Anda mendapatkan beberapa kesalahan seperti There was an error performing a read operation on the Blob Storage Secret Repository. Please ensure the 'AzureWebJobsStorage' connection string is valid., Anda harus mengunduh dan mengaktifkan Storage Emulator.

Sekarang Anda dapat menjalankan fungsi lokal Berdasarkan perintah.
```
func start --port 7071
```
Dan memeriksa log yang berjalan, Anda dapat mengunjungi laman statis host lokal dengan mengunjungi: http://localhost:7071/api/index.

Catatan

Beberapa penjelajah secara otomatis mengalihkan ke https yang mengarah ke url yang salah. Sarankan untuk menggunakan Edge dan memeriksa kembali url jika penyajian tidak berhasil.

Menyebarkan aplikasi fungsi ke Azure

Sebelum dapat menyebarkan kode fungsi ke Azure, Anda perlu membuat tiga sumber daya:

Grup sumber daya, yang merupakan kontainer logis untuk sumber daya terkait.
Akun penyimpanan, yang digunakan untuk mempertahankan status dan informasi lain tentang fungsi Anda.
Aplikasi fungsi, menyediakan lingkungan untuk menjalankan kode fungsi Anda. Aplikasi fungsi memetakan ke proyek fungsi lokal Anda dan memungkinkan Anda mengelompokkan fungsi sebagai unit logis untuk pengelolaan, penyebaran, dan berbagi sumber daya yang lebih mudah.

Gunakan perintah berikut untuk membuat item ini.

Masuk ke Azure:
```
az login
```
Buat grup sumber daya atau Anda dapat melompati dengan menggunakan kembali salah satu layanan Azure Web PubSub:
```
az group create -n WebPubSubFunction -l <REGION>
```

Buat akun penyimpanan tujuan umum di grup sumber daya dan wilayah Anda:

az storage account create -n <STORAGE_NAME> -l <REGION> -g WebPubSubFunction

Buat aplikasi fungsi di Azure:

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Catatan

Periksa dokumentasi versi runtime Azure Functions untuk mengatur --runtime-version parameter ke nilai yang didukung.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime node --runtime-version 18 --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

Catatan

Periksa dokumentasi versi runtime Azure Functions untuk mengatur --runtime-version parameter ke nilai yang didukung.

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime dotnet-isolated --functions-version 4 --name <FUNCIONAPP_NAME> --storage-account <STORAGE_NAME>

az functionapp create --resource-group WebPubSubFunction --consumption-plan-location <REGION> --runtime python --runtime-version 3.9 --functions-version 4 --name <FUNCIONAPP_NAME> --os-type linux --storage-account <STORAGE_NAME>

Menyebarkan proyek fungsi ke Azure:

Setelah membuat aplikasi fungsi di Azure, Anda sekarang siap untuk menyebarkan proyek fungsi lokal dengan menggunakan perintah terbitkan func azure functionapp.
```
func azure functionapp publish <FUNCIONAPP_NAME> --publish-local-settings
```
Catatan

Di sini kita menyebarkan pengaturan lokal local.settings.json bersama dengan parameter perintah --publish-local-settings. Jika Anda menggunakan Microsoft Azure Storage Emulator, Anda dapat mengetikkan no untuk melewati penimpaan nilai ini di Azure dengan mengikuti pesan permintaan: App setting AzureWebJobsStorage is different between azure and local.settings.json, Would you like to overwrite value in azure? [yes/no/show]. Selain itu, Anda dapat memperbarui pengaturan Aplikasi Fungsi di Portal Microsoft Azure ->Pengaturan ->Configuration.
Sekarang Anda dapat memeriksa situs Anda dari Azure Function App dengan membuka URL: https://<FUNCIONAPP_NAME>.azurewebsites.net/api/index.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, hapus semua sumber daya yang dibuat oleh dokumen ini dengan langkah-langkah berikut agar Anda tidak dikenakan biaya apa pun:

Di portal Azure, pilih Grup sumber daya di paling kiri, lalu pilih grup sumber daya yang Anda buat. Gunakan kotak pencarian untuk menemukan grup sumber daya berdasarkan namanya.
Di jendela yang terbuka, pilih grup sumber daya, lalu pilih Hapus grup sumber daya.
Di jendela baru, ketik nama grup sumber daya untuk dihapus, lalu pilih Hapus.

Langkah berikutnya

Dalam mulai cepat ini, Anda mempelajari cara menjalankan aplikasi obrolan tanpa server. Sekarang, Anda bisa mulai membangun aplikasi Anda sendiri.

Tutorial: Membuat ruang obrolan sederhana dengan Azure Web PubSub

Pengikatan Azure Web PubSub untuk Azure Functions

Jelajahi sampel Azure Web PubSub lainnya