SPA에서 Socket.IO 연결을 추상화하는 방법.

SPA에서 socketIO 클라이언트로 작업할 때 소켓 인스턴스, 이벤트 이미터를 관리하고 앱의 다른 위치에서 콜백으로 작업하는 것이 매우 어려울 수 있습니다. 특히 연결할 서버가 여러 개인 경우. 무엇을 할 수 있습니까?

해결책

단일 파일에서 socketIO 구현을 추상화하기 위해 이벤트 콜백을 함수로 사용하고 이벤트 이미터를 반환하는 클로저를 만들 수 있습니다(SocketManager.js라고 부름).

예시

import io from "socket.io-client";

const SocketManager = ({
  onCallback = () => {},
}) => {
  const socket = io(/* server url to connect */);

  // Callbacks
  socket.on('callback-event-name', (payload) => {
    onCallback && onCallback(payload);
  });

  // Emitters
  const emitEvent = (eventPayload) => {
    socket.emit('emit-event-name', eventPayload);
  };

  return {
    socket,
    emitEvent
  };
};

export default SocketManager;

그런 다음 React 코드에서 다음과 같이 사용할 수 있습니다.

import React from "react";
import SocketManager from "./SocketManager.js";

const SocketConsumer = () => {
  const { emitEvent } = SocketManager({
    onCallback: handleCallback,
  });

  const handleCallback = (payload) => {
    /** Do something with the payload */
  };

  return <button onClick={emitEvent}>Fire Event</button>;
};

export default SocketConsumer;

이것이 귀하의 프로젝트에 도움이 되기를 바랍니다. 감사합니다 🙂