Gestion des websockets

useWebSocket.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react';

interface IUseWebSocket<TMessage>
{
  url : string,
  connectOnMount?: boolean,

  onOpen?: (event: Event) => any;
  onMessage?: (event : MessageEvent, message : IWebSocketMessage<TMessage>) => void;
  onClose?: (event: CloseEvent) => any;
  onError?: (event: Event) => any;
}

interface IWebSocketMessage<TMessage> {
  data : TMessage
}

interface IUseWebSocketResponse<TMessage> {
  messages : TMessage[];
  isConnected : boolean;
  websocket? : WebSocket;

  connect: () => void;
  sendMessage: (message : string | ArrayBufferLike | Blob | ArrayBufferView) => void;
  disconnect: (code?: number, reason?: string) => void;
}

const useWebSocket = <TMessage, >({
  url,
  connectOnMount = true,

  onOpen,
  onMessage,
  onClose,
  onError,
} : IUseWebSocket<TMessage>) : IUseWebSocketResponse<TMessage> => {
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState<TMessage[]>([]);
  const [websocket, setWebsocket] = useState<WebSocket | undefined>();

  useEffect(() => {
    if (connectOnMount) connect();
  }, [connectOnMount]);

  const connect = () => {
    const ws = new WebSocket(url);

    ws.onopen = (event) => { setIsConnected(true); onOpen?.(event); };
    ws.onmessage = (event) => { setMessages((previousMessages) => [...previousMessages, event.data]); onMessage?.(event, event.data); };
    ws.onclose = (event) => { setIsConnected(false); onClose?.(event); };
    ws.onerror = (event) => onError?.(event);

    setWebsocket(ws);
  };
  const sendMessage = (message: string | ArrayBufferLike | Blob | ArrayBufferView): void => websocket?.send(message);
  const disconnect = (code?: number, reason?: string): void => websocket?.close(code, reason);

  return {
    websocket,
    messages,
    isConnected,
    connect,
    sendMessage,
    disconnect,
  };
};

export default useWebSocket;

WebSocketSample.module.scss

.messagesContainer
{
  display : flex;
  gap : 4px;
  flex-direction: column;
}

.message {
  color : red;
}

WebSocketSample.tsx

import React, { useState } from 'react';
import useWebSocket from '../../shared/hooks/utilities/useWebSocket';
import styles from './WebSocketSample.module.scss';

const WebSocketSample = () => {
  const {
    messages,
    isConnected,
    connect,
    sendMessage,
    disconnect,
  } = useWebSocket<string>({
    url: 'wss://demo.piesocket.com/v3/channel_1?api_key=VCXCEuvhGcBDP7XhiJJUDvR1e1D3eiVjgZ9VRiaV&notify_self',
  });
  const [newMessage, setNewMessage] = useState('');

  return (
    <>
      <h2>Websocket : useWebSocket</h2>
      <div>{`Is Connected : ${isConnected}`}</div>
      <div className={styles.messagesContainer}>
        {messages.map((message) => <div className={styles.message}>{message}</div>)}
      </div>
      <input value={newMessage} placeholder='new message' onChange={(event) => setNewMessage(event.target.value)} />
      <button type='button' onClick={() => sendMessage(newMessage)}>Send message</button>
      <button type='button' onClick={() => (isConnected ? disconnect() : connect())}>{`${isConnected ? 'Close' : 'Open'} websocket connexion`}</button>
    </>
  );
};

export default WebSocketSample;