Интернет — основа сети, техническая инфраструктура, благодаря которой и существует World Wide Web, или Всемирная паутина. По своей сути интернет — гигантская сеть компьютеров, которые могут взаимодействовать друг с другом.
Принципы взаимодействия и способы передачи данных между этими компьютерами определяются сетевыми протоколами. Иными словами, сетевой протокол — это набор правил и действий, который регулирует соединение и обмен данными между двумя и более включенными в сеть устройствами.
Наиболее известные:
В этой статье я расскажу про популярный в наше время протокол — WebSocket. Он используется, как правило, при разработке приложений, в которых содержимое обновляется с высокой частотой или в реальном времени.
WebSocket обеспечивает обмен данными между браузером и сервером через постоянное соединение. Это двунаправленный, полнодуплексный протокол, который используется в сценарии взаимодействия «Клиент-сервер». Он начинается с ws:// или wss:// в случае безопасного соединения.
Принцип веб-сокета — соединение между клиентом и сервером остается активным до тех пор, пока оно не будет разорвано любой из сторон.
Соединение WebSocket устанавливается посредством HTTP-запроса:
О плюсах WebSocket:
О минусах:
WebSocket может быть очень полезен для повышения скорости работы сайта. Но не стоит использовать этот протокол в случаях, когда мы хотим получать старые или неизменные данные, или необходимо загрузить данные лишь один раз. В таких кейсах стоит применить протокол HTTP.
Где используется WebSocket:
WebSocket подходит для этих проектов лучше всего, так как в них клиент может не выполнять на своей стороне никаких вычислений, а лишь получать\передавать данные на сервер.
Легкость протокола позволяет с высокой частотой отправлять или получать информацию. Например, моментально отображать обновления в онлайн-игре, когда соперник выполнил определенные действия, или загружать данные с наименьшей задержкой на трейдерской платформе, что будет положительно сказываться на результате торгов.
В качестве примера покажу React-component, работающий с веб-сокетом. Его суть проста — отображать текущее состояние соединения и функциональность принудительного закрытия и открытия соединения.
Сервер веб-сокета — ресурс wss://ws.kraken.com/, который с определённой периодичностью отправляет клиентам сообщение о том, что сервер работает.
Использование протокола WebSocket в React-приложении выглядит так:
import React, { useState, useRef, useEffect, useCallback } from "react";
const AppWs = () => {
const [isPaused, setIsPaused] = useState(false);
const [data, setData] = useState(null);
const [status, setStatus] = useState("");
const ws = useRef(null);
useEffect(() => {
if (!isPaused) {
ws.current = new WebSocket("wss://ws.kraken.com/"); // создаем ws соединение
ws.current.onopen = () => setStatus("Соединение открыто"); // callback на ивент открытия соединения
ws.current.onclose = () => setStatus("Соединение закрыто"); // callback на ивент закрытия соединения
gettingData();
}
return () => ws.current.close(); // кода меняется isPaused - соединение закрывается
}, [ws, isPaused]);
const gettingData = useCallback(() => {
if (!ws.current) return;
ws.current.onmessage = e => { //подписка на получение данных по вебсокету
if (isPaused) return;
const message = JSON.parse(e.data);
setData(message);
};
}, [isPaused]);
return (
<>
{!!data &&
<div>
<div>
<h2>{status}</h2>
<p>{`connection ID: ${data?.connectionID}`}</p>
<p>{`event: ${data?.event}`}</p>
<p>{`status: ${data?.status}`}</p>
<p>{`version: ${data?.version}`}</p>
</div>
<button onClick={() => {
ws.current.close();
setIsPaused(!isPaused)
}}>{!isPaused ? 'Остановить соединение' : 'Открыть соединение' }</button>
</div>
}
</>
)
}
export default AppWs;
Протокол WebSocket позволяет быстро и безопасно пересылать данные на любой домен, помогает увеличить скорость сайта или приложения. Он поддерживается всеми популярными браузерами: Google Chrome, Apple Safari, Mozilla Firefox, Opera и Internet Explorer, что делает его универсальным.