В задании будем делать свою версию проекта Place размером 256x256
Клиентский код лежит в папке /client, серверный — в файле server.mjs
Поставь зависимости и запусти сервер. Для этого перейди в директорию задачи и выполни команду npm install. После установки зависимостей, выполни команду npm run dev. После запуска, перейди по адресу localhost:5000
//1. Сейчас цвета палитры захардкожены в файле /client/picker.mjs, cделай так, чтобы цвета запрашивались с сервера в функции drawPalette
//2. На сервере мы будем использовать библиотеку ws для подключения по протоколу WebSocket. Она уже подключена, WebSocket-сервер уже правильно интегрирован с express, запущен и ждёт подключений по тому же порту, что и express.
Сделай так, чтобы WebSocket-сервер начал обрабатывать подключения, т.е. события connection, как в примере
//3. Сделай так, чтобы после подключения, новому клиенту присылался текущий массив состояния поля. Так как от сервера к клиенту будут передаваться разные сообщения, то удобно, чтобы каждое сообщение имело следующую структуру:
{
type: "/* action */", // тип сообщения
payload: {
/* ... */ // контент сообщения
}
}Через веб-сокеты можно отправлять и, соответственно, принимать данные в разных форматах.
Нам же подойдут обычные строки. Чтобы передать объект сообщения в виде строки, его надо предварительно сериализовать, например, с помощью JSON.stringify().
Как принимать и отправлять строковые сообщения уже было показано в примере
//4. Сделай так, чтобы на клиенте при получении сообщения из WebSocket с начальным состоянием поля, заполнялось поле. Для этого измени обработчик события на ws в файле /client/index.mjs. В него сейчас приходят события MessageEvent. Для десериализации данных в событии используй JSON.parse(). Для отрисовки начального состояния используй drawer.putArray()
//5. Сделай так, чтобы при клике на поле, на сервер по WebSocket передавалось сообщение с координатами и цветом. Посылай сообщения с помощью метода send(). Для удобства, используй тот же формат, что и в сообщениях, посылаемых с сервера
//6. Сделай так, чтобы WebSocket-сервер при получении сообщения с координатами и цветом валидировал его на правильность координат и цвета, а затем рассылал всем активным клиентам. Как сделать broadcast посмотри в примере
//7. Сделай так, чтобы новые пиксели не только рассылались остальным клиентам, но и добавлялись в поле, хранимое на стороне сервера. Это нужно, чтобы новые клиенты получали текущее изображение, а не начальное. Как сделаешь — проверь: открой приложение с одной вкладки браузера, нарисуй что-нибудь, затем открой со второй вкладки и убедись, что изображения совпадают
- Удали из обработчика клика на поле отрисовку пикселя. Для этого сделай так, чтобы при
broadcast-е текущему клиенту тоже отправлялось сообщение. А затем сделай так, чтобы отрисовка пикселя происходила только при получении клиентом сообщения изWebSocket. После этого сервер будет полностью контролировать целостность поля для рисования