Le modèle de requête/réponse HTTP familier a été conçu pour être facile à utiliser et évolutif. Cependant, de nos jours, les utilisateurs finaux demandent beaucoup plus du web qu’il n’a été conçu à l’origine. Le protocole HTTP exige que les utilisateurs lancent la demande afin de recevoir une réponse. Mais les développeurs ont besoin d’un moyen d’envoyer des données du serveur aux clients sans qu’ils le demandent ; en d’autres termes, ils doivent « envoyer » des données aux clients, comme pousser le dernier prix d’enchère d’un produit sur un site d’enchères ou les cours d’actions qui évoluent rapidement dans une application financière.
Ce guide de démarrage rapide montre comment effectuer les opérations suivantes
s’abonner aux messages d’un serveur d’applications
envoyer des données d’un serveur d’applications à tous les clients connectés
Prérequis
Une ressource Web PubSub. Si vous n’en avez pas créé, vous pouvez suivre les instructions suivantes : Créer une ressource Web PubSub
Un éditeur de code, comme Visual Studio Code.
Installer les dépendances pour la langue que vous envisagez d’utiliser
Pour vous abonner aux messages envoyés à partir de votre serveur d’applications, un client, qu’il s’agit d’un navigateur, d’une application mobile ou d’un appareil IoT, doit d’abord se connecter à votre ressource Web PubSub et écouter l’événement de message approprié.
Créez un répertoire de projet appelé subscriber et installez les dépendances requises
mkdir subscriber
cd subscriber
npm init -y
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client
Connectez-vous à votre ressource Web PubSub et inscrivez un écouteur pour l’événement server-message
Un client utilise une URL d’accès client pour se connecter et s’authentifier auprès de votre ressource.
Cette URL suit le modèle wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Un client peut disposer de plusieurs façons pour obtenir l’URL d’accès au client. Pour ce démarrage rapide, vous pouvez en copier et coller un à partir du Portail Azure illustré dans le diagramme suivant. Il est recommandé de ne pas coder en dur l’URL d’accès client. Dans un environnement de production, un serveur d’applications est généralement configuré pour renvoyer cette URL à la demande. Générer une URL d’accès client décrit la pratique en détail.
Comme indiqué dans le diagramme ci-dessus, le client joint le hub nommé myHub1.
Dans le dossier du projet subscriber, créez un fichier nommé subscribe.js avec le code suivant
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();
Exécuter le programme
node subscribe.js
À présent, ce client établit une connexion avec votre ressource Web PubSub et est prêt à recevoir des messages envoyés à partir de votre serveur d’applications.
Créez un répertoire de projet appelé subscriber et installez les dépendances requises
mkdir subscriber
cd subscriber
# Create a .net console app
dotnet new console
# Add the client SDK
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease
Connectez-vous à votre ressource Web PubSub et inscrivez un écouteur pour l’événement ServerMessageReceived
Un client utilise une URL d’accès client pour se connecter et s’authentifier auprès de votre ressource.
Cette URL suit le modèle wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Un client peut disposer de plusieurs façons pour obtenir l’URL d’accès au client. Pour ce démarrage rapide, vous pouvez en copier et coller un à partir du Portail Azure illustré dans le diagramme suivant. Il est recommandé de ne pas coder en dur l’URL d’accès client. Dans un environnement de production, un serveur d’applications est généralement configuré pour renvoyer cette URL à la demande. Générer une URL d’accès client décrit la pratique en détail.
Comme indiqué dans le diagramme ci-dessus, le client joint le hub nommé myHub1.
Remplacez le code de Program.cs avec le code suivant
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();
Exécutez la commande suivante :
dotnet run
À présent, ce client établit une connexion avec votre ressource Web PubSub et est prêt à recevoir des messages envoyés à partir de votre serveur d’applications.
Créez un répertoire de projet appelé subscriber et installez les dépendances requises :
Utilisez l’API WebSocket pour vous connecter à votre ressource Web PubSub. Créez un fichier subscribe.py avec le code suivant
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
Le code crée une connexion WebSocket qui est connectée à un hub dans Web PubSub. Le hub est une unité logique dans Web PubSub où vous pouvez publier des messages sur un groupe de clients. Les concepts clés contiennent une explication détaillée sur les termes utilisés dans Web PubSub.
Le service Web PubSub utilise l’authentification JWT (JSON Web Token). L’exemple de code utilise WebPubSubServiceClient.GetClientAccessUri() dans le Kit de développement logiciel (SDK) Web PubSub pour générer une URL pour le service qui contient l’URL complète avec un jeton d’accès valide.
Une fois la connexion établie, votre client recevra des messages via la connexion WebSocket. Utilisez await ws.recv() pour écouter les messages entrants.
Exécutez la commande suivante :
python subscribe.py $connection_string "myHub1"
Créer un répertoire de projet nommé pubsub
mkdir pubsub
cd pubsub
Utilisez Maven pour créer une application console nommé webpubsub-quickstart-subscriber;
Dans Web PubSub, vous pouvez vous connecter au service et vous abonner à des messages via des connexions WebSocket. WebSocket est un canal de communication en duplex intégral afin que le service puisse envoyer des messages à votre client en temps réel. Vous pouvez utiliser n’importe quelle API ou bibliothèque qui prend en charge WebSocket. Pour cet échantillon, nous utilisons le package Java-WebSocket.
Accédez au répertoire /src/main/java/com/webpubsub/quickstart.
Éditez le remplacement du contenu du fichier App.java par le code suivant :
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();
}
}
Ce code crée une connexion WebSocket qui est connectée à un hub dans Azure Web PubSub. Un hub est une unité logique dans Azure Web PubSub où vous pouvez publier des messages sur un groupe de clients. Les concepts clés contiennent une explication détaillée sur les termes utilisés dans Azure Web PubSub.
Le service Web PubSub utilise l’authentification JWT (JSON Web Token). L’exemple de code utilise WebPubSubServiceClient.GetClientAccessUri() dans le Kit de développement logiciel (SDK) Web PubSub pour générer une URL pour le service qui contient l’URL complète avec un jeton d’accès valide.
Une fois la connexion établie, votre client reçoit des messages via la connexion WebSocket. Utilisez onMessage(String message) pour écouter les messages entrants.
Messages push à partir de votre serveur d’applications
Maintenant qu’un client a connecté votre ressource Web PubSub, vous pouvez envoyer des messages à partir d’un serveur d’applications à tout moment à l’aide du Kit de développement logiciel (SDK) du serveur fourni par Web PubSub.
Créez un nouveau répertoire de projet appelé publisher et installez les dépendances requises
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
Créez un fichier publish.js avec le code suivant
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" });
L’appel server.sendToAll() envoie un message à tous les clients connectés dans un hub.
Obtenir la chaîne de connexion
Important
Une chaîne de connexion contient les informations d’autorisation requises pour que votre application accède au service Web PubSub. La clé d’accès à l’intérieur dans la chaîne de connexion est semblable à un mot de passe racine pour votre service.
Pour ce guide de démarrage rapide, nous allons l’obtenir à partir de Portail Azure comme indiqué ci-dessous.
Exécuter le programme serveur
Exécutez les commandes suivantes dans un nouvel interpréteur de commandes.
# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>"
node publish.js "Hello World"
Observer les messages reçus côté client
Essayez d’exécuter le même programme « s’abonner » dans plusieurs interpréteurs de commandes pour stimuler plus que les clients. Dès que le programme « publier » est exécuté, vous devriez voir des messages remis en temps réel à tous ces clients.
Créez un répertoire de projet appelé publisher et installez les dépendances requises :
mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub
Remplacez le fichier Program.cs par le code suivant
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);
}
}
}
L’appel SendToAllAsync() envoie un message à tous les clients connectés dans le hub.
Exécuter le programme serveur pour envoyer des messages à tous les clients connectés
$connection_string="<connection-string>"
dotnet run $connection_string "myHub1" "Hello World"
Observer les messages reçus côté client
# 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
Tout d’abord, créez un répertoire de projet appelé publisher et installez les dépendances requises :
mkdir publisher
cd publisher
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate
pip install azure-messaging-webpubsubservice
Utilisez le Kit de développement logiciel (SDK) Azure Web PubSub pour publier un message sur le service. Créez un fichier publish.py avec le code ci-dessous :
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() envoie le message à tous les clients connectés dans un hub.
Vérifiez que l’interpréteur de commandes précédent indique que l’abonné a reçu le message :
Received message: Hello World
Accédez au répertoire pubsub. Utilisez Maven pour créer une application console d’éditeur nommée webpubsub-quickstart-publisher et accédez au répertoire webpubsub-quickstart-publisher :
Utilisez le Kit de développement logiciel (SDK) Azure Web PubSub pour publier un message sur le service. Accédez au répertoire /src/main/java/com/webpubsub/quickstart, ouvrez le fichier App.java dans votre éditeur et remplacez le contenu par le code qui suit :
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);
}
}
L’appel sendToAll() envoie un message à tous les clients connectés dans un hub.
Accédez au répertoire webpubsub-quickstart-publisher et exécutez le projet à l’aide de la commande suivante :
Vous pouvez voir que l’abonné précédent a reçu le message :
Message received: Hello World
Récapitulatif
Ce guide de démarrage rapide montre à quel point il est facile d’envoyer des messages d’un serveur d’applications à tous les clients connectés dans un hub. En outre, Web PubSub vous permet d’envoyer des messages vers
un sous-ensemble des clients dans un hub
un groupe particulier dans un hub
un sous-ensemble de clients dans un groupe
Ces API permettent un grand nombre de cas d’usage, ce qui permet aux développeurs de se concentrer sur une logique métier unique tout en étant assurés que Web PubSub offre une faible latence (<100 ms), une haute disponibilité et une grande échelle (plus de millions de connexions simultanées).
Étapes suivantes
À l’étape suivante, nous allons explorer comment utiliser le système d’événements de Web PubSub, nécessaire pour créer des applications web complètes.
