Правила сдачи задания:
- Важно: в рамках этого ДЗ можно использовать любой менеджер пакетов
- Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проекты
- Авто-тесты писать не требуется
- Серверная часть должна быть выложена на Render. Посмотрите инструкцию или документацию, как развертывать серверную часть на Render.
В рамках реализации корпоративного портала вам поручили организовать чат, и, конечно же, вы решили для этого использовать веб-сокеты.
Вам необходимо реализовать и серверную, и клиентскую часть. Серверную часть мы предлагаем вам реализовать на базе пакета ws, который был продемонстрирован на лекции.
При загрузке страницы появляется всплывающее окно, в котором запрашивается никнейм, под которым вы будете зарегистрированы в чате:
Если такой никнейм свободен, то открывается окно чата, в противном же случае вы должны сообщить пользователю о том, что никнейм занят и ему необходимо выбрать другой (продумайте, как вы реализуете это).
Общее окно чата:
Обратите внимание: сообщения всех участников чата (кроме ваших) выравниваются по левому краю, а ваши - по правому.
Важно: You - это не никнейм, это указатель на то, что это Вы.
Важная детально: при отключении пользователя он должен удаляться из списка пользователей в левой части.
Важно: эта задача не является обязательной
В рамках реализации интерфейса для системы управления облачными серверами необходимо организовать для оператора рабочее место, позволяющиее создавать, запускать, останавливать и удалять облачные сервера.
Общий вид рабочего места:
Вам необходимо самостоятельно провести анализ и выбрать технологию для реализации серверной части: REST, SSE, WS, либо их комбинации. Внимательно взвесьте плюсы и минусы каждой технологии при выборе! Поскольку выбор неправильной технологии может обернуться сложностями в реализации и потерями времени.
Информация о конкретном инстансе должна быть представлена в следующем виде:
{
"id": "<uuid>",
"state": "running | stopped"
}Где <id> - автоматически генерируется на сервере, при создании статус - stopped.
Должна быть возможность:
- Создания инстанса (id генерируется автоматически)
- Удаление инстанса по ID
- Изменение состояния (с
runningнаstoppedи соstoppedнаrunning)
Обратите внимание, создание, старт, остановка и удаление инстансов виртуальной машины - это ресурсоёмкая операция, поэтому на все запросы кроме получения списка инстансов, вы отдаёте "пустой" ответ (например, {"status": "ok"} для REST API) и устанавливаете setTimeout на 20 секунд для выполнения операции, например псевдо-код для REST API:
const instances = [];
router.post('/instances', async (ctx) => {
// Каким-то образом, должны сообщить клиенту о том, что получена команда "Create command""
const id = <generate id>;
<write client notification code here>
setTimeout(() => { // <- создаём инстанс только через 20 секунд
instances.push({
id,
state: 'stopped',
});
// Каким-то образом должны сообщить клиенту о том, что команда выполнена, сервер создан
<write client notification code here>
}, 20000);
ctx.response.body = {
status: 'ok'
}
});Клиентская часть должна работать следующим образом:
- При загрузке страницы загружается список инстансов и отрисовывается в виджете управления инстансами (слева)
- Выполняется подключение по нужному протоколу с началом отслеживания событий. Мы предлагаем вам для разделения событий использовать следующие "ключи":
received- сервером получена командаcreated- создан новый инстансstarted- инстанс запущенstopped- инстанс остановленremoved- инстанс удалён
Виджет управления инстансами (слева) работает следующим образом:
- Status - отображает текущий статус
- Actions - кнопки управления состояниями (зависят от текущего статуса) позволяют отправить команду на запуск, остановку или удаление инстанса
- Create new instance - позволяет отправить команду на создание нового инстанса.
Обратите внимание, в виджете управления состояние должно быть синхронизировано с текущим состоянием на сервере. Т.е. если вы получаете информацию с сервера о том, что инстанс стартовал, то это должно быть отображено как в Worklog'е, так и в виджете управления инстансами.
Advanced (необязательная часть): попробуйте реализовать виджет управления инстансами и виджет Worklog в виде отдельных виджетов, не связанных друг с другом и синхронизируйте состояние через State Management.
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Вы делаете портал спортивных трансляций, на которых пользователи могут видеть текстовую трансляцию матча. Поскольку вам нужно получать обновления с сервера, но не отправлять их обратно, достаточно использовать SSE для получения данных.
Необходимо реализовать серверную часть и клиентскую, позволяющие по SSE получать данные с прямого репортажа о футбольном событии
На серверной части генерируйте с произвольным интервалом несколько типов событий:
- Комментарий об игровом действии, например: "Идёт перемещение мяча по полю, игроки и той, и другой команды активно пытаются атаковать" (тип -
action) - Штрафной удар, например: "Нарушение правил, будет штрафной удар" (тип -
freekick) - Гол, например: "Отличный удар! И Г-О-Л!" (тип -
goal)
Генерируйте события в случайном порядке с различной долей вероятности:
- Вероятность первого события - 50%
- Вероятность второго события - 40%
- Вероятность третьего события - 10%
Игра должна стартовать при старте сервера (генерация событий). Максимум сгенерированных событий - 50.
Обратите внимание, все события должны кэшироваться, так, чтобы игрок, подключившийся не с самого начала матча,получал всю предыдущую историю игры.
Клиентская часть должна выглядеть следующим образом:
Обратите внимание, для событий с типом freekick и goal сбоку устанавливаются иконки.
Реализуйте виджет в виде отдельного класса, который сам генерирует для сбея разметку и которому в качестве параметра конструктора передаётся URL для подключения.