El conocido modelo de solicitud/respuesta HTTP se diseñó para que sea fácil de trabajar y escalable. Sin embargo, en la actualidad, los usuarios finales demandan mucho más de la web de lo que fue diseñada originalmente para ofrecer. El protocolo HTTP requiere que los usuarios inicien la solicitud para recibir una respuesta. Sin embargo, los desarrolladores necesitan una forma de enviar datos del servidor a los clientes sin tener que solicitarlos; en otras palabras, necesitan "insertar" los datos en los clientes, como insertar el último precio de oferta de un producto en un sitio de subastas o los precios de las acciones en tiempo real en una aplicación financiera.
Esta guía de inicio rápido muestra cómo
suscribirse a mensajes desde un servidor de aplicaciones
insertar datos desde un servidor de aplicaciones a todos los clientes conectados
Importante
Las cadenas de conexión sin procesar solo aparecen en este artículo con fines de demostración.
Una cadena de conexión incluye la información de autorización necesaria para que la aplicación acceda al servicio Azure Web PubSub. La clave de acceso dentro de la cadena de conexión es similar a una contraseña raíz para el servicio. En entornos de producción, proteja siempre las claves de acceso. Use Azure Key Vault para administrar y rotar las claves de forma segura y proteja la conexión con WebPubSubServiceClient.
Evite distribuirlas a otros usuarios, codificarlas de forma rígida o guardarlas en un archivo de texto sin formato al que puedan acceder otros usuarios. Rote sus claves si cree que se han puesto en peligro.
Para suscribirse a los mensajes insertados desde el servidor de aplicaciones, un cliente, ya sea un explorador, una aplicación móvil o un dispositivo IoT, debe conectarse primero al recurso de Web PubSub y escuchar el evento de mensaje adecuado.
Cree un directorio del proyecto denominado subscriber e instale las dependencias requeridas
mkdir subscriber
cd subscriber
npm init -y
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client
Conéctese al recurso de Web PubSub y registre un cliente de escucha para el evento server-message
Un cliente usa una dirección URL de acceso de cliente para conectarse y autenticarse con su recurso.
Esta dirección URL sigue el patrón de wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Un cliente puede tener varias maneras de obtener la dirección URL de acceso de cliente. Para este inicio rápido, puede copiar y pegar una de Azure Portal, como se muestra en el siguiente diagrama. Se recomienda no codificar la URL de acceso del cliente en el código. En el mundo de producción, normalmente configuramos un servidor de aplicaciones para devolver esta dirección URL a petición. Generar dirección URL de acceso del cliente describe la práctica en detalle.
Como se muestra en el diagrama anterior, el cliente se une al centro denominado myHub1.
En la carpeta del proyecto subscriber, cree un archivo denominado subscribe.js con el código siguiente
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();
Ejecución del programa
node subscribe.js
Ahora este cliente establece una conexión con el recurso de Web PubSub y está listo para recibir mensajes insertados desde el servidor de aplicaciones.
Cree un directorio del proyecto denominado subscriber e instale las dependencias requeridas
mkdir subscriber
cd subscriber
# Create a .net console app
dotnet new console
# Add the client SDK
dotnet add package Azure.Messaging.WebPubSub.Client --prerelease
Conéctese al recurso de Web PubSub y registre un cliente de escucha para el evento ServerMessageReceived
Un cliente usa una dirección URL de acceso de cliente para conectarse y autenticarse con su recurso.
Esta dirección URL sigue el patrón de wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>. Un cliente puede tener varias maneras de obtener la dirección URL de acceso de cliente. Para este inicio rápido, puede copiar y pegar una de Azure Portal, como se muestra en el siguiente diagrama. Se recomienda no codificar la URL de acceso del cliente en el código. En el mundo de producción, normalmente configuramos un servidor de aplicaciones para devolver esta dirección URL a petición. Generar dirección URL de acceso del cliente describe la práctica en detalle.
Como se muestra en el diagrama anterior, el cliente se une al centro denominado myHub1.
Reemplace el código en Program.cs por el código siguiente
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();
Ejecute el siguiente comando.
dotnet run
Ahora este cliente establece una conexión con el recurso de Web PubSub y está listo para recibir mensajes insertados desde el servidor de aplicaciones.
Cree un directorio del proyecto denominado subscriber e instale las dependencias requeridas:
Use la API de WebSocket para conectarse al recurso Web PubSub. Cree un archivo subscribe.py con el código siguiente
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
El código crea una conexión de WebSocket que se conecta a un centro en Web PubSub. Un centro es una unidad lógica de Web PubSub donde puede publicar mensajes para un grupo de clientes. Los conceptos clave contienen una explicación detallada sobre los términos usados en Web PubSub.
El servicio Web PubSub usa la autenticación JSON Web Token (JWT). El código de ejemplo usa WebPubSubServiceClient.GetClientAccessUri() en el SDK de Web PubSub para generar una dirección URL al servicio que contiene la dirección URL completa con un token de acceso válido.
Una vez establecida la conexión, el cliente recibirá mensajes a través de la conexión de WebSocket. Use await ws.recv() para escuchar los mensajes entrantes.
Ejecute el siguiente comando.
python subscribe.py $connection_string "myHub1"
Cree un directorio de proyecto denominado pubsub
mkdir pubsub
cd pubsub
Use Maven para crear una nueva aplicación de consola denominada webpubsub-quickstart-subscriber;
En Web PubSub, puede conectarse al servicio y suscribirse a los mensajes a través de conexiones de WebSocket. WebSocket es un canal de comunicación dúplex completo que permite que el servicio pueda insertar mensajes en el cliente en tiempo real. Puede usar cualquier API o biblioteca que admita WebSocket. Para este ejemplo, usamos el v Java-WebSocket.
Vaya al directorio /src/main/java/com/webpubsub/quickstart.
Edite y reemplace el contenido del archivo App.java por el código siguiente:
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();
}
}
Este código crea una conexión de WebSocket que se conecta a un centro en Azure Web PubSub. Un centro es una unidad lógica de Azure Web PubSub donde puede publicar mensajes para un grupo de clientes. Los conceptos clave contienen la explicación detallada sobre los términos usados en Azure Web PubSub.
El servicio Web PubSub usa la autenticación JSON Web Token (JWT). El código de ejemplo usa WebPubSubServiceClient.GetClientAccessUri() en el SDK de Web PubSub para generar una dirección URL al servicio que contiene la dirección URL completa con un token de acceso válido.
Una vez establecida la conexión, el cliente recibirá mensajes a través de la conexión de WebSocket. Use onMessage(String message) para escuchar los mensajes entrantes.
Insertar mensajes desde el servidor de aplicaciones
Ahora que tiene un cliente conectado al recurso de Web PubSub, puede insertar mensajes desde un servidor de aplicaciones en cualquier momento mediante el SDK de servidor proporcionado por Web PubSub.
Cree un nuevo directorio del proyecto denominado publisher e instale las dependencias requeridas
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
Cree un archivo publish.js con el código siguiente
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" });
La llamada server.sendToAll() envía un mensaje a todos los clientes conectados en un centro.
Obtención de la cadena de conexión
Importante
Una cadena de conexión incluye la información de autorización necesaria para que la aplicación acceda al servicio Web PubSub. La clave de acceso dentro de la cadena de conexión es similar a una contraseña raíz para el servicio.
Para esta guía de inicio rápido, la obtendremos de Azure Portal como se muestra a continuación.
Ejecute el programa de servidor
Ejecute estos comandos en un nuevo shell de comandos.
Las cadenas de conexión sin procesar solo aparecen en este artículo con fines de demostración. En entornos de producción, proteja siempre las claves de acceso. Use Azure Key Vault para administrar y rotar las claves de forma segura y proteja la conexión con WebPubSubServiceClient.
# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>"
node publish.js "Hello World"
Observe los mensajes recibidos en el lado cliente
Prueba a ejecutar el mismo programa "subscribe" en varias ventanas de comando para simular a más de un cliente. En cuanto se ejecute el programa "publish", debería ver que los mensajes se entregan en tiempo real a todos estos clientes.
En primer lugar, cree un directorio del proyecto denominado publisher e instale las dependencias requeridas:
mkdir publisher
cd publisher
dotnet new console
dotnet add package Azure.Messaging.WebPubSub
Reemplace el archivo Program.cs por el siguiente código
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);
}
}
}
La llamada SendToAllAsync() envía un mensaje a todos los clientes conectados en un centro.
Ejecutar el programa de servidor para insertar mensajes en todos los clientes conectados
$connection_string="<connection-string>"
dotnet run $connection_string "myHub1" "Hello World"
Observe los mensajes recibidos en el lado cliente
# 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 simulates 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
En primer lugar, cree un directorio del proyecto denominado publisher e instale las dependencias requeridas:
mkdir publisher
cd publisher
# Create venv
python -m venv env
# Active venv
source ./env/bin/activate
pip install azure-messaging-webpubsubservice
Use el SDK de Azure Web PubSub para publicar un mensaje en el servicio. Cree un archivo publish.py con el código siguiente:
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() envía un mensaje a todos los clientes conectados en un centro de conectividad.
Compruebe el shell de comandos anterior con el que el suscriptor recibió el mensaje:
Received message: Hello World
Vaya al directorio pubsub. Use Maven para crear una aplicación webpubsub-quickstart-publisher de consola de publicador y vaya al directorio webpubsub-quickstart-publisher:
Use el SDK de Azure Web PubSub para publicar un mensaje en el servicio. Vaya al directorio /src/main/java/com/webpubsub/quickstart, abra el archivo App.java en el editor y reemplace el contenido por el código siguiente:
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);
}
}
La llamada sendToAll() envía un mensaje a todos los clientes conectados en un centro.
Vaya al directorio webpubsub-quickstart-publisher y ejecute el proyecto con el comando siguiente:
Puede ver que el suscriptor anterior ha recibido el mensaje:
Message received: Hello World
Resumen
En este inicio rápido, se muestra lo fácil que es insertar mensajes desde un servidor de aplicaciones en todos los clientes conectados de un centro. Además, Web PubSub permite insertar mensajes en
un subconjunto de los clientes de un centro
un grupo determinado en un centro
un subconjunto de clientes de un grupo
Estas API permiten una gran cantidad de casos de uso, lo que permite a los desarrolladores centrarse en una lógica de negocios única, a la vez que se aseguran de que Web PubSub ofrece baja latencia (<100 ms),alta disponibilidad y escala masiva (millones de conexiones simultáneas).
Pasos siguientes
En el paso siguiente, exploraremos cómo trabajar con el sistema de eventos de Web PubSub, necesario para compilar aplicaciones web completas.
