Model permintaan/respons HTTP yang akrab dirancang agar mudah dikerjakan dan dapat diskalakan. Namun, saat ini pengguna akhir menuntut lebih banyak dari web daripada yang awalnya dirancang untuk. Protokol HTTP mengharuskan pengguna untuk memulai permintaan untuk menerima respons. Tetapi pengembang membutuhkan cara untuk mengirim data dari server ke klien tanpa mereka memintanya; dengan kata lain, mereka perlu "mendorong" data ke klien, seperti mendorong harga penawaran terbaru produk di situs lelang atau harga saham yang bergerak cepat dalam aplikasi keuangan.
Panduan mulai cepat ini menunjukkan cara
berlangganan pesan dari server aplikasi
mendorong data dari server aplikasi ke semua klien yang terhubung
Untuk berlangganan pesan yang didorong dari server aplikasi Anda, klien, baik itu browser, aplikasi seluler, atau perangkat IoT, perlu terhubung ke sumber daya Web PubSub Anda terlebih dahulu, dan mendengarkan peristiwa pesan yang sesuai.
Membuat direktori proyek bernama subscriber dan menginstal dependensi yang diperlukan
mkdir subscriber
cd subscriber
npm init -y
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client
Sambungkan ke sumber daya Web PubSub Anda dan daftarkan pendengar untuk acara tersebut server-message
Klien menggunakan URL Akses Klien untuk menyambungkan dan mengautentikasi dengan sumber daya Anda.
URL ini mengikuti pola wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Klien dapat memiliki beberapa cara untuk mendapatkan URL Akses Klien. Untuk mulai cepat ini, Anda dapat menyalin dan menempelkannya dari portal Azure diperlihatkan dalam diagram berikut. Praktik terbaik adalah tidak mengodekan URL Akses Klien dalam kode Anda. Di dunia produksi, kami biasanya menyiapkan server aplikasi untuk mengembalikan URL ini sesuai permintaan.
Hasilkan URL Akses Klien menjelaskan praktik secara rinci.
Seperti yang ditunjukkan pada diagram di atas, klien bergabung dengan hub bernama myHub1.
subscriber Di folder proyek, buat file bernama subscribe.js dengan kode berikut
const { WebPubSubClient } = require("@azure/web-pubsub-client");
// Instantiates the client object
// <client-access-url> is copied from Azure portal mentioned above
const client = new WebPubSubClient("<client-access-url>")
// Registers a handler for the "server-message" event
client.on("server-message", (e) => {
console.log(`Received message ${e.message.data}`)
});
// Before a client can receive a message,
// you must invoke start() on the client object.
client.start();
Jalankan program
node subscribe.js
Sekarang klien ini membuat koneksi dengan sumber daya Web PubSub Anda dan siap untuk menerima pesan yang didorong dari server aplikasi Anda.
Membuat direktori proyek bernama subscriber dan menginstal dependensi yang diperlukan
mkdir subscriber
cd subscriber
# Create a .net console app
dotnet new console
# Add the client SDK
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease
Sambungkan ke sumber daya Web PubSub Anda dan daftarkan pendengar untuk acara tersebut ServerMessageReceived
Klien menggunakan URL Akses Klien untuk menyambungkan dan mengautentikasi dengan sumber daya Anda.
URL ini mengikuti pola wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Klien dapat memiliki beberapa cara untuk mendapatkan URL Akses Klien. Untuk mulai cepat ini, Anda dapat menyalin dan menempelkannya dari portal Azure diperlihatkan dalam diagram berikut. Praktik terbaik adalah tidak mengodekan URL Akses Klien dalam kode Anda. Di dunia produksi, kami biasanya menyiapkan server aplikasi untuk mengembalikan URL ini sesuai permintaan.
Hasilkan URL Akses Klien menjelaskan praktik secara rinci.
Seperti yang ditunjukkan pada diagram di atas, klien bergabung dengan hub bernama myHub1.
Ganti kode dalam Program.cs dengan kode berikut
using Azure.Messaging.WebPubSub.Clients;
// Instantiates the client object
// <client-access-uri> is copied from Azure portal mentioned above
var client = new WebPubSubClient(new Uri("<client-access-uri>"));
client.ServerMessageReceived += eventArgs =>
{
Console.WriteLine($"Receive message: {eventArgs.Message.Data}");
return Task.CompletedTask;
};
client.Connected += eventArgs =>
{
Console.WriteLine("Connected");
return Task.CompletedTask;
};
await client.StartAsync();
// This keeps the subscriber active until the user closes the stream by pressing Ctrl+C
var streaming = Console.ReadLine();
while (streaming != null)
{
if (!string.IsNullOrEmpty(streaming))
{
await client.SendToGroupAsync("stream", BinaryData.FromString(streaming + Environment.NewLine), WebPubSubDataType.Text);
}
streaming = Console.ReadLine();
}
await client.StopAsync();
Jalankan perintah berikut
dotnet run
Sekarang klien ini membuat koneksi dengan sumber daya Web PubSub Anda dan siap untuk menerima pesan yang didorong dari server aplikasi Anda.
Buat direktori proyek bernama subscriber dan instal dependensi yang diperlukan:
Gunakan API WebSocket untuk menyambungkan ke sumber daya Web PubSub Anda. 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
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 akan menerima pesan melalui koneksi WebSocket. Gunakan await ws.recv() untuk mendengarkan pesan masuk.
Jalankan perintah berikut
python subscribe.py $connection_string "myHub1"
Membuat direktori proyek bernama pubsub
mkdir pubsub
cd pubsub
Gunakan Maven untuk membuat aplikasi konsol baru yang disebut webpubsub-quickstart-subscriber;
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.
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 akan menerima pesan melalui koneksi WebSocket. Gunakan onMessage(String message) untuk mendengarkan pesan masuk.
Sekarang setelah klien menghubungkan sumber daya Web PubSub, Anda dapat mendorong pesan dari server aplikasi kapan saja menggunakan SDK server yang disediakan oleh Web PubSub.
Membuat direktori proyek baru bernama publisher dan menginstal dependensi yang diperlukan
mkdir publisher
cd publisher
npm init
# This command installs the server SDK from NPM,
# which is different from the client SDK you used in subscribe.js
npm install --save @azure/web-pubsub
Buat publish.js file dengan kode berikut
const { WebPubSubServiceClient } = require('@azure/web-pubsub');
// This is the hub name we used on Azure portal when generating the Client Access URL.
// It ensures this server can push messages to clients in the hub named "myHub1".
const hub = "myHub1";
let server = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);
// By default, the content type is `application/json`.
// Specify contentType as `text/plain` for this demo.
server.sendToAll(process.argv[2], { contentType: "text/plain" });
Panggilan server.sendToAll() mengirim pesan ke semua klien yang terhubung di hub.
Dapatkan string koneksi
Penting
String koneksi menyertakan informasi otorisasi yang diperlukan aplikasi Anda untuk mengakses layanan Web PubSub. Kunci akses di dalam string koneksi mirip dengan kata sandi root untuk layanan Anda.
Untuk panduan mulai cepat ini, kita akan mendapatkannya dari portal Azure seperti yang ditunjukkan di bawah ini.
Jalankan program server
Jalankan perintah berikut di shell perintah baru .
# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>"
node publish.js "Hello World"
Amati pesan yang diterima di sisi klien
Coba jalankan program "berlangganan" yang sama di beberapa shell perintah untuk merangsang lebih dari klien. Segera setelah program "terbitkan" dijalankan, Anda akan melihat pesan dikirimkan secara real time kepada semua klien ini.
Buat direktori proyek bernama publisher dan instal dependensi yang diperlukan:
mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub
Program.cs Ganti file dengan kode berikut
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() mengirim pesan ke semua klien yang terhubung di hub.
Jalankan program server untuk mendorong pesan ke semua klien yang tersambung
$connection_string="<connection-string>"
dotnet run $connection_string "myHub1" "Hello World"
Amati pesan yang diterima di sisi klien
# On the command shell used for running the "subscribe" program, you should see the received the messaged logged there.
# Try running the same "subscribe" program in multiple command shells, which simluates more than clients.
# Try running the "publish" program several times and you see messages being delivered in real-time to all these clients.
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.
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 :
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.
Buka direktori webpubsub-quickstart-publisher dan jalankan proyek menggunakan perintah berikut:
Anda dapat melihat bahwa pelanggan sebelumnya menerima pesan:
Message received: Hello World
Ringkasan
Mulai cepat ini menunjukkan betapa mudahnya mendorong pesan dari server aplikasi ke semua klien yang terhubung di hub. Selain itu, Web PubSub memungkinkan Anda untuk mendorong pesan ke
subset klien di hub
grup tertentu di hub
subset klien dalam grup
API ini memungkinkan banyak kasus penggunaan, memungkinkan pengembang untuk fokus pada logika bisnis yang unik sambil yakin bahwa Web PubSub menawarkan latensi rendah (<100ms),ketersediaan tinggi dan skala besar (juta+ koneksi bersamaan).
Langkah berikutnya
Pada langkah berikutnya, kita akan mengeksplorasi cara bekerja dengan sistem peristiwa Web PubSub, yang diperlukan untuk membangun aplikasi web yang lengkap.
