Уведомления о событиях от клиентов
В первых трех статьях "кратких руководств" мы узнали два полезных шаблона связи с помощью Web PubSub для обмена сообщениями в режиме реального времени (миллион+).
- Pub/Sub среди клиентов, которые освобождают сервер приложений от сложности управления постоянными подключениями
- Отправка сообщений клиентам с сервера приложений сразу после того, как новые данные будут доступны
В этом кратком руководстве мы узнаем о системе событий Web PubSub, чтобы сервер приложений могли реагировать на события, такие как когда
- клиент
connected - клиент отправляет объект
message, который требует дальнейшей обработки
Необходимые компоненты
- Ресурс Web PubSub. Если вы не создали его, вы можете выполнить инструкции. Создание ресурса Web PubSub
- Редактор кода, например Visual Studio Code.
- Установка зависимостей для языка, который вы планируете использовать
Создание приложения
Web PubSub — это автономная служба на сервере приложений. Хотя приложение сохраняет свою роль в качестве традиционного HTTP-сервера, Web PubSub заботится о передаче сообщений в режиме реального времени между сервером приложений и клиентами. Сначала мы создадим клиентную программу, а затем серверную программу.
Создание клиента
1. Создание каталога для клиентского приложения
mkdir eventHandlerDemo
cd eventHandlerDemo
# The SDK is available as an NPM module.
npm install @azure/web-pubsub-client
2. Подключение в Web PubSub
Клиент, будь то браузер, мобильное приложение или устройство Интернета вещей, использует URL-адрес клиентского доступа для подключения и проверки подлинности с помощью ресурса.
Этот URL-адрес следует шаблону wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token>.
У клиента может быть несколько способов получения URL-адреса клиентского доступа. Для этого краткого руководства можно скопировать и вставить один из портал Azure, показанный на следующей схеме. Рекомендуется не жестко кодировать URL-адрес клиентского доступа в коде. В рабочей среде обычно настраивается сервер приложений для возврата этого URL-адреса по запросу. Создание URL-адреса клиентского доступа подробно описывает практику.
Создайте файл с именем client.js и добавьте следующий код.
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 to the "connected" event
client.on("connected", (e) => {
console.log(`Connection ${e.connectionId} is connected.`);
});
// You must invoke start() on the client object
// to establish connection with your Web PubSub resource
client.start();
Создание сервера приложений
1. Установите express.js и пакет SDK для сервера Web PubSub
npm init -y
npm install --save express
# Installs the middleware from Web PubSub. This middleware will set up an endpoint for you.
npm install --save @azure/web-pubsub-express
2. Создайте новый файл с именем server.js, который настраивает пустое приложение express
const express = require("express");
const app = express();
app.listen(8080, () => console.log('Server started, listening on port 8080'));
3. Обработка событий
При использовании Web PubSub при наличии определенных действий на стороне клиента (например, когда клиент находится connected или disconnected с ресурсом Web PubSub), сервер приложений может настроить обработчики для реагирования на эти события.
Ниже приведены два важных варианта использования:
- При подключении клиента можно транслировать это состояние всем подключенным клиентам.
- Когда клиент отправляет сообщение в ресурс Web PubSub, вы можете сохранить сообщение в выбранной базе данных.
const express = require("express");
const { WebPubSubEventHandler } = require("@azure/web-pubsub-express");
const app = express();
const HUB_NAME = "myHub1";
let handler = new WebPubSubEventHandler(HUB_NAME, {
path: '/eventhandler', // Exposes an endpoint
onConnected: async (req) => {
console.log(`${req.context.userId} connected`);
},
});
// Registers the middleware with the express app
app.use(handler.getMiddleware());
app.listen(8080, () => console.log('Server started, listening on port 8080'));
Как указано в приведенном выше коде, когда клиент подключается к ресурсу Web PubSub, Web PubSub вызывает веб-перехватчик, обслуживаемый сервером приложений в пути /eventhandler. Здесь мы просто распечатаем userId консоль при подключении пользователя.
Представление localhost
Запустите программу, она должна работать на localhost порту 8080. В наших целях это означает, что ваше локальное экспресс-приложение не может быть достигнуто в Интернете. Таким образом, Web PubSub не может вызвать веб-перехватчик, обслуживаемый по пути /eventhandler.
Существует два способа маршрутизации трафика в localhost, один — предоставить localhost доступ к Интернету с помощью таких средств, как ngrok и TunnelRelay. Другой способ, а также рекомендуем использовать awps-туннель для туннелирования трафика из службы Web PubSub через средство на локальный сервер.
1. Скачивание и установка awps-tunnel
Средство выполняется в Node.js версии 16 или выше.
npm install -g @azure/web-pubsub-tunnel-tool
2. Использование службы строка подключения и запуск
export WebPubSubConnectionString="<your connection string>"
awps-tunnel run --hub myHub1 --upstream http://localhost:8080
Настройка обработчика событий в ресурсе Web PubSub
Теперь нам нужно сообщить ресурсу Web PubSub об этом URL-адресе веб-перехватчика. Обработчики событий можно задать из портал Azure или Azure CLI.
Выберите "Параметры" в меню и нажмите кнопку "Добавить"
Введите имя концентратора. В наших целях введите "myHub1" и нажмите кнопку "Добавить"
На странице обработчика событий настройте следующие поля при использовании
awps-tunnelсредства, шаблон URL-адреса используетtunnelсхему, за которой следует путь:tunnel:///eventhandler
Сохранение конфигурации
Запуск программ
Запуск сервера приложений
node server.js
Запуск клиентской программы
node client.js
Наблюдение за результатом
Вы увидите userId печать в консоли.
Обработка события сообщения
Кроме системных событий, таких как connect, disconnectedconnectedклиент также может отправлять пользовательские события.
Изменение клиентской программы
Остановите клиентную программу и добавьте следующий код в client.js
// ...code from before
client.start();
// The name of the event is message and the content is in text format.
client.sendEvent("message", "sending custom event!", "text");
Изменение серверной программы
Остановите клиентную программу и добавьте следующий код в server.js
// ... code from before
let handler = new WebPubSubEventHandler(HUB_NAME, {
path: "/eventhandler",
onConnected: async (req) => {
console.log(`"${req.context.userId}" is connected.`);
},
// This handler function will handle user system
handleUserEvent: async (req, res) => {
if (req.context.eventName === "message") {
console.log(`Received message: ${req.data}`);
// Additional logic to process the data,
// e.g save message content to database
// or broadcast the message to selected clients.
}
},
});
//... code from before
Снова запустите клиентную программу и серверную программу
Вы должны увидеть как печатные userId , Received message: sending custom event! так и печатные в консоли.
Итоги
В этом руководстве вы узнаете, как работает система событий в Web PubSub. В реальных приложениях система событий может помочь реализовать больше логики для обработки системных и пользовательских событий.