Создание «Google Sheets» через Websockets на Node.js25.02.2023 12:46

0b9c393bc0a9a2c3c9a2cc984ad70689.jpg

Введение

Всем привет! Меня зовут Герман Панов и в этой статье мы разработаем табличный редактор — аналог Google Sheets (в упрощенном виде), работающий на основе вебсокетов, чтобы познакомиться со способами применения этой технологии в браузерах.

Поскольку цель — ознакомление, код будет не очень «чистым», но для базового примера этого будет достаточно. В качестве серверной платформы будем использовать Node.js, также потребуется пакет ws, предоставляющий API для работы с вебсокетами на сервере.

Задача

Создать табличный редактор в соответствии со следующими требованиями:

Функциональные требования

  • редактирование ячеек таблицы

  • сохранение состояния таблицы

  • возможность одновременного использования несколькими пользователями в режиме реального времени

Нагрузочные требования

Теория. Протокол Websocket

Протокол WebSocket(«веб-сокет») предоставляет возможность организации постоянного двустороннего обмена данными между браузером и сервером. Сервер в любой момент прислать сообщение клиенту, независимо, запрашивал ли его клиент или нет. Для этого браузеру нужно установить соединение с сервером посредством handshake («рукопожатия»)

Браузер, при помощи специальных заголовков, проверяет, поддерживает ли сервер обмен данными по Websocket, и если да, «общение» будет происходить уже по WebSocket.

5810d9cda921b9e6891d61e2fdd0074a.png

На прикладной уровень текстовые сообщения приходят в кодировке UTF-8, для удобной обработки используется JSON формат. Посмотреть сообщения, получаемые по WebSocket, можно во вкладке Network → WS в девтулзах браузера.

В качестве транспортного протокола выступает TCP. Поскольку данные фрагментируются, по Websocket можно отправлять даже сообщения большого объема. Каждое будет разбиваться на фреймы, которые по своей сути похожи на http-сообщения.

Фрейм — это небольшой заголовок + «полезная нагрузка». Заголовок содержит служебную информацию о фрейме и отправляемых данных. Полезная нагрузка — это любые данные приложения, аналогичные тексту http-сообщения.

Вид фрейма:

200f5345cf142b8c3b25a99f8ff47e5f.png

В браузере есть API для работы с вебсокетами, для установления соединения необходимо создать объект Websocket, передав URL в качестве параметра. По аналогии с HTTP есть два типа соединения: с шифрованием (wss) и без (ws).

Для работы с данными нужно определить колбэк-функции у созданного объекта. Есть 3 типа обработчиков для сетевых событий: onopen, onerror, onclose и один обработчик для событий отправки сообщений: onmessage. (Подробнее можно почитать тут).


Для отправки данных в сокет существует метод send.

const ws = new WebSocket('ws://localhost/echo');

ws.onopen = event => {
    alert('onopen');

    ws.send("Hello Web Socket!");
};

ws.onmessage = event => {
    alert('onmessage, ' + event.data);
};

ws.onclose = event => {
    alert('onclose');
};

ws.onerror = event => {
    alert('onerror');
};

На сервере будем использовать популярную WebSocket клиент-серверную библиотеку ws для Node.js. Предоставляемое API очень похоже на браузерное.

Полный список инструментов, поддерживающих работу с WebSocket можно посмотреть здесь

В основном WebSocket используется для сервисов, которым необходим постоянный обмен данными:

Реализация. Написание редактора

Потребуется установить платформу Node.js. Инструкцию по установке можно найти на официальном сайте

Проект будет состоять из двух файлов:

  • HTML-файл с разметкой, стилями и скриптом для отрисовки клиентской части

  • JS-файл с серверной логикой, описывающей взаимодействие по сети

Создадим скелет проекта:

  1. Создадим отдельный каталог под проект.

  2. Инициализируем новый git-репозиторий в созданном каталоге.

  3. Инициализируем новый npm-пакет, который будет содержать код проекта.

  4. Установим необходимые для работы пакеты. Из сторонних зависимостей нам потребуется только пакет ws.

  5. Создадим файл .gitignore, в который запишем каталог «node_modules», поскольку тянуть каталог с установленными зависимостями в git не стоит.

# Создадим каталог проекта и перейдем в него
mkdir websocket-example && cd websocket-example

# Инициализируем git-репозиторий
git init

# Инициализируем npm-пакет, который будет содержать код проекта
npm init -y

# Установим библиотеку для работы с WebSocket на сервере
npm install ws

# Укажем git не учитывать каталог с установленными зависимостями
touch .gitignore && echo "node_modules" >> .gitignore

Базовое окружение настроено, можно приступать к написанию приложения.

Организуем следующую структуру проекта:

node_modules
public/index.html
src/server.js
.gitignore
package‑lock.json
package.json

Определим задачи сервера:

  • Сохранение текущего состояния истории сообщений.

  • Отправка текущего состояния при подключении нового пользователя.

  • При получении нового сообщения, разослать его всем подключенным клиентам.

Приступим к написанию серверной логики.

server.js

  1. Конфигурирование

    • Объявим необходимые зависимости

      const ws = require("ws");
const fs = require("fs");
const http = require("http");

    • Подготовим документ, который будет возвращать http-сервер

      const index = fs.readFileSync("public/index.html", "utf8");

    • Создадим http-сервер

      1. Задаем адрес хоста и порт, который будет прослушивать сервер.

      2. Создадаем новый экземпляр сервера, в колбэке указываем, что на все запросы сервер будет возвращать подготовленный index.html документ с 200 кодом ответа.

      3. Запускаем сервер, чтобы он начал прослушивать заданный хост и порт. Выведем в логи информацию об успешном начале работы сервера.

      const HOST = "127.0.0.1";
const PORT = 8000;

const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end(index);
});

server.listen(PORT, HOST, () => {
    console.log(`Server running at http://${HOST}:${PORT}/`);
});

    • Создадим Websocket-сервер, работающий поверх http-сервера

      const wss = new ws.WebSocketServer({ server });

    • Создадим массив для хранения истории сообщений

      const messages = [];

  2. Логика сетевого взаимодействия

    • Новые подключения

      /*
  Класс WebSocketServer имеет метод on, позволяющий погрузиться
  внутрь жизненного цикла клиентского соединения и производить обработку каких-либо событий.

  Метод принимает первым аргументом событие, а вторым колбэк на это событие

  Типы событий: "connection" | "message" | "error" | "close"

  Вторым аргументом передается колбэк, параметрами которого будут
  текущее подключение и запрос, позволяющий получить служебную информацию
*/

wss.on("connection", (websocketConnection, req) => {
    // здесь будет логика взаимодействия
});

    • Обработка нового подключения

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

      wss.on("connection", (websocketConnection, req) => {
    const ip = req.socket.remoteAddress;

    console.log(`[open] Connected ${ip}`);

	broadcastMessages(messages, websocketConnection);
});

    • Обработка получения сообщения

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

      wss.on("connection", (websocketConnection, req) => {
    const ip = req.socket.remoteAddress;
    console.log(`[open] Connected ${ip}`);

	broadcastMessages(messages, websocketConnection);

    websocketConnection.on("message", (message) => {
        console.log("[message] Received: " + message);

		messages.push(message);

        broadcastMessage(message, websocketConnection);
    });
});

    • Обработка отключения клиента

      При отключении клиента будем выводить в логи его ip-адрес.

      wss.on("connection", (websocketConnection, req) => {
    const ip = req.socket.remoteAddress;
    console.log(`[open] Connected ${ip}`);

	broadcastMessages(messages, websocketConnection);

    websocketConnection.on("message", (message) => {
        console.log("[message] Received: " + message);

		messages.push(message);

        broadcastMessage(message, websocketConnection);
    });

    websocketConnection.on("close", () => {
        console.log(`[close] Disconnected ${ip}`);
    });
});

    • Вспомогательные функции

      • Функция рассылки истории сообщений

        function broadcastMessages(messages, client) {
    messages.forEach((message) => {
        if (client.readyState === ws.OPEN) {
            client.send(message, { binary: false });
        }
    });
}

      • Функция рассылки нового сообщения

        /*
  Доступ к списку текущих подключений осуществляется
  через свойство clients экземпляра сервера.

  Не забудем проверить, что клиент готов к получению и исключим клиента,
  сгенерировавшего это событие (у него оно уже есть).
*/

function broadcastMessage(message, websocketConnection) {
    wss.clients.forEach((client) => {
        if (client.readyState === ws.OPEN && client !== websocketConnection) {
            client.send(message, { binary: false });
        }
    });
}

На этом серверная логика заканчивается.

index.html

В клиенткой части будет таблица, которую можно заполнять данными. При нажатии на любую ячейку, она подсвечивается и становится доступна для редактирования.

049b2bb036780f3c552c2609fc868b61.png

В public/index.html будет все: разметка, стили, динамика. Это необходимо сделать именно в index.html, так как сервер отдает только его.

  • Определим струтуру html документа

  • Сконфигурируем таблицу

    const COLUMNS = ["A", "B", "C", "D", "E", "F", "G", "I", "K", "L", "M", "O"];
const ROWS_COUNT = 30;

const table = document.querySelector("#table");

  • Создадим объект для хранения значений ячеек таблицы

    const cells = {};

  • Инициируем Websocket-соединение с сервером

    const HOST = "127.0.0.1";
const PORT = "8000";

const API_URL = `ws://${HOST}:${PORT}/`;

const socket = new WebSocket(API_URL);

  • Логика получения события

    socket.onmessage = function (event) {
    const data = JSON.parse(event.data);
  
    const cell = cells[data.cell];
  
    cell.value = data.value;
};

  • Логика отправки события

    На каждой ячейке висит слушатель события нажатия клавиши (keyup). При вводе данных в ячейку, слушатель отработает и сгенерирует событие, из которого можно будет «вытащить» адрес ячейки, в которой оно произошло и введенный текст.

    Далее отравляем эти данные в сокет

    function onKeyup(event) {
    const message = {
        cell: event.target.id,
        value: event.target.value,
    };
  
    socket.send(JSON.stringify(message));
}

  • Вспомогательные функции

    • Функция генерации таблицы

      function generateTable(table, columns) {
	const tr = document.createElement("tr");

    tr.innerHTML =
		    "" +
	      columns.map((column) => `${column}`).join("");

    table.appendChild(tr);
}

    • Функция генерации строки

      function generateRow(table, rowIndex, columns) {
    const tr = document.createElement("tr");

    tr.innerHTML =
        `${rowIndex}` +
        columns
            .map(
                (column) =>
                    ``
            )
            .join("");

    table.appendChild(tr);

    columns.forEach((column) => {
        const cellId = `${column}${rowIndex}`;

        const input = document.getElementById(cellId);

        input.addEventListener("keyup", onKeyup);

        cells[cellId] = input;
    });
}

    • Функция заполнения таблицы

      function fillTable(table) {
    for (let i = 1; i <= ROWS_COUNT; i++) {
    	generateRow(table, i, COLUMNS);
    }
}

  • Отрисовка таблицы

    Для отрисовки таблицы вызовем подготовленные вспомогательные функции генерации и заполнения таблицы

    generateTable(table, COLUMNS);

fillTable(table);

  • Стили

    *,
html {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;

    position: relative;
}

input {
    margin: 2px 0;
    padding: 4px 9px;

    box-sizing: border-box;

    border: 1px solid #ccc;

    outline: none;
}

input:focus {
    border: 1px solid #0096ff;
}

table,
table td {
    border: 1px solid #cccccc;
}

td {
    height: 20px;
    width: 80px;

    text-align: center;
    vertical-align: middle;
}

Если вы выполнили все шаги правильно, то при запуске сервера вы увидите сообщение об успешном старте

websocket-example git:(main) ✗ node src/server.js
Server running at

Теперь, если зайти на http://127.0.0.1:8000/ откроется редактируемая таблица.

Запустив несколько экземпляров браузера можно посмотреть, как все работает. Проверьте, что при новом подключении откроется заполненная данными таблица, если в нее уже вносились какие-либо изменения.

441d93aa3430d45d3d97d067c8b366dd.png

Посмотрев консоль запущенного сервера, можно увидеть логи о происходящих событиях. Также все отправляемые/получаемые сообщения можно посмотреть на вкладке Network → WS в девтулзах браузера

server.js

const ws = require("ws");
const fs = require("fs");
const http = require("http");

const index = fs.readFileSync("public/index.html", "utf8");


const HOST = "127.0.0.1";
const PORT = 8000;

const server = http.createServer((req, res) => {
    res.writeHead(200);
    res.end(index);
});

server.listen(PORT, HOST, () => {
    console.log(`Server running at http://${HOST}:${PORT}/`);
});

const wss = new ws.WebSocketServer({ server });

const messages = [];

wss.on("connection", (websocketConnection, req) => {
    const ip = req.socket.remoteAddress;
    console.log(`[open] Connected ${ip}`);

    broadcastMessages(messages, websocketConnection);

    websocketConnection.on("message", (message) => {
        console.log("[message] Received: " + message);

        messages.push(message);

        broadcastMessage(message, websocketConnection);
    });

    websocketConnection.on("close", () => {
        console.log(`[close] Disconnected ${ip}`);
    });
});


function broadcastMessages(messages, client) {
    messages.forEach((message) => {
        if (client.readyState === ws.OPEN) {
            client.send(message, { binary: false });
        }
    });
}

function broadcastMessage(message, websocketConnection) {
    wss.clients.forEach((client) => {
        if (client.readyState === ws.OPEN && client !== websocketConnection) {
            client.send(message, { binary: false });
        }
    });
}

index.html

Код проекта целиком можно посмотреть на Github

На этом все. Надеюсь материал был кому-то полезен. Если обнаружите ошибку или неточность, напишите об этом в комментариях :)

Источники

© Habrahabr.ru