Когда уже совсем много запросов на сервер или…

Когда “еще один пуллинг каждый N секунд” стучится вам в код. Время подумать про вебсокеты a.k.a полнодуплексное соединение.

Речь пойдет про socket.io , не совсем web socket а скорее микс при участии web socket. Но очень удобный в использовании сразу из коробки. 

Кейс состоит в следующем: 

• Есть многопользовательское приложение в котором пользователи запускают асинхронные операции на сервере. Другими словами нажимают на кнопку в приложении и ждут когда сервер выполнит все операции а походу еще и расскажет про текущее состояние.

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

Для клиента необходима библиотека socket-io.client, для фронта все написано на React и само соединение можно установить/разорвать через хуки. Для тех кто использует redux-toolkit все можно сделать через RTK.

У вас должен быть базовый объект createApi({ … }) который описывает все эндпоинты и который потом, так же можно расширить.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';  export const baseApi = createApi({     reducerPath: 'baseApi',     baseQuery: fetchBaseQuery({ baseUrl: '/' }),     endpoints: () => ({}), });

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

const appReducer = combineReducers({ …, [baseApi.reducerPath]: baseApi.reducer, … });

В middleware добавляем =>  baseApi.middleware

И расширяем свой базовый baseApi функционалом для создания вебсокета.

import { baseApi } from '../api'; import { io } from 'socket.io-client';  export const wsApi = baseApi.injectEndpoints({     endpoints: build => ({         subscribeToEvents: build.query<any, void>({             queryFn: () => ({ data: [] }),             async onCacheEntryAdded(_arg, { dispatch, updateCachedData, cacheEntryRemoved }) {                 // Path is a prefix that will be used right after domain name                 const socket = io(`${your_url}/events`, {                     path: '/socket.io',                 });                  socket.on('disconnect', reason => {                     if (reason === 'io server disconnect') {                         // the disconnection was initiated by the server, you need to reconnect manually                         socket.connect();                     }                     // else the socket will automatically try to reconnect                 });                  socket.on(‘EVENT_TYPE’, (event: ServerEvent) => {                     // Here we should add the logic                     updateCachedData(draft => {                         draft.push(event);                     });                 });                  await cacheEntryRemoved;                 socket.close();             },         }),     }),     overrideExisting: false, });  export const { useSubscribeToEventsQuery } = wsApi;

injectEndpoints работает как раз для расширения эндпоинтов, только не забудьте добавить overrideExisting: false чтобы расширить а не переопределить существующий функционал.

useSubscribeToEventsQuery(); можно использовать как обычный хук, в том компоненте в котором желаете подписаться на события, например в App. Еще в api есть свойство keepUnusedDataFor для того чтобы задать время в секундах существования подключения/данных после последнего unsubscribe, по умолчанию 60 секунд.

На сервере используется Ts.Ed (Node js), но также существуют готовые библиотеки на других языках. Нужно проинсталлировать пакеты связанные с socket.io для сервера. И дела за малым, добавить конфиг:

socketIO: { path: '/socket.io', cors: { origin: '*' // put your servers } } 

И добавить сервис который выполняет подключение/отключение клиента а так же отправляет и принимает сообщения.

import { IO, Nsp, Socket, SocketService, SocketSession } from "@tsed/socketio"; import * as SocketIO from "socket.io";  @SocketService("/events") // namespace right after path ‘socket.io’ export class MySocketService {      @Nsp nsp: SocketIO.Namespace | undefined;      // a map to keep clients by any id you like, a userId or whatever.     public clients: Map<string, SocketIO.Socket> = new Map();       constructor(@IO private io: SocketIO.Server) {     }      /**      * Triggered when a new client connects to the Namespace.      */     $onConnection(@Socket socket: SocketIO.Socket, @SocketSession session: SocketSession) {         this.clients.set(socket.id, socket);     }      // setup a method to send data to all clients     // you can use this from any other service or controller.     broadcast(someData: any): void {         this.nsp.emit(‘EVENT_TYPE’, { … }: ServerEvent);     }      // method to send to a targeted client     sendToSingleClient(idToSendTo: string, someData: any): void {         const socket = this.clients.get(idToSendTo);         if (!socket) return;         socket.emit(‘EVENT_TYPE’, { … }: ServerEvent);     }  }

Namespace в socket.io это путь "/event" после основного пути в настройках socketIO: { path: 'socket.io' }. Теперь можно в любом необходимом месте заинжектить сервис и отправить сообщение клиентам.

Вообщем то как-то так, после этого клиент может получать сообщения и выполнять необходимые side effects. ??