Всем привет! Меня зовут Герман Панов и в этой статье мы разработаем табличный редактор - аналог Google Sheets (в упрощенном виде), работающий на основе вебсокетов, чтобы познакомиться со способами применения этой технологии в браузерах.  Поскольку цель - ознакомление, код будет не очень «чистым», но для базового примера этого будет достаточно. В качестве серверной платформы будем использовать Node.js, также потребуется пакет ws, предоставляющий API для работы с вебсокетами на сервере. Создать табличный редактор в соответствии со следующими требованиями: Функциональные требования редактирование ячеек таблицы сохранение состояния таблицы возможность одновременного использования несколькими пользователями в режиме реального времени Нагрузочные требования Требований по нагрузке нет Протокол WebSocket(«веб-сокет») предоставляет возможность организации постоянного двустороннего обмена данными между браузером и сервером. Сервер в любой момент может прислать сообщение клиенту, независимо, запрашивал ли его клиент или нет. Для этого браузеру нужно установить соединение с сервером посредством handshake («рукопожатия») Браузер, при помощи специальных заголовков, проверяет, поддерживает ли сервер обмен данными по Websocket, и если да, «общение» будет происходить уже по WebSocket.  На прикладной уровень текстовые сообщения приходят в кодировке UTF-8, для удобной обработки используется JSON формат. Посмотреть сообщения, получаемые по WebSocket, можно во вкладке Network -> WS в девтулзах браузера. В качестве транспортного протокола выступает TCP. Поскольку данные фрагментируются, по Websocket можно отправлять даже сообщения большого объема. Каждое будет разбиваться на фреймы, которые по своей сути похожи на http-сообщения. Фрейм - это небольшой заголовок + «полезная нагрузка». Заголовок содержит служебную информацию о фрейме и отправляемых данных. Полезная нагрузка - это любые данные приложения, аналогичные тексту http-сообщения. Вид фрейма: В браузере есть API для работы с вебсокетами, для установления соединения необходимо создать объект Websocket, передав URL в качестве параметра. По аналогии с HTTP есть два типа соединения: с шифрованием (wss) и без (ws). Для работы с данными нужно определить колбэк-функции у созданного объекта. Есть 3 типа обработчиков для сетевых событий: onopen, onerror, onclose и один обработчик для событий отправки сообщений: onmessage. (Подробнее можно почитать тут).  Для отправки данных в сокет существует метод send. На сервере будем использовать популярную WebSocket клиент-серверную библиотеку ws для Node.js. Предоставляемое API очень похоже на браузерное. Полный список инструментов, поддерживающих работу с WebSocket можно посмотреть здесь В основном WebSocket используется для сервисов, которым необходим постоянный обмен данными: Игры Социальные сети и чаты Торговые площадки Умный дом Потребуется установить платформу Node.js. Инструкцию по установке можно найти на официальном сайте Проект будет состоять из двух файлов: HTML-файл с разметкой, стилями и скриптом для отрисовки клиентской части JS-файл с серверной логикой, описывающей взаимодействие по сети Создадим скелет проекта: Создадим отдельный каталог под проект. Инициализируем новый git-репозиторий в созданном каталоге. Инициализируем новый npm-пакет, который будет содержать код проекта. Установим необходимые для работы пакеты. Из сторонних зависимостей нам потребуется только пакет ws. Создадим файл .gitignore, в который запишем каталог "node_modules", поскольку тянуть каталог с установленными зависимостями в git не стоит. Базовое окружение настроено, можно приступать к написанию приложения. Организуем следующую структуру проекта: node_modulespublic/index.htmlsrc/server.js.gitignorepackage‑lock.jsonpackage.json Определим задачи сервера: Сохранение текущего состояния истории сообщений. Отправка текущего состояния при подключении нового пользователя. При получении нового сообщения, разослать его всем подключенным клиентам. Приступим к написанию серверной логики. Конфигурирование Объявим необходимые зависимости  Подготовим документ, который будет возвращать http-сервер  Создадим http-сервер Задаем адрес хоста и порт, который будет прослушивать сервер. Создадаем новый экземпляр сервера, в колбэке указываем, что на все запросы сервер будет возвращать подготовленный index.html документ с 200 кодом ответа. Запускаем сервер, чтобы он начал прослушивать заданный хост и порт. Выведем в логи информацию об успешном начале работы сервера.  Создадим Websocket-сервер, работающий поверх http-сервера  Создадим массив для хранения истории сообщений  Логика сетевого взаимодействия Новые подключения  Обработка нового подключения При новом подключении будем выводить в логи ip-адрес подключившегося клиента и осуществлять рассылку текущей истории сообщений.  Обработка получения сообщения При получении нового сообщения будем выводить его в логи, добавлять в массив уже имеющихся сообщений и рассылать остальным клиентам.  Обработка отключения клиента При отключении клиента будем выводить в логи его ip-адрес.  Вспомогательные функции Функция рассылки истории сообщений  Функция рассылки нового сообщения На этом серверная логика заканчивается. В клиенткой части будет таблица, которую можно заполнять данными. При нажатии на любую ячейку, она подсвечивается и становится доступна для редактирования. В public/index.html будет все: разметка, стили, динамика. Это необходимо сделать именно в index.html, так как сервер отдает только его. Определим струтуру html документа  Сконфигурируем таблицу  Создадим объект для хранения значений ячеек таблицы  Инициируем Websocket-соединение с сервером  Логика получения события  Логика отправки события На каждой ячейке висит слушатель события нажатия клавиши (keyup). При вводе данных в ячейку, слушатель отработает и сгенерирует событие, из которого можно будет "вытащить" адрес ячейки, в которой оно произошло и введенный текст. Далее отравляем эти данные в сокет  Вспомогательные функции Функция генерации таблицы  Функция генерации строки  Функция заполнения таблицы  Отрисовка таблицы Для отрисовки таблицы вызовем подготовленные вспомогательные функции генерации и заполнения таблицы  Стили Если вы выполнили все шаги правильно, то при запуске сервера вы увидите сообщение об успешном старте Теперь, если зайти на http://127.0.0.1:8000/ откроется редактируемая таблица. Запустив несколько экземпляров браузера можно посмотреть, как все работает. Проверьте, что при новом подключении откроется заполненная данными таблица, если в нее уже вносились какие-либо изменения. Посмотрев консоль запущенного сервера, можно увидеть логи о происходящих событиях. Также все отправляемые/получаемые сообщения можно посмотреть на вкладке Network -> WS в девтулзах браузера   Код проекта целиком можно посмотреть на Github На этом все. Надеюсь материал был кому-то полезен. Если обнаружите ошибку или неточность, напишите об этом в комментариях :) RFC 6455: The WebSocket Protocol Browser websocket-interface WebSocket Сетевые запросы. WebSocket Websocket сервер на Node.js   JavaScript/TypeScript разработчик