Выходные строить и учиться

В прошлый раз мы построили конвейер ограничения скорости с помощью Rust и обсудили настройку производительности в зависимости от варианта использования.



Предел скорости в Rust — производительность имеет значение
Давайте восстановим предел скорости в Rust на этих выходных.betterprogramming.pub



Для этих длинных выходных давайте создадим компонент информационной панели, который позволит пользователям представлять определенную тему, которую они хотят отслеживать с помощью Twitter Streaming.

Давайте посмотрим на общую схему логической архитектуры.

Как мы видим, нам нужно построить два основных компонента:

  1. Dashboard мы будем использовать фреймворк NextJS поверх ReactJS.
  2. Для сервисного уровня мы будем использовать Rust.
  3. Связь между клиентом и сервером будет представлять собой HTTP RESTful POST и DELETE, а сообщение будет использовать WebSocket.

Я буду использовать простую хэш-карту вместо реализации на уровне БД с точки зрения демонстрации и простоты. Однако это можно легко масштабировать для более сложных вариантов использования, и я оставлю это на ваше усмотрение и воображение. :)

Слой сервисов API Сборка

Основываясь на логической блок-схеме, давайте разберем ее на диаграмму последовательности, чтобы понять, какую конечную точку API нам нужно построить.

В конце концов, есть две основные функциональные конечные точки:

  1. Зарегистрируйте конечную точку для обработки регистрации темы для потоковой передачи и отключения от потоковой передачи [POST, DELETE].
  2. Конечная точка Websocket, чтобы активировать службу WebSocket, разрешить внешнему приложению подключиться и отправить сообщение/данные Twitter Streaming API.

Модальные данные

Зарегистрировать конечную точку [POST, DELETE]

  1. Конечная точка регистрации возвращает интерфейсному интерфейсу UUID, который будет использоваться для создания URI WebSocket для внешнего интерфейса для прослушивания сообщения.
  2. У конечной точки отмены регистрации есть две основные задачи: закрыть сокет и удалить пользователя из хэш-карты времени выполнения.

Конечная точка веб-сокета

Платформа Warp имеет встроенную поддержку WebSocket, и после подключения сокета вы можете сделать следующее:

  1. Разделите входящее соединение WebSocket на отправителя и получателя (в этом случае мы используем только отправителя).

2. Сохраните клиент входящего соединения WebSocket в хэш-карте времени выполнения и активируйте функцию потоковой передачи Twitter.

3. Потоковое вещание в Твиттере. Библиотека TwitterStream отслеживает входящую тему и отправляет ее отправителю WebSocket на подключенный веб-интерфейс.

На данный момент уровень API построен, как и ожидалось. Перейдем к фронтенд части.

Панель инструментов

«Подождите, я думал, вы специалист по бэкенду. Вы сейчас строите интерфейс?» :)

Я начал свою ИТ-карьеру в качестве веб-мастера и шаг за шагом погружался во внешний интерфейс, мобильные устройства, серверную часть и разработку данных, а затем в управление.

Да, конечно, я строю/кодирую интерфейс! Пару лет назад я создавал множество интерфейсных и мобильных приложений.

Мир внешнего интерфейса сильно изменился с появлением различных библиотек, фреймворков и т. д. Тем не менее, основами по-прежнему являются JavaScript и язык разметки HTML.

Мы будем использовать среду веб-разработки NextJS поверх библиотек ReactJS, чтобы завершить сборку этой панели инструментов.

Почему NextJS?

Извините, я не хочу обсуждать, какой фреймворк или библиотеки JavaScript лучше.

В мире внешнего интерфейса их много, например AngularJS, VueJS, ReactJS и т. д. Все они являются хорошими фреймворками или библиотеками.

Однако, в зависимости от вашего проекта/варианта использования, структура вашей команды, набор навыков и потребности могут иметь разные соображения, основанные на ЗА и ПРОТИВ.

Как я всегда говорю, лучшего решения или инструмента не существует. Единственное лучшее решение или инструмент — это то, которое соответствует вашему проекту, варианту использования, контексту и необходимым требованиям.

Причина, по которой я выбрал NextJS в качестве этого инструмента для сборки внешнего интерфейса, заключается в следующей причине с моим контекстом:

  1. Рендеринг на стороне сервера, который может ускорить загрузку моей страницы, потому что мы отображаем предстоящий поток твитов только на основе выбранной нами темы.
  2. Он находится поверх библиотек ReactJS. У меня есть опыт работы как с ReactJS, так и с AngularJS на предыдущих работах, и мне легко начать работу.
  3. промежуточное ПО API. Вы можете создать свой уровень промежуточного программного обеспечения API для связи с внешним API, чтобы завершить необходимую интеграцию и вариант использования.

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

Помимо основных тегов HTML и рендеринга, давайте следовать приведенной выше схеме последовательности операций:

  1. Пользовательский интерфейс инициирует запрос HTTP Post -> возвращает URI WebSocket.

2. Подключитесь к Websocket и прослушайте сообщение.

Поскольку NextJS — это фреймворк поверх ReactJS, он позволяет нам разбить страницу на ряд компонентов.

Многие из этих компонентов часто повторно используются между страницами. В этом случае у нас есть TopicForm и TwitterCard; каждый из них имеет свой контекст деталей рендеринга и функции.

TwitterCard отвечает за отображение твитов сообщений с сервера Websocket.

Положил все это вместе

Заключительные слова

Мы выучили:

  1. Как реализовать сервис WebSocket на Rust?
  2. Как использовать NextJS для подключения и прослушивания WebSocket?
  3. Как подключить Twitter Streaming API и передать сообщение в Rust WebSocket через канал?
  4. Создайте компоненты для компонентов пользовательского интерфейса NextJS.

Спасибо за ваше чтение.