Автор оригинала: Amber Wilkie.
На днях некоторые прекрасные разработчики в моей компании готовились высказать страницу обновления состояния. Мы проверили его широко Но теперь мы собирались поставить его в масштабе.
Я беспокоился о своей зависимости на сервере API, который действовал недавно. Мы не определили корневую причину наших проблем на стороне API, и это приложение использует опрос – то есть постоянно спрашивает API для новых данных. Если этот API снизится, требуется наше приложение с ним, и увеличенная нагрузка из нашего приложения может усугубить проблемы, которые мы видим.
Один из способов уйти от опроса – интегрировать Сигнал , постоянный инструмент подключения, который использует Websockets и связанные с ними технологии, чтобы позволить серверам толчок Обновления клиентов.
Технология написана в .NET, и большая часть документации вы найдете вокруг сети, используют C #. Этот учебник будет охватывать базовую реализацию JavaScript.
Открытый Signalr создает постоянное соединение между клиентом и сервером. Он использует WebSockets First, затем LongPolling и другие технологии, когда WebSockets недоступны.
Как только клиент и сервер создали соединение, SIGNAR может использоваться для «трансляции» сообщений клиенту. Когда клиент получает эти сообщения, он может выполнять функции, такие как обновление магазина.
Наиболее распространенным примером, приведенным для WebSockets, является приложением для чата – новые данные должны быть показаны пользователю без ее необходимости обновлять страницу. Но если ваш сервер получает какие-либо обновления о смене данных, которые вам нужно показать клиенту, это может быть услугой для вас.
Возможно, потому что он был разработан Microsoft, Siverr имеет очень чистую интеграцию на платформе Azure Cloud. Как и другие функциональные приложения, вы создадите «в триггере» и привязку «OUT» для вещательных сообщений.
Расходы
Поскольку я был первым, кто посмотрел на эту технологию в масштабе в моей компании, мне нужно немного копаться о расходах на эту услугу. Azure Azure Charges около 50 долларов в месяц для одного «единицы» сигнализирующего сервиса – 1000 одновременных соединений и миллиона сообщений в день. Существует также бесплатный сервис для тех, кто играет вокруг или малого бизнеса.
Это было действительно хорошо, что я выкопал в те числа, как вы увидите немного ниже.
Создайте сигнальный концентратор
Давайте начнем. Нам понадобится сигнализирующий концентратор, два функциональных приложения и код клиента, чтобы добавить в наше веб-приложение.
Перейти к Synolr -> Добавить и заполнить свои данные. Для работника требуется секунда для создания вашего сервиса. Убедитесь, что вы предоставляете услугу достойного имени ресурсов, так как вы будете использовать его с остальными приложениями. Также вытащите клавиши -> Строка подключения для использования в нашем привязке.
Поскольку мы работаем с Azure, мы собираемся создавать функциональные приложения к интерфейсу с Signalr. Я написал начало работы Блог пост О функционировании Azure Apps некоторое время назад.
В этом руководстве предполагают, что вы уже знаете, как работать с функциональными приложениями. Естественно, вы можете работать с этими библиотеками без привязки магии, но вам придется сделать свой собственный перевод кода .NET!
Приложение подключения
Первое, что нам нужно, это способ для клиентов запросить разрешение на подключение к нашему сервису Signalr. Код этой функции не может быть более базовым:
module.exports = function (context, _req, connectionInfo) {
context.res = { body: connectionInfo }
context.done()
}
Магия все происходит в привязках, где мы тянуемся в нашу службу Synyr. Trigger – это запрос HTTP, который может позвонить нашему клиенту.
{
"bindings": [
{
"authLevel": "function",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": ["get"]
},
{
"type": "signalRConnectionInfo",
"name": "connectionInfo",
"hubName": "your-signalr-service-name",
"connectionStringSetting": "connection-string",
"direction": "in"
}
]
}
Клиентский код
Чтобы получить доступ к этому методу, наш клиент позвонит:
import * as signalR from '@microsoft/signalr'
const { url: connectionUrl, accessToken } = await axios
.get(url-to-your-connection-app)
.then(({ data }) => data)
.catch(console.error)
Наше функциональное приложение вернет URL и AccessToken. , что мы можем использовать для подключения к нашему сервису Synyr. Обратите внимание, что мы создали привязку с HUBNAME нашего Syvicer Service – это означает, что у вас могут быть несколько подключений к различным ступицам в одном клиенте.
Теперь мы готовы начать отправлять сообщения. Снова начнем с функционального приложения. Требуется в триггере и выделяет сообщение Synigrr.
Триггер может быть другим, использующим сообщение сообщение, событие из концентратора событий или любых других поддерживаемых азаронизации. Мне нужно вызвать изменения базы данных.
{
"bindings": [
{
"type": "cosmosDBTrigger",
"name": "documents",
"direction": "in",
[...]
},
{
"type": "signalR",
"name": "signalRMessages",
"hubName": "your-signalr-service-name",
"connectionStringSetting": "connection-string",
"direction": "out"
}
]
}
И код. Опять же, простые.
module.exports = async function (context, documents) {
const messages = documents.map(update => {
return {
target: 'statusUpdates',
arguments: [update]
}
})
context.bindings.signalRMessages = messages
}
Сообщения Signalr принимают цель и Аргументы объект. Как только ваши триггеры начинают стрелять, вот все, что вам нужно, чтобы начать с SyvicTR на сервере! Microsoft сделала все это очень легко для нас.
Клиентский код
На стороне клиента все немного сложнее, но не неуправляемо. Вот остальная часть клиентского кода:
const connection = new signalR.HubConnectionBuilder()
.withUrl(connectionUrl, { accessTokenFactory: () => accessToken })
// .configureLogging(signalR.LogLevel.Trace)
.withAutomaticReconnect()
.build()
connection.on('statusUpdates', data => {
// do something with the data you get from SignalR
})
connection.onclose(function() {
console.log('signalr disconnected')
})
connection.onreconnecting(err =>
console.log('err reconnecting ', err)
)
connection
.start()
.then(res => // Potential to do something on initial load)
.catch(console.error)
Мы потребляем ConnectionUrl и AccessToken. Мы получили от функции Connect ранее, затем создайте наше соединение с помощью этих значений.
Затем мы слушаем сообщения с общим ключом (для меня, это statusupdate ) и предоставляют обработчики для функций закрытия и повторного подключения.
Наконец, мы начинаем соединение. Здесь мы можем предоставить начальную функцию нагрузки. Мне нужно было извлечь исходные данные, чтобы показать текущее состояние. Если вы создаете приложение чата, вам может потребоваться привлечь здесь первоначальные сообщения.
Это (почти, может быть) все, что вам нужно, чтобы начать работу в JavaScript с Signalr на Azure!
Но, может быть, вы, как я, надо отправить много сообщений многим пользователям.
Когда я впервые поставил это в производство, в подборке пользователей я пробивал каждое соединение с каждым обновлением. Поскольку код клиента может обладать сообщениями, которые он слушает, я использовал что-то вроде statusupdates - $ {userid} Так что клиент увидит только свои собственные обновления.
Это может работать нормально, если у вас очень низкий объем, и тем более общим является отличным, если все в вашей системе нужны одно и то же сообщение. Но статус, с которым я работаю, особенно для человека.
Помните, как Azure Charges за «блок» и каждый блок имеет один миллион сообщений? Я ударил это в течение нескольких часов тестирования этого во время не занятого времени.
Azure Counts CoStys Каждое сообщение Signalr должно отправлять как одно сообщение. То есть, если в вашем распоряжении пять соединений, и вы отправляете десять сообщений, что имеет значение 50, а не 10. Это было для меня сюрпризом, а также потребовалось пару большего количества часов исследований.
Мы можем обладать нашим функционным кодом Vishentr для отправки только определенным пользователям. Во-первых, мы обновляем приложение подключения для принятия UserID как запрос параметра:
{
"type": "signalRConnectionInfo",
"name": "connectionInfo",
"userId": "{userId}",
"hubName": "your-signalr-service-name",
"connectionStringSetting": "connection-string",
"direction": "in"
}
Затем мы обновляем функцию вещания для отправки только к этому пользователю:
const messages = documents.map(update => {
return {
target: 'statusUpdates',
userId: update.user.id,
arguments: [update]
}
})
Вещательная служба не будет знать, кто подключился, поэтому вам нужно будет вызвать его с тем, что имеет доступ к уникальному идентификатору, к которому клиент также будет иметь доступ.
Клиентский код просто проходит в UserID в качестве параметра запроса:
const { url: connectionUrl, accessToken } = await axios
.get(`${url-to-your-connection-app}&userId=${userId}`)
.then(({ data }) => data)
.catch(console.error)
Клянусь к вам, единственное место на весь интернет, который я нашел, чтобы дать мне знать, как запросить соединение, используя UserID был ответ на Этот вопрос переполнения стека .
Интернет удивительно, и JavaScript Azure Docs трудно прийти.
- Связыватель клиентских документов JavaScript от Microsoft
- Настройка пользователей и групп при отправке сообщений Synicr – Примеры в C # Но вы можете выяснить, насколько клиент JavaScript будет вести себя и сделать некоторые образованные догадки.
- Сигнальные привязки службы для функций Azure
- Клиентский API
- Работа с группами в Signalr
- Руководство: Аутентификация службы службы Azure Syvicler с функциями Azure
Этот пост изначально появился на wilkie.tech .
Оригинал: “https://www.freecodecamp.org/news/getting-started-with-signalr-in-azure-using-javascript/”