WebSockets и HTTP — это протоколы связи, используемые в веб-приложениях, но они служат разным целям и имеют разные характеристики.

Вот сравнение WebSockets и HTTP:

  1. Тип сообщения:

HTTP: HTTP (протокол передачи гипертекста) — это протокол типа "запрос-ответ". Клиенты (обычно веб-браузеры) отправляют HTTP-запросы на сервер, и сервер отвечает запрошенными данными. Это протокол без сохранения состояния, то есть каждый запрос не зависит от предыдущих запросов, и постоянное соединение не поддерживается.

WebSockets: WebSockets, с другой стороны, обеспечивают полнодуплексную связь, обеспечивая двустороннюю связь между клиентом и сервером в режиме реального времени. Он устанавливает постоянное соединение, которое остается открытым, позволяя отправлять и получать данные в обоих направлениях без необходимости инициировать новое соединение для каждого обмена.

2. Накладные расходы на соединение:

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

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

3. Варианты использования:

HTTP. HTTP широко используется для традиционных веб-приложений и RESTful API. Он хорошо подходит для сценариев, в которых клиенты запрашивают ресурсы у сервера и получают ответы.

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

4. Загрузка сервера:

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

WebSockets WebSockets помогают снизить нагрузку на сервер, поддерживая постоянное соединение и обеспечивая эффективную двустороннюю связь, что особенно полезно в ситуациях, когда требуется постоянная связь.

5. Поддержка браузера:

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

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

Таким образом, HTTP хорошо подходит для традиционных веб-приложений, которые включают разовые запросы и ответы, в то время как WebSockets предназначены для приложений реального времени, требующих малой задержки и непрерывной двусторонней связи. В зависимости от конкретных требований вашего приложения вы можете использовать HTTP, WebSockets или их комбинацию, чтобы обеспечить наилучшее взаимодействие с пользователем.

Опрос:

Опрос связан с HTTP, но не является специфической особенностью самого протокола HTTP. Вместо этого опрос — это метод, используемый в веб-приложениях для имитации обновлений в реальном времени, когда веб-сокеты недоступны или нецелесообразны.

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

Существует два распространенных типа опроса:

  1. Обычный опрос (стандартный опрос):
  • При регулярном опросе клиент отправляет периодические HTTP-запросы на сервер с фиксированными интервалами, запрашивая обновления или новые данные.
  • Сервер отвечает на каждый запрос самой последней информацией, даже если обновлений нет.
  • Если обновлений нет, клиенту все равно нужно обрабатывать ненужные ответы, что может привести к дополнительному сетевому трафику и потенциальной нагрузке на сервер.

2. Долгий опрос:

  • Долгий опрос — это улучшение по сравнению с обычным опросом, который помогает уменьшить ненужный трафик и обеспечивает обновления практически в реальном времени.
  • При длительном опросе клиент отправляет HTTP-запрос на сервер, и сервер удерживает запрос открытым до тех пор, пока не будут доступны новые данные или не будет достигнуто определенное время ожидания.
  • Когда новые данные доступны, сервер отвечает клиенту, а клиент немедленно обрабатывает ответ и отправляет еще один запрос, чтобы инициировать следующий длинный опрос.
  • Если до истечения времени ожидания новые данные недоступны, сервер отвечает пустым ответом, а клиент немедленно отправляет еще один запрос, чтобы инициировать следующий длинный опрос.
  • Таким образом, клиент может получать обновления, как только они становятся доступны, сводя к минимуму задержку между обновлениями и обеспечивая работу в режиме псевдо-реального времени.

Несмотря на то, что опрос позволяет получать обновления в реальном времени в веб-приложениях, он имеет некоторые недостатки по сравнению с веб-сокетами. Опрос генерирует больше сетевого трафика из-за частых запросов и ответов и может быть не таким эффективным, как WebSockets для связи в реальном времени. WebSockets, являясь полнодуплексным протоколом связи, предлагают более эффективное и гибкое решение для приложений реального времени, что делает их предпочтительным выбором, когда обновления в реальном времени имеют решающее значение.

Клиентская сторона:

<!DOCTYPE html>
<html>

<head>
    <title>WebSocket Client</title>
</head>

<body>
    <div>
        <label for="message">Enter a message:</label>
        <input type="text" id="message" />
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="output"></div>

    <script>
        const webSocket = new WebSocket("ws://localhost:8080");

        //Connection
        webSocket.onopen = () => {
            console.log("Connected to server");
        }
        webSocket.onerror = (err) => {
            console.log("Error on Connection.", err);
        }

        function sendMessage() {
            var inputText = document.getElementById("message");

            var data = JSON.stringify({
                id: `User-${Math.floor(Math.random() * 10)}`,
                content: inputText.value
            });
            webSocket.send(data);
            inputText.value = "";
        }
        webSocket.onclose = () => {
            console.log("Server disconnected.");
        }

        webSocket.onmessage = (event) => {
            const outputDiv = document.getElementById('output');
            console.log("Message from server", event.data);
            const reader = new FileReader();
            reader.onload = function (event) {
                const content = event.target.result;
                outputDiv.innerHTML += `<p>${content}</p>`;
            }
            reader.readAsText(event.data);
        }
    </script>
</body>

</html>

На стороне сервера:

const { json } = require("stream/consumers");
const { WebSocketServer } = require("ws");

// Create a WebSocket server
const socketServer = new WebSocketServer({
  port: 8080,
});

socketServer.on("connection", (socket) => {
  console.log("Someone connected........");
  socket.on("error", (err) => {
    console.log("error occured......", err);
  });
  socket.on("message", (data) => {
    //Sending message to everyone excluding the client that initiated requested.
    socketServer.clients.forEach((client) => {
      if (client !== socket) {
        client.send(data);
      }
    });
  });
  socket.on("close", () => {
    console.log("Client Disconnected..");
  });
});

console.log("WebSocket server is listening on port 8080");

В предоставленном коде сервер WebSocket реализован с помощью библиотеки ws в Node.js, а клиент WebSocket реализован с помощью JavaScript в браузере. Сервер принимает входящие соединения WebSocket и рассылает полученные сообщения всем подключенным клиентам, кроме того, который инициировал сообщение.

Сводка кода сервера:

  1. Сервер создает сервер WebSocket, прослушивающий порт 8080.
  2. Когда клиент подключается (событие connection), сервер записывает сообщение в консоль.
  3. Сервер обрабатывает входящие сообщения от клиентов (событие message) и рассылает полученное сообщение всем подключенным клиентам (за исключением отправителя).
  4. Когда клиент отключается (событие close), сервер записывает сообщение в консоль.

Сводка клиентского кода:

  1. Клиент создает соединение WebSocket с ws://localhost:8080.
  2. Клиент предоставляет обработчики событий для соединения (onopen), ошибки (onerror), закрытия (onclose) и полученных сообщений (onmessage).
  3. Когда пользователь вводит сообщение и нажимает кнопку «Отправить», клиент отправляет объект JSON в виде строки на сервер, используя webSocket.send(data).
  4. Клиент получает сообщения от сервера (событие onmessage) и отображает полученный контент на веб-странице.

Серверный и клиентский код работают вместе, чтобы обеспечить связь между клиентами и сервером в режиме реального времени через WebSockets. Клиенты могут отправлять сообщения на сервер, а сервер транслирует эти сообщения всем другим подключенным клиентам, создавая простое приложение, похожее на чат. Сервер и клиент взаимодействуют с помощью объектов JSON, а полученные данные отображаются на веб-странице.

Обратите внимание, что это упрощенный пример, и в реальном приложении вам потребуется обрабатывать более сложные сценарии, обрабатывать ошибки, учитывать соображения безопасности и масштабируемость. Кроме того, важно правильно очищать и проверять вводимые пользователем данные, чтобы избежать уязвимостей безопасности в производственной среде.