Tutorial: Erstellen einer Chat-App mit dem Azure Web PubSub-Dienst
Artikel
Im Tutorial Veröffentlichen und Abonnieren von Nachrichten lernen Sie die Grundlagen des Veröffentlichen und Abonnieren von Nachrichten mit Azure Web PubSub. In diesem Tutorial lernen Sie das Ereignissystem von Azure Web PubSub kennen und verwenden es, um eine vollständige Webanwendung mit Echtzeit-Kommunikationsfunktionen zu erstellen.
In diesem Tutorial lernen Sie Folgendes:
Erstellen einer Web PubSub-Dienstinstanz
Konfigurieren von Ereignishandlereinstellungen für Azure Web PubSub
Hanlde-Ereignisse auf dem App-Server und Erstellen einer Echtzeit-Chat-App
Wenn Sie CLI-Referenzbefehle lieber lokal ausführen, installieren Sie die Azure CLI. Wenn Sie Windows oder macOS ausführen, sollten Sie die Azure CLI in einem Docker-Container ausführen. Weitere Informationen finden Sie unter Ausführen der Azure CLI in einem Docker-Container.
Wenn Sie eine lokale Installation verwenden, melden Sie sich mithilfe des Befehls az login bei der Azure CLI an. Führen Sie die in Ihrem Terminal angezeigten Schritte aus, um den Authentifizierungsprozess abzuschließen. Informationen zu anderen Anmeldeoptionen finden Sie unter Anmelden mit der Azure CLI.
Installieren Sie die Azure CLI-Erweiterung beim ersten Einsatz, wenn Sie dazu aufgefordert werden. Weitere Informationen zu Erweiterungen finden Sie unter Verwenden von Erweiterungen mit der Azure CLI.
Führen Sie az version aus, um die installierte Version und die abhängigen Bibliotheken zu ermitteln. Führen Sie az upgrade aus, um das Upgrade auf die aktuelle Version durchzuführen.
Für dieses Setup ist mindestens Version 2.22.0 der Azure CLI erforderlich. Bei Verwendung von Azure Cloud Shell ist die aktuelle Version bereits installiert.
Erstellen einer Azure Web PubSub-Instanz
Erstellen einer Ressourcengruppe
Eine Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen bereitgestellt und verwaltet werden. Erstellen Sie mithilfe des Befehls az group create eine Ressourcengruppe namens myResourceGroup in der Region eastus.
az group create --name myResourceGroup --location EastUS
Erstellen einer Web PubSub-Instanz
Führen Sie az extension add aus, um die Erweiterung webpubsub zu installieren bzw. auf die aktuelle Version zu aktualisieren.
az extension add --upgrade --name webpubsub
Verwenden Sie den Azure CLI-Befehl az webpubsub create, um eine Web PubSub-Instanz in der erstellten Ressourcengruppe zu erstellen. Mit dem folgenden Befehl wird eine Kostenlose Web-PubSub-Ressource unter der Ressourcengruppe myResourceGroup in USA, Osten erstellt:
Wichtig
Jede Web PubSub-Ressource muss einen eindeutigen Namen haben. Ersetzen Sie in den folgenden Beispielen <your-unique-resource-name> durch den Namen Ihrer Web PubSub-Instanz.
In der Ausgabe dieses Befehls werden die Eigenschaften der neu erstellten Ressource angezeigt. Beachten Sie die beiden folgenden Eigenschaften:
Resource Name: Der Name, den Sie oben für den Parameter --name angegeben haben.
hostName: Im Beispiel lautet der Hostname <your-unique-resource-name>.webpubsub.azure.com/.
An diesem Punkt ist nur Ihr Azure-Konto zum Ausführen von Vorgängen für die neue Ressource autorisiert.
Abrufen der Verbindungszeichenfolge zur späteren Verwendung
Wichtig
Eine Verbindungszeichenfolge enthält die Autorisierungsinformationen, die Ihre Anwendung für den Zugriff auf den Azure Web PubSub-Dienst benötigt. Der Zugriffsschlüssel in der Verbindungszeichenfolge ähnelt einem Stammkennwort für Ihren Dienst. Achten Sie in Produktionsumgebungen immer gut darauf, Ihre Zugriffsschlüssel zu schützen. Verwenden Sie Azure Key Vault zum sicheren Verwalten und Rotieren Ihrer Schlüssel. Geben Sie Zugriffsschlüssel nicht an andere Benutzer weiter, vermeiden Sie das Hartcodieren, und speichern Sie die Schlüssel nicht als Klartext, auf den andere Benutzer Zugriff haben. Rotieren Sie die Schlüssel, wenn Sie glauben, dass sie möglicherweise gefährdet sind.
Verwenden Sie den Azure CLI-Befehl az webpubsub key, um die Verbindungszeichenfolge (ConnectionString) des Diensts abzurufen. Ersetzen Sie den Platzhalter <your-unique-resource-name> durch den Namen Ihrer Azure Web PubSub-Instanz.
az webpubsub key show --resource-group myResourceGroup --name <your-unique-resource-name> --query primaryConnectionString --output tsv
Kopieren Sie die Verbindungszeichenfolge zur späteren Verwendung.
Kopieren Sie den abgerufenen ConnectionString und legen Sie ihn in die Umgebungsvariable WebPubSubConnectionString fest, die das Tutorial später liest. Ersetzen Sie <connection-string>, unten, durch die ConnectionString, die Sie abgerufen haben.
In Azure Web PubSub gibt es zwei Rollen: Server und Client. Dieses Konzept ähnelt den Server- und Clientrollen in einer Webanwendung. Der Server ist dafür verantwortlich, die Clients zu verwalten, zuzuhören und auf Clientnachrichten zu reagieren. Der Client ist dafür verantwortlich, die Nachrichten des Benutzers vom Server zu senden und zu empfangen und für den Endbenutzer zu visualisieren.
In diesem Tutorial erstellen wir eine Echtzeit-Chat-Webanwendung. In einer echten Webanwendung umfasst die Verantwortung des Servers auch die Authentifizierung von Clients und die Bereitstellung statischer Webseiten für die Benutzeroberfläche der Anwendung.
Erstellen Sie außerdem eine HTML-Datei und speichern Sie diese unter public/index.html, wir verwenden sie später für die Benutzeroberfläche der Chat-App.
<html>
<body>
<h1>Azure Web PubSub Chat</h1>
</body>
</html>
Sie können den Server testen, indem Sie node server ausführen und http://localhost:8080 im Browser aufrufen.
Wir verwenden das Web-Framework Javalin, um die Webseiten zu hosten und eingehende Anfragen zu bearbeiten.
Verwenden Sie Maven, um eine neue App webpubsub-tutorial-chat zu erstellen und wechseln Sie in den Ordner webpubsub-tutorial-chat:
Navigieren Sie zum Verzeichnis /src/main/java/com/webpubsub/tutorial. Öffnen Sie die Datei App.java im Editor. Verwenden Sie Javalin.create zum Bereitstellen statischer Dateien:
package com.webpubsub.tutorial;
import io.javalin.Javalin;
public class App {
public static void main(String[] args) {
// start a server
Javalin app = Javalin.create(config -> {
config.staticFiles.add("public");
}).start(8080);
}
}
Je nach Setup müssen Sie die Sprachebene möglicherweise explizit auf Java 8 festlegen. Dieser Schritt kann in der pom.xml durchgeführt werden. Fügen Sie den folgenden Codeausschnitt hinzu:
Erstellen Sie eine HTML-Datei und speichern Sie diese in /src/main/resources/public/index.html. Wir verwenden sie später für die Benutzeroberfläche der Chat-App.
<html>
<body>
<h1>Azure Web PubSub Chat</h1>
</body>
</html>
Sie können den Server testen, indem Sie den folgenden Befehl unter dem Verzeichnis ausführen, das die Datei pom.xml enthält, und im Browser auf http://localhost:8080 zugreifen.
Erstellen Sie außerdem eine HTML-Datei und speichern Sie diese unter public/index.html, wir verwenden sie später für die Benutzeroberfläche der Chat-App.
<html>
<body>
<h1>Azure Web PubSub Chat</h1>
</body>
</html>
Sie können den Server testen, indem Sie python server.py ausführen und im Browser auf http://127.0.0.1:8080/index.html zugreifen.
Hinzufügen eines Aushandlungsendpunkts
Im Tutorial Nachricht veröffentlichen und abonnieren verwendet der Abonnent die Verbindungszeichenfolge direkt. In einer realen Anwendung ist es nicht sicher, die Verbindungszeichenfolge für einen beliebigen Client freizugeben, da Verbindungszeichenfolgen über hohe Berechtigungen verfügen, um einen Vorgang für den Dienst auszuführen. Lassen Sie uns nun festlegen, dass Ihr Server die Verbindungszeichenfolge verwendet und einen negotiate-Endpunkt für den Client verfügbar macht, um die vollständige URL mit Zugriffstoken abzurufen. Auf diese Weise kann der Server vor dem negotiate-Endpunkt Authentifizierungs-Middleware hinzufügen, um nicht autorisierten Zugriff zu verhindern.
Nun fügen wir einen /negotiate-Endpunkt für den Client hinzu, um das Token zu generieren.
using Azure.Core;
using Microsoft.Azure.WebPubSub.AspNetCore;
using Microsoft.Azure.WebPubSub.Common;
using Microsoft.Extensions.Primitives;
// Read connection string from environment
var connectionString = Environment.GetEnvironmentVariable("WebPubSubConnectionString");
if (connectionString == null)
{
throw new ArgumentNullException(nameof(connectionString));
}
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddWebPubSub(o => o.ServiceEndpoint = new WebPubSubServiceEndpoint(connectionString))
.AddWebPubSubServiceClient<Sample_ChatApp>();
var app = builder.Build();
app.UseStaticFiles();
// return the Client Access URL with negotiate endpoint
app.MapGet("/negotiate", (WebPubSubServiceClient<Sample_ChatApp> service, HttpContext context) =>
{
var id = context.Request.Query["id"];
if (StringValues.IsNullOrEmpty(id))
{
context.Response.StatusCode = 400;
return null;
}
return new
{
url = service.GetClientAccessUri(userId: id).AbsoluteUri
};
});
app.Run();
sealed class Sample_ChatApp : WebPubSubHub
{
}
AddWebPubSubServiceClient<THub>() wird verwendet, um den Dienstclient WebPubSubServiceClient<THub> einzufügen, mit dem im Aushandlungsschritt eine Clientverbindung generiert und in Hubmethoden verwendet werden kann, um Dienst-REST-APIs aufzurufen, wenn Hubereignisse ausgelöst werden. Dieser Code zum Generieren des Tokens ähnelt dem Code, den wir im Tutorial zum Veröffentlichen und Abonnieren von Nachrichten verwendet haben – abgesehen davon, dass wir beim Generieren des Tokens ein weiteres Argument (userId) übergeben. Mithilfe der Benutzer-ID kann der Client identifiziert werden, damit Sie beim Empfang einer Nachricht wissen, woher die Nachricht stammt.
Der Code liest die Verbindungszeichenfolge aus der Umgebungsvariable WebPubSubConnectionString, die wir im vorherigen Schritt festgelegt haben.
Führen Sie den Server erneut mit dotnet run --urls http://localhost:8080 aus.
Installieren Sie zunächst das Azure Web PubSub SDK:
npm install --save @azure/web-pubsub
Nun fügen wir eine /negotiate-API zum Generieren des Tokens hinzu.
const express = require('express');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');
const app = express();
const hubName = 'Sample_ChatApp';
const port = 8080;
let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);
app.get('/negotiate', async (req, res) => {
let id = req.query.id;
if (!id) {
res.status(400).send('missing user id');
return;
}
let token = await serviceClient.getClientAccessToken({ userId: id });
res.json({
url: token.url
});
});
app.use(express.static('public'));
app.listen(8080, () => console.log('server started'));
Dieser Code zum Generieren des Tokens ähnelt dem Code, den wir im Tutorial zum Veröffentlichen und Abonnieren von Nachrichten verwendet haben – abgesehen davon, dass wir beim Generieren des Tokens ein weiteres Argument (userId) übergeben. Mithilfe der Benutzer-ID kann der Client identifiziert werden, damit Sie beim Empfang einer Nachricht wissen, woher die Nachricht stammt.
Der Code liest die Verbindungszeichenfolge aus der Umgebungsvariable WebPubSubConnectionString, die wir im vorherigen Schritt festgelegt haben.
Führen Sie den Server erneut aus, indem Sie Folgendes ausführen node server.
Fügen Sie zunächst die Azure Web PubSub SDK-Abhängigkeit in den dependencies-Knoten von pom.xml ein:
Fügen wir nun eine /negotiateAPI in die App.java-Datei ein, um das Token zu generieren:
package com.webpubsub.tutorial;
import com.azure.messaging.webpubsub.WebPubSubServiceClient;
import com.azure.messaging.webpubsub.WebPubSubServiceClientBuilder;
import com.azure.messaging.webpubsub.models.GetClientAccessTokenOptions;
import com.azure.messaging.webpubsub.models.WebPubSubClientAccessToken;
import com.azure.messaging.webpubsub.models.WebPubSubContentType;
import io.javalin.Javalin;
public class App {
public static void main(String[] args) {
String connectionString = System.getenv("WebPubSubConnectionString");
if (connectionString == null) {
System.out.println("Please set the environment variable WebPubSubConnectionString");
return;
}
// create the service client
WebPubSubServiceClient service = new WebPubSubServiceClientBuilder()
.connectionString(connectionString)
.hub("Sample_ChatApp")
.buildClient();
// start a server
Javalin app = Javalin.create(config -> {
config.staticFiles.add("public");
}).start(8080);
// Handle the negotiate request and return the token to the client
app.get("/negotiate", ctx -> {
String id = ctx.queryParam("id");
if (id == null) {
ctx.status(400);
ctx.result("missing user id");
return;
}
GetClientAccessTokenOptions option = new GetClientAccessTokenOptions();
option.setUserId(id);
WebPubSubClientAccessToken token = service.getClientAccessToken(option);
ctx.contentType("application/json");
String response = String.format("{\"url\":\"%s\"}", token.getUrl());
ctx.result(response);
return;
});
}
}
Dieser Code zum Generieren des Tokens ähnelt dem Code, den wir im Tutorial zum Veröffentlichen und Abonnieren von Nachrichten verwendet haben – abgesehen davon, dass wir beim Generieren des Tokens die Methode setUserId zum Festlegen der Benutzer-ID aufrufen. Mithilfe der Benutzer-ID kann der Client identifiziert werden, damit Sie beim Empfang einer Nachricht wissen, woher die Nachricht stammt.
Der Code liest die Verbindungszeichenfolge aus der Umgebungsvariable WebPubSubConnectionString, die wir im vorherigen Schritt festgelegt haben.
Führen Sie den Server mit den folgenden Befehlen erneut aus:
Installieren Sie zunächst das Azure Web PubSub SDK.
pip install azure-messaging-webpubsubservice
Fügen wir nun dem Server eine /negotiate-API hinzu, um das Token zu generieren.
import os
from flask import (
Flask,
request,
send_from_directory,
)
from azure.messaging.webpubsubservice import (
WebPubSubServiceClient
)
hub_name = 'Sample_ChatApp'
connection_string = os.environ.get('WebPubSubConnectionString')
app = Flask(__name__)
service = WebPubSubServiceClient.from_connection_string(connection_string, hub=hub_name)
@app.route('/<path:filename>')
def index(filename):
return send_from_directory('public', filename)
@app.route('/negotiate')
def negotiate():
id = request.args.get('id')
if not id:
return 'missing user id', 400
token = service.get_client_access_token(user_id=id)
return {
'url': token['url']
}, 200
if __name__ == '__main__':
app.run(port=8080)
Dieser Code zum Generieren des Tokens ähnelt dem Code, den wir im Tutorial zum Veröffentlichen und Abonnieren von Nachrichten verwendet haben – abgesehen davon, dass wir beim Generieren des Tokens ein weiteres Argument (user_id) übergeben. Mithilfe der Benutzer-ID kann der Client identifiziert werden, damit Sie beim Empfang einer Nachricht wissen, woher die Nachricht stammt.
Der Code liest die Verbindungszeichenfolge aus der Umgebungsvariable WebPubSubConnectionString, die wir im vorherigen Schritt festgelegt haben.
Führen Sie den Server erneut mit python server.py aus.
Sie können diese API testen, indem Sie auf http://localhost:8080/negotiate?id=user1 zugreifen. Sie erhalten dann die vollständige URL des Azure Web PubSub mit einem Zugriffstoken.
Behandeln von Ereignissen
Wenn in Azure Web PubSub bestimmte Aktivitäten auf clientseitiger Seite auftreten (z. B. ein Client verbindet, verbunden, getrennt oder ein Client Nachrichten sendet), sendet der Dienst Benachrichtigungen an den Server, damit er auf diese Ereignisse reagieren kann.
Ereignisse werden in Form eines Webhooks an den Server übermittelt. Der Webhook wird vom Anwendungsserver verarbeitet und verfügbar gemacht und auf der Dienstseite von Azure Web PubSub registriert. Der Dienst ruft die Webhooks immer dann auf, wenn ein Ereignis eintritt.
Azure Web PubSub beschreibt die Ereignisdaten gemäß CloudEvents.
Nachfolgend behandeln wir connected-Systemereignisse, wenn ein Client verbunden ist und Benutzerereignisse verarbeitet message, wenn ein Client Nachrichten sendet, um die Chat-App zu erstellen.
Das Web PubSub SDK für AspNetCore Microsoft.Azure.WebPubSub.AspNetCore, das wir im vorherigen Schritt installiert haben, kann auch dazu beitragen, die CloudEvents-Anforderungen zu analysieren und zu verarbeiten.
Fügen Sie zunächst Ereignishandler vor app.Run() ein. Geben Sie den Endpunktpfad für die Ereignisse an, beispielsweise /eventhandler.
Fügen Sie nun innerhalb der Klasse Sample_ChatApp, die wir im vorherigen Schritt erstellt haben, einen Konstruktor hinzu, mit WebPubSubServiceClient<Sample_ChatApp> dem wir den Web PubSub-Dienst aufrufen. Und OnConnectedAsync(), um zu reagieren, wenn das connected-Ereignis ausgelöst wird, OnMessageReceivedAsync() um Nachrichten vom Client zu behandeln.
sealed class Sample_ChatApp : WebPubSubHub
{
private readonly WebPubSubServiceClient<Sample_ChatApp> _serviceClient;
public Sample_ChatApp(WebPubSubServiceClient<Sample_ChatApp> serviceClient)
{
_serviceClient = serviceClient;
}
public override async Task OnConnectedAsync(ConnectedEventRequest request)
{
Console.WriteLine($"[SYSTEM] {request.ConnectionContext.UserId} joined.");
}
public override async ValueTask<UserEventResponse> OnMessageReceivedAsync(UserEventRequest request, CancellationToken cancellationToken)
{
await _serviceClient.SendToAllAsync(RequestContent.Create(
new
{
from = request.ConnectionContext.UserId,
message = request.Data.ToString()
}),
ContentType.ApplicationJson);
return new UserEventResponse();
}
}
In dem obigen Code verwenden wir den Service-Client, um eine Benachrichtigung im JSON-Format an alle zu senden, die sich mit SendToAllAsync verknüpfen.
Web PubSub SDK für Express @azure/web-pubsub-express hilft beim Analysieren und Verarbeiten der CloudEvents-Anforderungen.
npm install --save @azure/web-pubsub-express
Aktualisieren Sie server.js mit dem folgenden Code, um eine REST-API unter /eventhandler zur Verfügung zu stellen (was durch die vom Web PubSub SDK bereitgestellte Express-Middleware geschieht), um das Ereignis „Client verbunden“ zu behandeln:
const express = require("express");
const { WebPubSubServiceClient } = require("@azure/web-pubsub");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const app = express();
const hubName = "Sample_ChatApp";
let serviceClient = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hubName);
let handler = new WebPubSubEventHandler(hubName, {
path: "/eventhandler",
onConnected: async (req) => {
console.log(`${req.context.userId} connected`);
},
handleUserEvent: async (req, res) => {
if (req.context.eventName === "message")
await serviceClient.sendToAll({
from: req.context.userId,
message: req.data,
});
res.success();
},
});
app.get("/negotiate", async (req, res) => {
let id = req.query.id;
if (!id) {
res.status(400).send("missing user id");
return;
}
let token = await serviceClient.getClientAccessToken({ userId: id });
res.json({
url: token.url,
});
});
app.use(express.static("public"));
app.use(handler.getMiddleware());
app.listen(8080, () => console.log("server started"));
Im obigen Code wird onConnected einfach eine Meldung auf der Konsole ausgegeben, wenn ein Client verbunden ist. Hierbei verwenden wir req.context.userId, um die Identität des verbundenen Clients anzuzeigen. Und handleUserEvent wird aufgerufen, wenn ein Client eine Nachricht sendet. Es wird WebPubSubServiceClient.sendToAll() verwendet, um die Nachricht in einem JSON-Objekt an alle Clients zu übertragen. handleUserEvent verwendet außerdem ein res-Objekt, mit dem Sie eine Nachricht an den Absender des Ereignisses zurücksenden können. Hier rufen wir einfach res.success() auf, damit der WebHook 200 zurückgibt (beachten Sie, dass dieser Aufruf auch dann erforderlich ist, wenn Sie nichts an den Client zurückgeben möchten, da der WebHook sonst nie zurückkehrt und die Client-Verbindung geschlossen wird).
Jetzt müssen Sie den Ereignishandler von Ihrem eigenen in Java implementieren. Die Schritte folgen direkt den Protokollspezifikationen und werden in der folgenden Liste veranschaulicht:
Fügen Sie einen HTTP-Handler für den Ereignishandlerpfad hinzu, z. B. /eventhandler.
Zuerst möchten wir die OPTIONS-Anforderungen für den Missbrauchsschutz verarbeiten. Wir überprüfen, ob der Header WebHook-Request-Origin enthält und geben den Header WebHook-Allowed-Origin zurück. Der Einfachheit halber geben wir in diesem Beispiel * zurück, um alle Ursprünge zuzulassen.
Anschließend möchten wir überprüfen, ob es sich bei den eingehenden Anforderungen um die erwarteten Ereignisse handelt. Angenommen, uns interessiert das Systemereignis connected, das für den ce-type-Header azure.webpubsub.sys.connected enthalten soll. Wir fügen die Logik nach Missbrauchsschutz hinzu, um das verbundene Ereignis an alle Clients zu übertragen, damit sie sehen können, wer dem Chatroom beigetreten ist.
Im obigen Code geben wir einfach eine Nachricht an die Konsole aus, wenn ein Client verbunden ist. Hierbei verwenden wir ctx.header("ce-userId"), um die Identität des verbundenen Clients anzuzeigen.
Das ce-type von Ereignis message ist immer azure.webpubsub.user.message. Details finden Sie unter Ereignismeldung. Wir aktualisieren die Logik, um Nachrichten zu verarbeiten, die beim Senden einer Nachricht im JSON-Format an alle verbundenen Clients gesendet werden.
Jetzt müssen Sie den Ereignishandler von Ihrem eigenen in Python implementieren. Die Schritte folgen direkt den Protokollspezifikationen und werden in der folgenden Liste veranschaulicht:
Fügen Sie einen HTTP-Handler für den Ereignishandlerpfad hinzu, z. B. /eventhandler.
Zuerst möchten wir die OPTIONS-Anforderungen für den Missbrauchsschutz verarbeiten. Wir überprüfen, ob der Header WebHook-Request-Origin enthält und geben den Header WebHook-Allowed-Origin zurück. Der Einfachheit halber geben wir in diesem Beispiel * zurück, um alle Ursprünge zuzulassen.
# validation: https://azure.github.io/azure-webpubsub/references/protocol-cloudevents#validation
@app.route('/eventhandler', methods=['OPTIONS'])
def handle_event():
if request.method == 'OPTIONS':
if request.headers.get('WebHook-Request-Origin'):
res = Response()
res.headers['WebHook-Allowed-Origin'] = '*'
res.status_code = 200
return res
Anschließend möchten wir überprüfen, ob es sich bei den eingehenden Anforderungen um die erwarteten Ereignisse handelt. Angenommen, uns interessiert das Systemereignis connected, das für den ce-type-Header azure.webpubsub.sys.connected enthalten soll. Wir fügen die Logik nach dem Missbrauchsschutz hinzu:
Im obigen Code geben wir einfach eine Nachricht an die Konsole aus, wenn ein Client verbunden ist. Hierbei verwenden wir request.headers.get('ce-userid'), um die Identität des verbundenen Clients anzuzeigen.
Das ce-type von Ereignis message ist immer azure.webpubsub.user.message. Details finden Sie unter Ereignismeldung. Wir aktualisieren die Logik, um Nachrichten zu verarbeiten, die beim Senden einer Nachricht an alle verbundenen Clients gesendet werden.
@app.route('/eventhandler', methods=['POST', 'OPTIONS'])
def handle_event():
if request.method == 'OPTIONS':
if request.headers.get('WebHook-Request-Origin'):
res = Response()
res.headers['WebHook-Allowed-Origin'] = '*'
res.status_code = 200
return res
elif request.method == 'POST':
user_id = request.headers.get('ce-userid')
type = request.headers.get('ce-type')
if type == 'azure.webpubsub.sys.connected':
print(f"{user_id} connected")
return '', 204
elif type == 'azure.webpubsub.user.message':
# default uses JSON
service.send_to_all(message={
'from': user_id,
'message': request.data.decode('UTF-8')
})
# returned message is also received by the client
return {
'from': "system",
'message': "message handled by server"
}, 200
else:
return 'Bad Request', 400
Aktualisieren Sie die Webseite
Nun aktualisieren wir index.html, um die Logik zum Verbinden, Senden von Nachrichten und Anzeigen empfangener Nachrichten auf der Seite hinzuzufügen.
<html>
<body>
<h1>Azure Web PubSub Chat</h1>
<input id="message" placeholder="Type to chat...">
<div id="messages"></div>
<script>
(async function () {
let id = prompt('Please input your user name');
let res = await fetch(`/negotiate?id=${id}`);
let data = await res.json();
let ws = new WebSocket(data.url);
ws.onopen = () => console.log('connected');
let messages = document.querySelector('#messages');
ws.onmessage = event => {
let m = document.createElement('p');
let data = JSON.parse(event.data);
m.innerText = `[${data.type || ''}${data.from || ''}] ${data.message}`;
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>
Sie können im obigen Code sehen, den wir verbinden, die systemeigene WebSocket-API im Browser verwenden WebSocket.send() und zum Senden von Nachrichten und WebSocket.onmessage zum Abhören empfangener Nachrichten verwendet werden.
Sie können auch Client-SDKs verwenden, um eine Verbindung mit dem Dienst herzustellen, was Ihnen die automatische Wiederherstellung, Fehlerbehandlung und vieles mehr ermöglicht.
Es gibt jetzt einen Schritt, damit der Chat funktioniert. Lassen Sie uns konfigurieren, welche Ereignisse uns wichtig sind und an welche Ereignisse im Web PubSub-Dienst gesendet werden sollen.
Einrichten des Ereignishandlers
Wir legen den Ereignishandler im Web PubSub-Dienst fest, um dem Dienst mitzuteilen, an welchen Ort die Ereignisse gesendet werden sollen.
Wenn der Webserver lokal ausgeführt wird, wie der Web PubSub-Dienst den Localhost aufruft, wenn er keinen Endpunkt mit Internetzugriff hat? In der Regel gibt es zwei Möglichkeiten. Eine besteht darin, localhost über ein allgemeines Tunneltool für die Öffentlichkeit verfügbar zu machen, und die andere besteht darin , AWP-Tunnel zum Tunneln des Datenverkehrs vom Web PubSub-Dienst über das Tool zu Ihrem lokalen Server zu verwenden.
In diesem Abschnitt verwenden wir Azure CLI, um die Ereignishandler festzulegen und AWP-Tunnel zum Weiterleiten von Datenverkehr an Localhost zu verwenden.
Konfigurieren von Hubeinstellungen
Wir legen die URL-Vorlage so fest, dass das Schema verwendet tunnel wird, sodass Web PubSub Nachrichten über die awps-tunnelTunnelverbindung leitet. Ereignishandler können entweder über das Portal oder über die CLI festgelegt werden, wie in diesem Artikel beschrieben. Hier wird die CLI verwendet. Da Ereignisse im Pfad /eventhandler als vorherige Schrittsätze überwacht werden, legen wir die URL-Vorlage auf tunnel:///eventhandler.
Verwenden Sie den Azure CLI-Befehl az webpubsub hub create, um die Ereignishandler-Einstellungen für den Chathub zu aktualisieren.
Wichtig
Ersetzen Sie <your-unique-resource-name> durch den Namen Ihrer Web PubSub-Instanz, die in den vorherigen Schritten erstellt wurde.
