09

Signals, SSE

Signals, Server-sent Events

Цель: изучить технологию server-sent events, создать интерфейс используя сигналы для его реактивности.

Содержание и порядок выполнения лабораторной работы:

  1. Изучить материал в источниках.
  2. Создать от ветки main ветку lab9.
  3. Задачей работы является создать интерфейс для отображения счета для вариантов камень, ножницы, бумага (количество выигрышей, проигрышей и общего количества раундов).
  4. Создать документ html с title «ФИО - Лабораторная работа №9».
  5. Добавить кнопку “Следить за играми”, при нажатии на которую создается экземпляр EventSource и начинается обработка поступающих данных. URL для EventSource - http://194.67.93.117:80/rps/stream. Событие: round, данные формата JSON {player1: "Камень"/"Ножницы"/"Бумага", player2: "Камень"/"Ножницы"/"Бумага"}.
  6. Добавить кнопку “Остановить”, которая закрывает соединение.
  7. Реализовать Signal и Effect используя классы.
  8. Реализовать класс компонента для отображения результатов (заголовок, количество выигрышей, проигрышей и общего количества раундов).
  9. Создать необходимые компоненты, сигналы и эффекты для связи входящих по SSE данных и будущего отображения в интерфейсе.
  10. Помните о валидности HTML.
  11. Провести ручное тестирование в браузере.
  12. Отформатировать документы.
  13. Убедиться, что нет замечаний от ESLint.
  14. Зафиксировать результаты работы с помощью системы контроля версий git и отправить ветку lab8 в репозиторий на github.
  15. Загрузить проект на Render через ручную загрузку (manual deploy).

Требования к JS:

  • HTML код валиден.
  • Отсутствуют ошибки ESLint в панели Problems в VS Code.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

  1. Использование server-sent events
  2. EventSource
  3. Наблюдатель
  4. The Observer Pattern
  5. Реактивность в программировании
  6. Patterns for Reactivity with Modern Vanilla JavaScript
  7. Reactive UI
  8. Proposal Signals
  9. Signal
  10. Signals vs. Observables, what’s all the fuss about?

Вопросы для защиты

  1. Принцип работы SSE?
  2. Использование объекта EventSource.
  3. Применение реактивности.
  4. Использование состояния/state.
  5. Шаблон наблюдатель (классы, поля, методы).
  6. Идея Signal, его устройство.
  7. Что происходит когда создается effect.
  8. Отличие Signal и Observer.
  9. Организация частей интерфейса в компоненты (классы).
Предыдущая