Tutorial - Menerbitkan dan berlangganan pesan menggunakan API WebSocket dan SDK layanan Azure Web PubSub

Artikel
03/13/2023

Layanan Azure Web PubSub membantu Anda dengan mudah membangun aplikasi olahpesan web real time. Dalam tutorial ini, Anda akan mempelajari cara berlangganan layanan menggunakan API WebSocket dan menerbitkan pesan menggunakan SDK layanan Web PubSub.

Dalam tutorial ini, Anda akan mempelajari cara:

Membuat instans layanan Web PubSub
Menghasilkan URL lengkap untuk membuat koneksi WebSocket
Membuat klien pelanggan Web PubSub untuk menerima pesan menggunakan protokol WebSocket standar
Membuat klien penerbit Web PubSub untuk menerbitkan pesan menggunakan SDK layanan Web PubSub

Prasyarat

Langganan Azure, buat akun gratis.
Shell perintah Bash. Gunakan shell lokal atau lingkungan Bash di Azure Cloud Shell.
Jika berjalan di komputer lokal Anda Instal Azure CLI.

Anda dapat menggunakan shell perintah Windows cmd.exe alih-alih shell Bash untuk menjalankan perintah dalam tutorial ini.

Jika membuat proyek di komputer lokal, Anda harus menginstal dependensi untuk bahasa yang Anda gunakan:

.NET Core

Penyiapan Azure CLI untuk pengembangan lokal

Ikuti langkah-langkah ini untuk menyiapkan Azure CLI dan lingkungan proyek Anda.

Buka shell perintah.
Tingkatkan ke versi terbaru Azure CLI.
```
az upgrade
```
Instal ekstensi Azure CLI untuk Web PubSub.
```
az extension add --name webpubsub
```
Masuk ke Azure CLI. Setelah perintah, masukkan kredensial Azure Anda.
```
az login
```

Buat grup sumber daya

Grup sumber daya adalah kontainer logis yang disebarkan dan dikelola oleh sumber daya Azure. Gunakan perintah az group create untuk membuat grup sumber daya bernama myResourceGroup di eastus lokasi.

az group create --name myResourceGroup --location EastUS

1. Membuat instans Azure Web PubSub

Membuat instans Web PubSub

Gunakan perintah az webpubsub create Azure CLI untuk membuat Web PubSub di grup sumber daya yang telah Anda buat. Perintah berikut membuat sumber daya Web PubSub Gratis di bawah grup myResourceGroup sumber daya di EastUS:

Setiap sumber daya Web PubSub harus memiliki nama yang unik. Ganti <nama> sumber daya unik Anda dengan nama instans Web PubSub Anda dalam perintah berikut.

az webpubsub create --resource-group myResourceGroup --name <your-unique-resource-name> --location EastUS --sku Free_F1

Keluaran dari perintah ini menunjukkan properti sumber daya yang baru dibuat. Perhatikan dua properti yang tercantum di bawah:

nama: Nama Web PubSub yang Anda berikan dalam parameter di --name atas.
hostName: Dalam contoh, nama host adalah <your-unique-resource-name>.webpubsub.azure.com/.

Pada titik ini, akun Azure Anda adalah satu-satunya yang berwenang untuk melakukan operasi apa pun di sumber daya baru ini.

Dapatkan string koneksi

Penting

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 berhati-hatilah untuk melindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman. 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.

Gunakan perintah Azure CLI az webpubsub key untuk mendapatkan ConnectionString layanan. <your-unique-resource-name> Ganti tempat penampung dengan nama instans Azure Web PubSub Anda.

az webpubsub key show --resource-group myResourceGroup --name <your-unique-resource-name> --query primaryConnectionString --output tsv

Salin string koneksi untuk digunakan nanti.

Membuat klien pelanggan

Klien akan terhubung ke layanan Azure Web PubSub melalui protokol WebSocket standar menggunakan autentikasi JSON Web Token (JWT). SDK layanan menyediakan metode pembantu untuk menghasilkan token. Dalam tutorial ini, pelanggan langsung menghasilkan token dari ConnectionString. Dalam aplikasi nyata, aplikasi sisi server biasanya menangani alur kerja autentikasi/otorisasi. Untuk lebih memahami alur kerja, lihat tutorial Membuat aplikasi obrolan.

Pertama, buat direktori proyek bernama subscriber untuk proyek ini dan instal dependensi yang diperlukan:
- Paket Websocket.Client adalah paket pihak ketiga yang mendukung koneksi WebSocket. Anda dapat menggunakan API/pustaka apa pun yang mendukung WebSocket.
- Paket SDK Azure.Messaging.WebPubSub membantu menghasilkan token JWT.
```
mkdir subscriber
cd subscriber
dotnet new console
dotnet add package Websocket.Client --version 4.3.30
dotnet add package Azure.Messaging.WebPubSub --version 1.0.0
```

Ganti kode dalam Program.cs dengan kode berikut yang akan tersambung ke layanan:

using System;
using System.Threading.Tasks;

using Azure.Messaging.WebPubSub;

using Websocket.Client;

namespace subscriber
{
    class Program
    {
        static async Task Main(string[] args)
        {
            if (args.Length != 2)
            {
                Console.WriteLine("Usage: subscriber <connectionString> <hub>");
                return;
            }
            var connectionString = args[0];
            var hub = args[1];

            // Either generate the URL or fetch it from server or fetch a temp one from the portal
            var serviceClient = new WebPubSubServiceClient(connectionString, hub);
            var url = serviceClient.GetClientAccessUri();

            using (var client = new WebsocketClient(url))
            {
                // Disable the auto disconnect and reconnect because the sample would like the client to stay online even no data comes in
                client.ReconnectTimeout = null;
                client.MessageReceived.Subscribe(msg => Console.WriteLine($"Message received: {msg}"));
                await client.Start();
                Console.WriteLine("Connected.");
                Console.Read();
            }
        }
    }
}

Kode membuat koneksi WebSocket yang tersambung ke hub di Web PubSub. Hub adalah unit logis di Web PubSub tempat Anda dapat menerbitkan pesan ke sekelompok klien. Konsep utama berisi penjelasan terperinci tentang istilah yang digunakan di Web PubSub.

Layanan Web PubSub menggunakan autentikasi JSON Web Token (JWT ). Kode sampel menggunakan WebPubSubServiceClient.GetClientAccessUri() di Web PubSub SDK untuk menghasilkan URL ke layanan yang berisi URL lengkap dengan token akses yang valid.

Setelah koneksi dibuat, klien Anda menerima pesan melalui koneksi WebSocket. Klien menggunakan client.MessageReceived.Subscribe(msg => ...)); untuk mendengarkan pesan masuk.

Untuk memulai pelanggan, jalankan perintah <Web-PubSub-connection-string> berikut mengganti dengan string koneksi yang Anda salin sebelumnya:
```
dotnet run <Web-PubSub-connection-string> "myHub1"
```

Pertama, buat direktori proyek bernama subscriber dan instal dependensi yang diperlukan:

mkdir subscriber
cd subscriber
npm init -y
npm install --save ws
npm install --save @azure/web-pubsub

Gunakan API WebSocket untuk menyambungkan ke layanan Web PubSub. Buat subscribe.js file dengan kode berikut:
```
const WebSocket = require('ws');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

async function main() {
  const hub = "pubsub";
  let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);
  let token = await service.getClientAccessToken();
  let ws = new WebSocket(token.url);
  ws.on('open', () => console.log('connected'));
  ws.on('message', data => console.log('Message received: %s', data));
}

main();
```
Kode membuat koneksi WebSocket yang tersambung ke hub di Web PubSub. Hub adalah unit logis di Web PubSub tempat Anda dapat menerbitkan pesan ke sekelompok klien. Konsep utama berisi penjelasan terperinci tentang istilah yang digunakan di Web PubSub.

Layanan Web PubSub menggunakan autentikasi JSON Web Token (JWT ). Kode sampel menggunakan WebPubSubServiceClient.GetClientAccessUri() di Web PubSub SDK untuk menghasilkan URL ke layanan yang berisi URL lengkap dengan token akses yang valid.

Setelah koneksi dibuat, klien Anda menerima pesan melalui koneksi WebSocket. Klien menggunakan client.MessageReceived.Subscribe(msg => ...)); untuk mendengarkan pesan masuk.
Jalankan perintah <Web-PubSub-connection-string> berikut mengganti dengan string koneksi yang Anda salin sebelumnya. Jika Anda menggunakan shell perintah Windows, Anda dapat menggunakan set alih-alih export.
```
export WebPubSubConnectionString=<Web-PubSub-connection-string>
node subscribe.js
```

Pertama, buat direktori proyek bernama subscriber dan instal dependensi yang diperlukan:

mkdir subscriber
cd subscriber
# Create venv
python -m venv env
# Activate venv
source ./env/bin/activate

pip install azure-messaging-webpubsubservice
pip install websockets

Gunakan API WebSocket untuk menyambungkan ke layanan Web PubSub. Buat subscribe.py file dengan kode berikut:

import asyncio
import sys
import websockets

from azure.messaging.webpubsubservice import WebPubSubServiceClient


async def connect(url):
    async with websockets.connect(url) as ws:
        print('connected')
        while True:
            print('Received message: ' + await ws.recv())

if __name__ == '__main__':

    if len(sys.argv) != 3:
        print('Usage: python subscribe.py <connection-string> <hub-name>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    token = service.get_client_access_token()

    try:
        asyncio.get_event_loop().run_until_complete(connect(token['url']))
    except KeyboardInterrupt:
        pass

Setelah koneksi dibuat, klien Anda akan menerima pesan melalui koneksi WebSocket. Gunakan await ws.recv() untuk mendengarkan pesan masuk.

Jalankan perintah <Web-PubSub-connection-string> berikut mengganti dengan string koneksi yang Anda salin sebelumnya:
```
python subscribe.py <Web-PubSub-connection-string> "myHub1"
```

Pertama, buat direktori proyek bernama pubsub untuk tutorial ini.
```
mkdir pubsub
cd pubsub
```

pubsub Di dalam direktori, gunakan Maven untuk membuat aplikasi konsol baru bernama webpubsub-quickstart-subscriber, lalu buka direktori webpubsub-quickstart-subscriber:

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-subscriber --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-quickstart-subscriber

Tambahkan WebSocket dan Azure Web PubSub SDK ke simpul dependencies di pom.xml:
- azure-messaging-webpubsub: SDK layanan Web PubSub untuk Java
- Java-WebSocket: SDK klien WebSocket untuk Java
```
<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>

<dependency>
    <groupId>org.java-websocket</groupId>
    <artifactId>Java-WebSocket</artifactId>
    <version>1.5.1</version>
</dependency>
```
Di Web PubSub, Anda dapat terhubung ke layanan dan berlangganan pesan melalui koneksi WebSocket. WebSocket adalah saluran komunikasi dupleks penuh yang memungkinkan layanan untuk mendorong pesan ke klien Anda secara real time. Anda dapat menggunakan API atau pustaka apa pun yang mendukung WebSocket. Untuk contoh ini, kita menggunakan paket Java-WebSocket.
Buka direktori /src/main/java/com/webpubsub/quickstart.

Edit ganti konten file App.java dengan kode berikut:

package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

import org.java_websocket.client.WebSocketClient;
import org.java_websocket.handshake.ServerHandshake;

import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;

/**
* Connect to Azure Web PubSub service using WebSocket protocol
*/
public class App 
{
    public static void main( String[] args ) throws IOException, URISyntaxException
    {
        if (args.length != 2) {
            System.out.println("Expecting 2 arguments: <connection-string> <hub-name>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();

        WebPubSubClientAccessToken token = service.getClientAccessToken(new GetClientAccessTokenOptions());

        WebSocketClient webSocketClient = new WebSocketClient(new URI(token.getUrl())) {
            @Override
            public void onMessage(String message) {
                System.out.println(String.format("Message received: %s", message));
            }

            @Override
            public void onClose(int arg0, String arg1, boolean arg2) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onError(Exception arg0) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onOpen(ServerHandshake arg0) {
                // TODO Auto-generated method stub
            }

        };

        webSocketClient.connect();
        System.in.read();
    }
}

Kode ini membuat koneksi WebSocket yang tersambung ke hub di Azure Web PubSub. Hub adalah unit logis di Azure Web PubSub tempat Anda dapat menerbitkan pesan ke sekelompok klien. Konsep utama berisi penjelasan mendetail tentang istilah yang digunakan di Azure Web PubSub.

Setelah koneksi dibuat, klien Anda akan menerima pesan melalui koneksi WebSocket. Gunakan onMessage(String message) untuk mendengarkan pesan masuk.

Untuk memulai aplikasi pelanggan, buka direktori webpubsub-quickstart-subscriber dan jalankan perintah berikut. Ganti <Web-PubSub-connection-string> dengan string koneksi yang Anda salin sebelumnya.
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="<Web-PubSub-connection-string> 'myHub1'"
```

2. Menerbitkan pesan menggunakan SDK layanan

Buat penerbit menggunakan Azure Web PubSub SDK untuk menerbitkan pesan ke klien yang tersambung. Untuk proyek ini, Anda harus membuka shell perintah lain.

Pertama, buat direktori proyek bernama publisher dan instal dependensi yang diperlukan:

mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub

Perbarui file Program.cs untuk menggunakan kelas WebPubSubServiceClient dan kirim pesan ke klien.

using System;
using System.Threading.Tasks;
using Azure.Messaging.WebPubSub;

namespace publisher
{
    class Program
    {
        static async Task Main(string[] args)
        {
            if (args.Length != 3) {
                Console.WriteLine("Usage: publisher <connectionString> <hub> <message>");
                return;
            }
            var connectionString = args[0];
            var hub = args[1];
            var message = args[2];

            // Either generate the token or fetch it from server or fetch a temp one from the portal
            var serviceClient = new WebPubSubServiceClient(connectionString, hub);
            await serviceClient.SendToAllAsync(message);
        }
    }
}

Panggilan SendToAllAsync() hanya mengirim pesan ke semua klien yang tersambung di hub.

Kirim pesan dengan menjalankan perintah berikut. Ganti <Web-PubSub-connection-string> dengan string koneksi yang Anda salin sebelumnya.
```
dotnet run <Web-PubSub-connection-string> "myHub1" "Hello World"
```
Periksa shell perintah pelanggan untuk melihat bahwa ia menerima pesan:
```
Message received: Hello World
```

Pertama, buat direktori proyek bernama publisher dan instal dependensi yang diperlukan:
```
mkdir publisher
cd publisher
npm init -y
npm install --save @azure/web-pubsub
```

Gunakan Azure Web PubSub SDK untuk menerbitkan pesan ke layanan. Buat file publish.js dengan kode di bawah ini:

const { WebPubSubServiceClient } = require('@azure/web-pubsub');

const hub = "pubsub";
let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);

// by default it uses `application/json`, specify contentType as `text/plain` if you want plain-text
service.sendToAll(process.argv[2], { contentType: "text/plain" });

Panggilan service.sendToAll() hanya mengirim pesan ke semua klien yang tersambung di hub.

Untuk mengirim pesan, jalankan perintah <Web-PubSub-connection-string> berikut mengganti dengan string koneksi yang Anda salin sebelumnya. Jika Anda menggunakan shell perintah Windows, Anda dapat menggunakan set alih-alih export.
```
export WebPubSubConnectionString=<Web-PubSub-connection-string>
node publish "Hello World"
```
Anda dapat melihat bahwa pelanggan menerima pesan:
```
Message received: Hello World
```

Pertama, buat direktori proyek bernama publisher dan instal dependensi yang diperlukan:

mkdir publisher
cd publisher
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate

pip install azure-messaging-webpubsubservice

Gunakan Azure Web PubSub SDK untuk menerbitkan pesan ke layanan. Buat file publish.py dengan kode di bawah ini:

import sys
from azure.messaging.webpubsubservice import WebPubSubServiceClient

if __name__ == '__main__':

    if len(sys.argv) != 4:
        print('Usage: python publish.py <connection-string> <hub-name> <message>')
        exit(1)

    connection_string = sys.argv[1]
    hub_name = sys.argv[2]
    message = sys.argv[3]

    service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
    res = service.send_to_all(message, content_type='text/plain')
    print(res)

send_to_all() mengirim pesan ke semua klien yang terhubung di hub.

Untuk mengirim pesan, jalankan perintah <Web-PubSub-connection-string> berikut mengganti dengan string koneksi yang Anda salin sebelumnya.
```
python publish.py <Web-PubSub-connection-string> "myHub1" "Hello World"
```
Periksa shell perintah sebelumnya ke bahwa pelanggan menerima pesan:
```
Received message: Hello World
```

pubsub Buka direktori. Gunakan Maven untuk membuat aplikasi webpubsub-quickstart-publisher konsol penerbit dan buka direktori webpubsub-quickstart-publisher :

mvn archetype:generate --define interactiveMode=n --define groupId=com.webpubsub.quickstart --define artifactId=webpubsub-quickstart-publisher --define archetypeArtifactId=maven-archetype-quickstart --define archetypeVersion=1.4
cd webpubsub-quickstart-publisher

Tambahkan dependensi Azure Web PubSub SDK ke dalam simpul dependenciespom.xml:

<dependency>
    <groupId>com.azure</groupId>
    <artifactId>azure-messaging-webpubsub</artifactId>
    <version>1.0.0</version>
</dependency>

Gunakan Azure Web PubSub SDK untuk menerbitkan pesan ke layanan. Buka direktori /src/main/java/com/webpubsub/quickstart, buka file App.java di editor Anda, dan ganti konten dengan kode berikut:


package com.webpubsub.quickstart;

import com.azure.messaging.webpubsub.*;
import com.azure.messaging.webpubsub.models.*;

/**
* Publish messages using Azure Web PubSub service SDK
*
*/
public class App 
{
    public static void main( String[] args )
    {
        if (args.length != 3) {
            System.out.println("Expecting 3 arguments: <connection-string> <hub-name> <message>");
            return;
        }

        WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
            .connectionString(args[0])
            .hub(args[1])
            .buildClient();
        service.sendToAll(args[2], WebPubSubContentType.TEXT_PLAIN);
    }
}

Panggilan sendToAll() mengirim pesan ke semua klien yang terhubung di hub.

Untuk mengirim pesan, buka direktori webpubsub-quickstart-publisher dan jalankan proyek menggunakan perintah berikut. <Web-PubSub-connection-string> Ganti dengan string koneksi yang Anda salin sebelumnya.
```
mvn compile & mvn package & mvn exec:java -Dexec.mainClass="com.webpubsub.quickstart.App" -Dexec.cleanupDaemonThreads=false -Dexec.args="<Web-PubSub-connection-string> 'myHub1' 'Hello World'"
```
Anda dapat melihat bahwa pelanggan menerima pesan:
```
Message received: Hello World
```

Pembersihan

Anda dapat menghapus sumber daya yang Anda buat dalam mulai cepat ini dengan menghapus grup sumber daya yang berisi sumber daya tersebut.

az group delete --name myResourceGroup --yes

Jika Anda tidak berencana untuk terus menggunakan Azure Cloud Shell, Anda dapat menghindari akumulasi biaya dengan menghapus grup sumber daya yang berisi akun penyimpanan terkait. Grup sumber daya diberi nama cloud-shell-storage-<your-region>. Jalankan perintah berikut, ganti <CloudShellResourceGroup> dengan nama grup Cloud Shell.

az group delete --name <CloudShellResourceGroup> --yes

Perhatian

Menghapus grup sumber daya akan menghapus semua sumber daya, termasuk sumber daya yang dibuat di luar cakupan tutorial ini.

Langkah berikutnya

Tutorial ini memberi Anda ide dasar tentang cara menyambungkan ke layanan Web PubSub dan menerbitkan pesan ke klien yang terhubung.

Periksa tutorial lain untuk mempelajari lebih lanjut cara menggunakan layanan.

Tutorial: Membuat ruang obrolan dengan Azure Web PubSub

Jelajahi sampel Azure Web PubSub lainnya

Tutorial: Menerbitkan dan berlangganan pesan menggunakan API WebSocket dan SDK layanan Azure Web PubSub