WebSockets и HTTP — это протоколы связи, используемые в веб-приложениях, но они служат разным целям и имеют разные характеристики.
Вот сравнение WebSockets и HTTP:
- Тип сообщения:
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 клиент (например, веб-браузер) отправляет запрос на сервер, и сервер отвечает запрошенными данными. После получения ответа клиенту может потребоваться дождаться определенного интервала или действия пользователя, прежде чем отправить еще один запрос на получение обновленных данных с сервера. Этот процесс известен как «опрос».
Существует два распространенных типа опроса:
- Обычный опрос (стандартный опрос):
- При регулярном опросе клиент отправляет периодические 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 и рассылает полученные сообщения всем подключенным клиентам, кроме того, который инициировал сообщение.
Сводка кода сервера:
- Сервер создает сервер WebSocket, прослушивающий порт 8080.
- Когда клиент подключается (событие
connection
), сервер записывает сообщение в консоль. - Сервер обрабатывает входящие сообщения от клиентов (событие
message
) и рассылает полученное сообщение всем подключенным клиентам (за исключением отправителя). - Когда клиент отключается (событие
close
), сервер записывает сообщение в консоль.
Сводка клиентского кода:
- Клиент создает соединение WebSocket с
ws://localhost:8080
. - Клиент предоставляет обработчики событий для соединения (
onopen
), ошибки (onerror
), закрытия (onclose
) и полученных сообщений (onmessage
). - Когда пользователь вводит сообщение и нажимает кнопку «Отправить», клиент отправляет объект JSON в виде строки на сервер, используя
webSocket.send(data)
. - Клиент получает сообщения от сервера (событие
onmessage
) и отображает полученный контент на веб-странице.
Серверный и клиентский код работают вместе, чтобы обеспечить связь между клиентами и сервером в режиме реального времени через WebSockets. Клиенты могут отправлять сообщения на сервер, а сервер транслирует эти сообщения всем другим подключенным клиентам, создавая простое приложение, похожее на чат. Сервер и клиент взаимодействуют с помощью объектов JSON, а полученные данные отображаются на веб-странице.
Обратите внимание, что это упрощенный пример, и в реальном приложении вам потребуется обрабатывать более сложные сценарии, обрабатывать ошибки, учитывать соображения безопасности и масштабируемость. Кроме того, важно правильно очищать и проверять вводимые пользователем данные, чтобы избежать уязвимостей безопасности в производственной среде.