Основы Websocket. Использование с react, redux, saga и RTK Query

Websocket

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

Разница между HTTP и Websocket

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

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

Базовое использование на фронте

Для использования WebSocket на фронте, нужно создать объект WebSocket, указав адрес сервера WebSocket, к которому вы хотите подключиться. Затем вы можете добавить обработчики событий onopen, onmessage, onclose и onerror для управления соединением и обменом данными.

Пример использования:

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

socket.onopen = function() {
  console.log('Соединение установлено');
};

socket.onmessage = function(event) {
  console.log(`Получено сообщение: ${event.data}`);
};

socket.onclose = function(event) {
  console.log('Соединение закрыто');
};

socket.onerror = function(error) {
  console.log(`Ошибка: ${error.message}`);
};

Базовое использование на сервере на node.js

Для использования WebSocket на сервере с помощью node.js нужно установить пакет ws и создать экземпляр WebSocket-сервера, указав порт, на котором он будет слушать входящие соединения. Затем вы можете добавить обработчики событий on('connection'), on('message'), on('close') и on('error') для управления соединением и обменом данными.

Пример использования:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('Соединение установлено');

  ws.on('message', function incoming(message) {
    console.log(`Получено сообщение: ${message}`);
  });

  ws.on('close', function close() {
    console.log('Соединение закрыто');
  });
});

Какие библиотеки на фронте используются вместо нативного Websocket?

На фронте часто используются библиотеки Socket.IO и SockJS вместо нативного WebSocket. Они предоставляют дополнительные возможности, такие как автоматическое переподключение, поддержку старых браузеров и механизмы безопасности, что делает их более удобными для использования в реальных проектах.

const socket = io('<wss://localhost:8080>');

socket.on('connect', function() {
  console.log('Соединение установлено');
});

socket.on('message', function(data) {
  console.log(`Получено сообщение: ${data}`);
});

socket.on('disconnect', function() {
  console.log('Соединение закрыто');
});

socket.on('error', function(error) {
  console.log(`Ошибка: ${error}`);
});

Базовый пример использования Socket.IO в react проектах

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('<wss://localhost:8080>');

function App() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    socket.on('message', (data) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    });
  }, []);

  const handleSubmit = (event) => {
    event.preventDefault();
    const message = event.target.elements.message.value;
    socket.emit('message', message);
    event.target.elements.message.value = '';
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" name="message" />
        <button>Отправить</button>
      </form>
    </div>
  );
}

export default App;

Этот пример использует библиотеку Socket.IO для установления соединения с сервером WebSocket и отправки и получения сообщений. Он использует хук useState для отслеживания списка сообщений и хук useEffect для подписки на событие message и добавления новых сообщений в список. Также он использует socket.emit для отправки сообщений на сервер и обработчик события onSubmit для обработки отправки сообщений из формы.

Базовый пример использования Socket.IO в react проектах с redux

Для использования Socket.IO с redux необходимо установить пакеты socket.io-client и redux-thunk. Затем необходимо создать экземпляр Socket.IO и передать его в функцию thunk, которая будет обрабатывать соединения и обмен данными.

Пример использования:

import io from 'socket.io-client';

const socket = io('<wss://localhost:8080>');

export const CONNECT_SOCKET = 'CONNECT_SOCKET';
export const DISCONNECT_SOCKET = 'DISCONNECT_SOCKET';
export const RECEIVE_MESSAGE = 'RECEIVE_MESSAGE';

export const connectSocket = () => ({
  type: CONNECT_SOCKET,
});

export const disconnectSocket = () => ({
  type: DISCONNECT_SOCKET,
});

export const receiveMessage = (message) => ({
  type: RECEIVE_MESSAGE,
  payload: message,
});

export const sendMessage = (message) => (dispatch) => {
  socket.emit('message', message);
};

export const startListening = () => (dispatch) => {
  dispatch(connectSocket());

  socket.on('connect', () => {
    console.log('Соединение установлено');
  });

  socket.on('message', (data) => {
    dispatch(receiveMessage(data));
  });

  socket.on('disconnect', () => {
    dispatch(disconnectSocket());
    console.log('Соединение закрыто');
  });
};

Этот пример находится в файле actions.js и определяет четыре действия: CONNECT_SOCKET, DISCONNECT_SOCKET, RECEIVE_MESSAGE и sendMessage. Функция startListening является функцией thunk, которая обрабатывает соединения и обмен данными. Она подписывается на события connect, message и disconnect и диспетчит соответствующие действия в зависимости от события.

Для использования этого примера в redux, необходимо определить редьюсеры, которые будут обрабатывать каждое действие. Кроме того, необходимо использовать хуки useSelector и useDispatch в компонентах, чтобы связать состояние и действия с redux.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { startListening, sendMessage } from './actions';

function App() {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);

  useEffect(() => {
    dispatch(startListening());
  }, [dispatch]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const message = event.target.elements.message.value;
    dispatch(sendMessage(message));
    event.target.elements.message.value = '';
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" name="message" />
        <button>Отправить</button>
      </form>
    </div>
  );
}

export default App;

Этот пример использует хук useSelector для выбора списка сообщений из состояния redux и хук useDispatch для диспетчинга действий в redux. Он также использует обработчик события onSubmit для отправки сообщений на сервер.

Базовый пример использования Socket.IO в react проектах с redux и saga

Для использования Socket.IO с redux-saga необходимо установить пакеты socket.io-client и redux-saga. Затем необходимо создать экземпляр Socket.IO и передать его в функцию генератор, которая будет обрабатывать соединения и обмен данными.

Пример использования:

import io from 'socket.io-client';
import { put, takeEvery, call } from 'redux-saga/effects';

const socket = io('<wss://localhost:8080>');

export const CONNECT_SOCKET = 'CONNECT_SOCKET';
export const DISCONNECT_SOCKET = 'DISCONNECT_SOCKET';
export const RECEIVE_MESSAGE = 'RECEIVE_MESSAGE';

export const connectSocket = () => ({
  type: CONNECT_SOCKET,
});

export const disconnectSocket = () => ({
  type: DISCONNECT_SOCKET,
});

export const receiveMessage = (message) => ({
  type: RECEIVE_MESSAGE,
  payload: message,
});

export function* sendMessage(action) {
  yield call([socket, socket.emit], 'message', action.payload);
}

function* handleSocketMessage(data) {
  yield put(receiveMessage(data));
}

function* handleSocketDisconnect() {
  yield put(disconnectSocket());
  console.log('Соединение закрыто');
}

export function* startListening() {
  yield put(connectSocket());

  socket.on('connect', () => {
    console.log('Соединение установлено');
  });

  socket.on('message', (data) => {
    call(handleSocketMessage, data);
  });

  socket.on('disconnect', () => {
    call(handleSocketDisconnect);
  });
}

export function* watchSendMessage() {
  yield takeEvery('SEND_MESSAGE', sendMessage);
}

Этот пример находится в файле actions.js и определяет четыре действия: CONNECT_SOCKET, DISCONNECT_SOCKET, RECEIVE_MESSAGE и sendMessage. Функция startListening является функцией генератором, которая обрабатывает соединения и обмен данными. Она подписывается на события connect, message и disconnect и диспетчит соответствующие действия в зависимости от события. Функция watchSendMessage является функцией генератором, которая отслеживает отправку сообщений и вызывает функцию генератор sendMessage.

Для использования этого примера в redux-saga, необходимо определить редьюсеры, которые будут обрабатывать каждое действие. Кроме того, необходимо использовать хуки useSelector и useDispatch в компонентах, чтобы связать состояние и действия с redux.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { startListening, sendMessage } from './actions';

function App() {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.messages);

  useEffect(() => {
    dispatch(startListening());
  }, [dispatch]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const message = event.target.elements.message.value;
    dispatch(sendMessage(message));
    event.target.elements.message.value = '';
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" name="message" />
        <button>Отправить</button>
      </form>
    </div>
  );
}

export default App;

Этот пример использует хук useSelector для выбора списка сообщений из состояния redux и хук useDispatch для диспетчинга действий в redux. Он также использует обработчик события onSubmit для отправки сообщений на сервер.

Базовый пример использования Socket.IO в react проектах с redux и RTK Query

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { io } from 'socket.io-client';

const socket = io('wss://localhost:3001');

const messageApi = createApi({
  reducerPath: 'messageApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getMessage: builder.query({
      query: () => 'getMessage',
    }),
    sendMessage: builder.mutation({
      // Определяем функцию, которая будет отправлять сообщение на сервер
      query: (message) => {
        // Отправляем сообщение через сокет
        socket.emit('sendMessage', { message });
      },
      // Необязательный колбэк-функция, которая вызывается после успешной отправки сообщения
      onQueryStarted: () => {
        console.log('Sending message...');
      },
    }),
  }),
});

socket.on('connect', () => {
  console.log('connected to server');
});

socket.on('newMessage', (data) => {
  messageApi.endpoints.getMessage.invalidate(); // Обновляем данные RTK Query при получении новых сообщений
});

export const { useGetMessageQuery, useSendMessageMutation } = messageApi;

Собственные события

Кроме стандартных событий(open, message, error, close) вы можете определять собственные события. В протоколе WebSocket есть механизм называемый "пользовательские события" (custom events), которые позволяют отправлять данные определенного типа.

Пример на клиенте:

import { io } from 'socket.io-client';

const socket = io('wss://localhost:3001');

socket.on('connect', () => {
  console.log('connected to server');
});

socket.on('listMessage', (data) => {
  console.log(`received listMessage: ${data}`);
});

// Отправка события listMessage
socket.emit('listMessage', 'Hello from the client!');

Пример на сервере:

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log(`Socket ${socket.id} connected`);

  socket.on('listMessage', (data) => {
    console.log(`Received message: ${data}`);
    socket.emit('listMessage', `Server says: ${data}`);
  });

  socket.on('disconnect', () => {
    console.log(`Socket ${socket.id} disconnected`);
  });
});

server.listen(3001, () => {
  console.log('Server is listening on port 3001');
});

В данном примере клиент отправляет событие listMessage
на сервер, и сервер принимает его и отправляет всем клиентам в качестве ответа новое событие listMessage
с префиксом Server:
. Клиент также подписывается на событие listMessage
и выводит в консоль полученное сообщение.

Какие ошибки чаще всего допускают react разработчики при работе с websocket?

При работе с websocket в React приложениях, разработчики могут допустить ряд ошибок, включая:

1. Не закрытие соединения: неправильная обработка события "onclose", когда соединение закрывается, может привести к утечке ресурсов и потере памяти.

2. Необработанные ошибки: при отправке сообщений через WebSocket может возникнуть ошибка, которая не будет обработана, что может привести к падению приложения.

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

4. Некорректное управление состоянием: необходимо корректно управлять состоянием компонента в зависимости от состояния соединения WebSocket, чтобы избежать ошибок и непредсказуемого поведения.

5. Проблемы с безопасностью: необходимо учитывать возможность атак на WebSocket, такие как межсайтовая подделка запроса (CSRF), атаки на маршрутизацию (routing attacks) и другие уязвимости безопасности.

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

Плюсы и минусы Websocket?

Плюсы:

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

2. Низкая задержка: WebSocket обеспечивает быструю и эффективную связь между клиентом и сервером. Он работает на основе протокола TCP, который обеспечивает низкую задержку и малое количество потерь данных при передаче.

3. Масштабируемость: WebSocket может обрабатывать большое количество одновременных подключений, что делает его идеальным для создания масштабируемых приложений, таких как онлайн-игры, чат-приложения и многие другие.

4. Безопасность: WebSocket поддерживает защищенное соединение SSL/TLS, которое обеспечивает безопасную передачу данных между клиентом и сервером. Кроме того, WebSocket обеспечивает защиту от атак типа XSS и CSRF.

5. Простота использования: WebSocket легко интегрируется с различными языками программирования и платформами, что делает его доступным для широкого круга разработчиков. Кроме того, многие фреймворки и библиотеки, такие как Socket.IO для Node.js и SignalR для .NET, предоставляют простой и удобный интерфейс для работы с WebSocket.

Минусы

• Не поддерживается всеми браузерами

• Требует дополнительной настройки на стороне сервера для поддержки постоянного соединения

• Более высокая нагрузка на сервер в сравнении с HTTP при передаче большого количества данных