Небольшой пример использования событий, отправленных сервером HTML, в основном веб-API ASP.Net.
Приложение представляет собой счетчик, который автоматически увеличивается каждую секунду. Пользователь может приостановить или возобновить счетчик, а также установить для него заданное значение.
Счетчик хранится в памяти на сервере. Изменения в сеансе браузера будут распространены на все остальные открытые сеансы.
События, отправленные сервером, — это веб-API, который позволяет отправлять сообщения с сервера на JavaScript с помощью потоков HTTP.
Это не единственный способ отправки сообщений с сервера, но он, безусловно, простой и довольно элегантный.
Код Javascript, который обрабатывает отправленные сервером события, находится в файлеstream.js и выглядит следующим образом:
function readStream()
{
const evtSource = new EventSource('/Counter/Stream');
evtSource.onmessage = function(event) {
const el = document.getElementById('counter');
const { value } = JSON.parse(event.data);
el.textContent = value;
}
}
Этот репозиторий содержит небольшое автономное веб-приложение, которое можно использовать в качестве ссылки или в качестве шаблонного кода для использования событий, отправленных сервером, с серверной частью ASP.Net Core.
Реализацию конечной точки потоковой передачи HTTP можно найти в CounterController.cs и выглядит следующим образом. Он адаптирован из этого ответа StackOverflow.
[HttpGet]
[Route("Stream")]
public async Task StreamCounter(CancellationToken cancellationToken)
{
_logger.LogInformation("Start counter streaming.");
Response.StatusCode = 200;
Response.Headers.Add("Content-Type", "text/event-stream");
_counter.CounterUpdated += StreamValue;
while (!cancellationToken.IsCancellationRequested) {
await Task.Delay(1000);
}
_counter.CounterUpdated -= StreamValue;
_logger.LogInformation("Stop counter streaming.");
async void StreamValue(object sender, int value)
{
var messageJson = JsonConvert.SerializeObject(_counter, _jsonSettings);
await Response.WriteAsync($"data:{messageJson}nn");
await Response.Body.FlushAsync();
}
}
Состояние (счетчик) хранится в одноэлементном сервисе PersistentCounter.
Служба запускает событие каждый раз, когда обновляется значение счетчика. Контроллер подписывается на это событие и отправляет новое значение клиенту после каждого изменения.
Чтобы запустить приложение, просто введите следующие команды в основной папке репозитория:
dotnet build
dotnet run
Убедитесь, что вы уже установили пакет SDK для .NET 5.
Откройте браузер и перейдите по адресу https://localhost:5001
.
Вы получите сообщение об ошибке сертификата, поскольку я не использую действительный зарегистрированный сертификат.
Ниже приводится лишь некоторая справочная информация, дающая некоторый контекст. Вам не нужно читать его, чтобы понять код.
Этот репозиторий представляет собой небольшую часть доказательства концепции переноса существующего настольного приложения в веб-приложение.
Использование ASP.Net для внешнего интерфейса, вероятно, будет самым простым способом сделать это. Однако мне очень нравится React/Redux для веб-разработки, и у меня больше опыта работы с ним, чем с ASP. Поэтому я решил использовать ASP для бэкэнда REST и React для фронтенда.
Идиоматическое приложение .Net широко использует шаблон событий.
Моя идея состоит в том, чтобы написать какое-то промежуточное программное обеспечение, которое подписывается на все события, производимые внутри приложения, сериализует их в JSON и отправляет их клиенту с помощью событий, отправленных сервером .
Клиент будет реагировать на события, отправляя некоторые действия Redux, которые обновят состояние интерфейса.
Серверная часть будет предоставлять конечные точки REST для всех других взаимодействий с внешним интерфейсом. Ничего особенного в этом нет.
Промежуточное ПО будет играть ту же роль, что и одноэлементный сервис PersistentCounter в этом репозитории.
В этом репозитории используется только простой JavaScript. Никаких React или Redux. Моя цель здесь — оценить передачу сообщений через потоки HTTP. Фронтенд не имеет значения.