Клиент javascript

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Установка

Клиент javascript является одним из распространненых типов клиентов в SignalR, который может взаимодействовать с хабом на сервере. Для создания клиента js необходимо добавить в проект специальную библиотеку.

Установка через npm

При использовании npm надо установить пакет @microsoft/signalr:

npm install @microsoft/signalr

Определение пакета в файла package.json:

{
  "version": "1.0.0",
  "name": "signalrapp",
  "private": true,
  "dependencies": {
    "@microsoft/signalr": "3.1.0"
  }
}

Получение из CDN

Также можно использовать сети CDN, которые содержат данную библиотеку. В частности, подключить SignalR на страницу можно по одному из следующих адресов:

https://unpkg.com/@microsoft/signalr@3.1.0/dist/browser/signalr.min.js
https://cdn.jsdelivr.net/npm/@microsoft/signalr/dist/browser/signalr.min.js

Установка через LibMan

В Visual Studio также можно использовать менеджер LibMan для загрузки SignalR в проект:

Подключение к хабу

Допустим, на стороне сервера определен следующий хаб:

public class ChatHub : Hub
{
	public async Task Send(string message, string userName)
	{
		await Clients.All.SendAsync("Receive", message, userName);
	}
}

Чтобы подключиться к хабу, применяется объект signalR.HubConnectionBuilder:

const hubConnection = new signalR.HubConnectionBuilder()
	.withUrl("/chat")
	.build();

Через его метод withUrl передается адрес, по которому доступен хаб. А метод build() собственно создает объек подключения - объект HubConnection, через который мы можем взаимодействовать с хабом.

Отправка данных хабу

Для отправки данных хабу у объекта HubConnection применяется метод invoke(). Например, выше в классе хаба бы определен метод Send, который принимает два параметра. Обратимся к этому методу:

hubConnection.invoke('Send', "Hello SignalR", "Tom");

Первый параметр метода представляет имя метода хаба, к которому идет обращения. Например, в данном случае это метод Send. Все последующие параметры передают данные для параметров метода хаба. Так, метод Send в хабе принимает два строковых параметра. Соответственно в методе invoke мы можем передать для них данные.

Параметры передаются по позиции: второй аргумент метода invoke передает значение для первого параметра метода Send, третий аргумент в invoke - для второго параметра в Send и так далее.

Вызов метода клиента из хаба

Клиент может обращаться к методу хаба, но и заб может вызывать метод на клиенте. Для этого объект HubConnection с помощью метода on должен зарегистрировать функцию, которую сможет вызывать хаб. Например, выше в методе Send в хабе полученные данные транслировались на функцию Receive всем подключенным клиентам:

await Clients.All.SendAsync("Receive", message, userName);

Первый аргумент функции SendAsync как раз представляет название функции в коде клиента, которая будет вызываться. Последующие аргументы передают данные, которые получит функция на клиенте.

В этом случае на клиенте мы могли бы так определить функцию Receive:

hubConnection.on('Receive', function (message, userName) {

	console.log(message);
	console.log(userName);
});

Первый параметр функции on - это название вызываемой хабом функции - в данном случае Receive. Второй параметр - функция, которая получает переданные хабом данные.

Логгирование

У объекта signalR.HubConnectionBuilder есть метод configureLogging(), в который передается уровень логгирования:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/chat")
    .configureLogging(signalR.LogLevel.Information)
    .build();

Все возможные уровни логгирования:

• signalR.LogLevel.None: логгирование отключено

• signalR.LogLevel.Critical: логгирование сообщений об ошибках, которые относятся ко всему приложению в целом

• signalR.LogLevel.Error: логгирование сообшений об ошибках, которые относятся к текущей операции

• signalR.LogLevel.Warning: логгирование сообщений, которые не представляют ошибки

• signalR.LogLevel.Information: логгирование информационных сообщений

• signalR.LogLevel.Debug: логгирование диагностических сообщений, используемых при отладке

• signalR.LogLevel.Trace: логгирование диагностических сообщений с детальной информацией

Конфигурация клиента

Настройка типа транспорта

Для настройки транспорта в методе withUrl() у дополнительного параметра устанавливается свойство transport, которому передаются значения объекта HttpTransportType: WebSockets, LongPolling или ServerSentEvents. По умолчанию используются все эти виды транспорта, но можно указать только один из них:

const hubConnection = new signalR.HubConnectionBuilder()
	.withUrl("/chat", { transport: signalR.HttpTransportType.WebSockets })
	.configureLogging(signalR.LogLevel.Information)
	.build();

Установка нескольких типов транспорта:

const hubConnection = new signalR.HubConnectionBuilder()
	.withUrl("/chat", { transport: signalR.HttpTransportType.WebSockets | signalR.HttpTransportType.LongPolling })
	.configureLogging(signalR.LogLevel.Information)
	.build();

Единственное, что надо учитывать, что сервер тоже должен поддерживать устанавливаемые виды транспорта.

Установка времени таймаута

Свойство serverTimeoutInMilliseconds объекта HubConnection представляет таймаут, в течение которого подключение считается активным. Если в течение этого периода сервер не присылает никакого сообщения, то клиент считает, что подключение к серверу разорвано. И в этом случае вызывается метод onclose(). Рекомендуется устанавливать это значение в два раза большим, чем праметр KeepAliveInterval на стороне сервера. По умолчанию равно 30 секунд (30000 миллисекунд).

Например, установим таймаут в виде 10 минут:

var connection = new signalR.HubConnectionBuilder()
	.withUrl("/chat")
	.configureLogging(signalR.LogLevel.Trace)
	.build();

connection.serverTimeoutInMilliseconds = 1000 * 60 * 10;