Tutorial: Membuat aplikasi obrolan real time tanpa server dengan layanan Azure Functions dan Azure Web PubSub

Layanan Azure Web PubSub membantu Anda membangun aplikasi web olahpesan real time menggunakan WebSocket dan pola terbitkan-berlangganan dengan mudah. 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 dan pola terbitkan-berlangganan.

Dalam tutorial ini, Anda akan mempelajari cara:

Membangun aplikasi obrolan real time tanpa server
Bekerja dengan pengikatan pemicu fungsi dan pengikatan output Web PubSub
Menyebarkan fungsi ke Aplikasi Azure Function
Mengonfigurasi Autentikasi Azure
Mengonfigurasi Web PubSub Event Handler untuk merutekan peristiwa dan pesan ke aplikasi

Penting

String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi.

String koneksi menyertakan informasi otorisasi yang diperlukan agar aplikasi Anda mengakses layanan Azure Web PubSub. Kunci akses di dalam string koneksi mirip dengan kata sandi root untuk layanan Anda. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.

Hindari mendistribusikan kunci akses ke pengguna lain, melakukan hard-coding, atau menyimpannya di mana saja dalam teks biasa yang dapat diakses orang lain. Putar kunci Anda jika Anda yakin bahwa kunci tersebut mungkin telah disusupi.

Prasyarat

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

Catatan

Untuk informasi selengkapnya tentang versi Node.js yang didukung, 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 akun Azure, buat akun gratis 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	KelompokSumberDayaSaya	Nama untuk grup sumber daya baru untuk membuat instans layanan Web PubSub Anda.
Tempat	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.

Cuplikan layar pembuatan instans Azure Web PubSub di portal.

Pilih Buat untuk mulai menyebarkan instans layanan Web PubSub.

Membuat fungsi

Pastikan Anda telah menginstal Azure Functions Core Tools. Dan kemudian buat direktori kosong untuk proyek. Jalankan perintah di dalam direktori kerja 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
```

Pasang Microsoft.Azure.WebJobs.Extensions.WebPubSub.

Konfirmasi dan perbarui host.jsonekstensiBundle ke versi 4.* atau yang lebih baru untuk mendapatkan dukungan Web PubSub.

{
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
  }
}

Konfirmasi dan perbarui host.jsonekstensiBundle ke versi 3.3.0 atau yang lebih baru untuk mendapatkan dukungan Web PubSub.

{
  "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

{
  "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.

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

Perbarui __init__.py dan ganti fungsi main dengan 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

Catatan

Dalam sampel ini, kami menggunakan header identitas pengguna Microsoft Entra ID untuk mengambil x-ms-client-principal-name. Dan hal ini tidak akan berfungsi dalam fungsi lokal. Anda dapat membuatnya kosong atau beralih ke cara lain untuk mendapatkan atau menghasilkan userId saat melakukan pemutaran secara lokal. Misalnya, biarkan klien mengetikkan nama pengguna dan meneruskannya dalam kueri seperti ?user={$username} saat fungsi panggilan negotiate untuk mendapatkan url koneksi layanan. Dan dalam fungsi negotiate, tetapkan userId dengan nilai {query.user}.

Perbarui src/functions/negotiate dan salin kode berikut.

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

const connection = input.generic({
    type: 'webPubSubConnection',
    name: 'connection',
    userId: '{headers.x-ms-client-principal-name}',
    hub: 'simplechat'
});

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": "simplechat",
      "userId": "{headers.x-ms-client-principal-name}",
      "direction": "in"
    }
  ]
}

Perbarui negotiate/index.js dan 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 = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] 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 = "simplechat", UserId = "{headers.x-ms-client-principal-name}")] WebPubSubConnection connectionInfo)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    response.WriteAsJsonAsync(connectionInfo);
    return response;
}

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

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "$return"
    },
    {
      "type": "webPubSubConnection",
      "name": "connection",
      "hub": "simplechat",
      "userId": "{headers.x-ms-client-principal-name}",
      "direction": "in"
    }
  ]
}

Perbarui negotiate/__init__.py dan salin kode berikut.

import azure.functions as func


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

Buat fungsi message untuk menyiarkan pesan klien melalui layanan.

func new -n message -t HttpTrigger

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

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

const wpsMsg = output.generic({
    type: 'webPubSub',
    name: 'actions',
    hub: 'simplechat',
});

const wpsTrigger = trigger.generic({
    type: 'webPubSubTrigger',
    name: 'request',
    hub: 'simplechat',
    eventName: 'message',
    eventType: 'user'
});

app.generic('message', {
    trigger: wpsTrigger,
    extraOutputs: [wpsMsg],
    handler: async (request, context) => {
        context.extraOutputs.set(wpsMsg, [{
            "actionName": "sendToAll",
            "data": `[${context.triggerMetadata.connectionContext.userId}] ${request.data}`,
            "dataType": request.dataType
        }]);

        return {
            data: "[SYSTEM] ack.",
            dataType: "text",
        };
    }
});

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

{
  "bindings": [
    {
      "type": "webPubSubTrigger",
      "direction": "in",
      "name": "data",
      "hub": "simplechat",
      "eventName": "message",
      "eventType": "user"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "simplechat",
      "direction": "out"
    }
  ]
}

Perbarui message/index.js dan salin kode berikut.

module.exports = async function (context, data) {
  context.bindings.actions = {
    actionName: "sendToAll",
    data: `[${context.bindingData.request.connectionContext.userId}] ${data}`,
    dataType: context.bindingData.dataType,
  };
  // UserEventResponse directly return to caller
  var response = {
    data: "[SYSTEM] ack.",
    dataType: "text",
  };
  return response;
};

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

[FunctionName("message")]
public static async Task<UserEventResponse> Run(
    [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request,
    BinaryData data,
    WebPubSubDataType dataType,
    [WebPubSub(Hub = "simplechat")] IAsyncCollector<WebPubSubAction> actions)
{
    await actions.AddAsync(WebPubSubAction.CreateSendToAllAction(
        BinaryData.FromString($"[{request.ConnectionContext.UserId}] {data.ToString()}"),
        dataType));
    return new UserEventResponse
    {
        Data = BinaryData.FromString("[SYSTEM] ack"),
        DataType = WebPubSubDataType.Text
    };
}

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 message.cs dan ganti fungsi Run dengan kode berikut.

[Function("message")]
[WebPubSubOutput(Hub = "simplechat")]
public SendToAllAction Run(
    [WebPubSubTrigger("simplechat", WebPubSubEventType.User, "message")] UserEventRequest request)
{
    return new SendToAllAction
    {
        Data = BinaryData.FromString($"[{request.ConnectionContext.UserId}] {request.Data.ToString()}"),
        DataType = request.DataType
    };
}

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

{
  "bindings": [
    {
      "type": "webPubSubTrigger",
      "direction": "in",
      "name": "request",
      "hub": "simplechat",
      "eventName": "message",
      "eventType": "user"
    },
    {
      "type": "webPubSub",
      "name": "actions",
      "hub": "simplechat",
      "direction": "out"
    }
  ]
}

Perbarui message/__init__.py dan salin kode berikut.

import json

import azure.functions as func


def main(request, actions: func.Out[str]) -> None:
    req_json = json.loads(request)
    actions.set(
        json.dumps(
            {
                "actionName": "sendToAll",
                "data": f'[{req_json["connectionContext"]["userId"]}] {req_json["data"]}',
                "dataType": req_json["dataType"],
            }
        )
    )

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

<html>
  <body>
    <h1>Azure Web PubSub Serverless Chat App</h1>
    <div id="login"></div>
    <p></p>
    <input id="message" placeholder="Type to chat..." />
    <div id="messages"></div>
    <script>
      (async function () {
        let authenticated = window.location.href.includes(
          "?authenticated=true"
        );
        if (!authenticated) {
          // auth
          let login = document.querySelector("#login");
          let link = document.createElement("a");
          link.href = `${window.location.origin}/.auth/login/aad?post_login_redirect_url=/api/index?authenticated=true`;
          link.text = "login";
          login.appendChild(link);
        } else {
          // negotiate
          let messages = document.querySelector("#messages");
          let res = await fetch(`${window.location.origin}/api/negotiate`, {
            credentials: "include",
          });
          let url = await res.json();
          // connect
          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);
          };
          let message = document.querySelector("#message");
          message.addEventListener("keypress", (e) => {
            if (e.charCode !== 13) return;
            ws.send(message.value);
            message.value = "";
          });
        }
      })();
    </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>

Membuat dan Menyebarkan Aplikasi Fungsi 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.

Jika Anda belum melakukannya, masuk ke Azure:
```
az login
```
Buat grup sumber daya atau Anda dapat melewatkannya dengan menggunakan kembali salah satu grup sumber daya dari 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 berhasil membuat aplikasi fungsi di Azure, Anda sekarang siap untuk menyebarkan proyek fungsi lokal anda dengan menggunakan perintah penerbitan func azure functionapp.
```
func azure functionapp publish <FUNCIONAPP_NAME>
```
Konfigurasi WebPubSubConnectionString untuk aplikasi fungsi:

String koneksi mentah muncul dalam artikel ini hanya untuk tujuan demonstrasi. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan koneksi Anda dengan WebPubSubServiceClient.

Pertama, temukan sumber daya Web PubSub Anda dari portal Microsoft Azure dan salin string koneksi di bawah Kunci. Kemudian, navigasikan ke pengaturan Aplikasi Fungsi di portal Microsoft Azure ->Pengaturan ->Variabel lingkungan. Dan tambahkan item baru di bawah Pengaturan aplikasi, dengan nama yang sama WebPubSubConnectionString dan nilainya adalah string koneksi sumber daya Web PubSub Anda.

Mengonfigurasi layanan Web PubSub `Event Handler`

Dalam contoh ini, kami menggunakan WebPubSubTrigger untuk mendengarkan permintaan upstream layanan. Jadi, Web PubSub perlu mengetahui informasi titik akhir fungsi untuk mengirim permintaan klien target. Dan Aplikasi Fungsi Azure memerlukan kunci sistem untuk keamanan terkait dengan metode webhook yang khusus untuk ekstensi. Pada langkah sebelumnya setelah menyebarkan Function App dengan fungsi message, kita bisa mendapatkan kunci sistem.

Buka portal Azure -> Temukan sumber daya Aplikasi Fungsi Anda ->Kunci aplikasi ->Kunci sistem ->webpubsub_extension. Salin nilainya sebagai <APP_KEY>.

Cuplikan layar kunci sistem fungsi get.

Atur Event Handler di layanan Azure Web PubSub. Buka portal Azure -> Temukan sumber daya Web PubSub Anda ->Pengaturan. Tambahkan pemetaan pengaturan hub baru ke satu fungsi yang digunakan. Ganti <FUNCTIONAPP_NAME> dan <APP_KEY> dengan milik Anda.

Nama Hub: simplechat
Templat URL: https://<FUNCTIONAPP_NAME>.azurewebsites.net/runtime/webhooks/webpubsub?code=<APP_KEY>
Pola Kejadian Pengguna: *
Kejadian Sistem: -(Tidak perlu dikonfigurasi dalam sampel ini)

Cuplikan layar pengaturan handler peristiwa.

Mengonfigurasi untuk mengaktifkan autentikasi klien

Buka portal Azure -> Temukan sumber daya Aplikasi Fungsi Anda ->Autentikasi. Klik Add identity provider. Atur pengaturan autentikasi App Service ke Izinkan akses yang tidak diautentikasi, sehingga halaman indeks klien Anda dapat dikunjungi oleh pengguna anonim sebelum dialihkan untuk mengautentikasi. Kemudian Simpan.

Di sini kita memilih Microsoft sebagai penyedia identifikasi, yang menggunakan x-ms-client-principal-name seperti userId dalam negotiate fungsi. Selain itu, Anda dapat mengonfigurasi penyedia identitas lain dengan mengikuti tautan, dan jangan lupa memperbarui nilai userId dalam fungsi negotiate yang sesuai.

Coba aplikasi

Sekarang Anda dapat menguji halaman Anda dari aplikasi fungsi Anda: https://<FUNCTIONAPP_NAME>.azurewebsites.net/api/index. Lihat rekam jepret.

Klik login untuk mengautentikasi diri Anda sendiri.
Ketikkan pesan dalam kotak input untuk mengobrol.

Dalam fungsi pesan, kami menyiarkan pesan penelepon ke semua klien dan mengembalikan pemanggil dengan pesan [SYSTEM] ack. Jadi kita dapat mengetahui dalam sampel rekam jepret obrolan, empat pesan pertama berasal dari klien saat ini dan dua pesan terakhir berasal dari klien lain.

Cuplikan layar sampel obrolan.

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. Atau Anda dapat menggunakan 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 panduan singkat ini, Anda mempelajari cara menjalankan aplikasi obrolan tanpa server. Sekarang, Anda bisa mulai membangun aplikasi Anda sendiri.

Pengikatan Azure Web PubSub untuk Azure Functions

Mulai cepat: Membuat ruang obrolan sederhana dengan Azure Web PubSub

Jelajahi sampel Azure Web PubSub lainnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-06-23

Tutorial: Membuat aplikasi obrolan real time tanpa server dengan layanan Azure Functions dan Azure Web PubSub

Prasyarat

Masuk ke Azure

Membuat instans layanan Azure Web PubSub

Membuat fungsi

Membuat dan Menyebarkan Aplikasi Fungsi Azure

Mengonfigurasi layanan Web PubSub Event Handler

Mengonfigurasi untuk mengaktifkan autentikasi klien

Coba aplikasi

Membersihkan sumber daya

Langkah berikutnya

Saran dan Komentar

Sumber Daya Tambahan:

Mengonfigurasi layanan Web PubSub `Event Handler`