socket.io (react)

개념

Socket

• 일반적인 소켓은 네트워크 통신을 위한 엔드포인트를 나타냅니다.
• TCP/IP 기반의 네트워크에서 사용되며, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다.
• 주로 로컬 네트워크 또는 인터넷을 통해 컴퓨터 간의 통신을 할 때 사용됩니다.

 

WebSocket

• 웹 소켓은 HTML5에서 지원하는 통신 프로토콜로, 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 합니다.
• 일반적인 소켓과 달리, 웹 브라우저에서도 사용할 수 있으며, HTTP 프로토콜 위에 구현되어 있습니다.
• 웹 소켓은 클라이언트와 서버가 지속적으로 연결된 상태를 유지하며, 실시간으로 데이터를 주고받을 수 있습니다.

 

Socket.IO

• Socket.IO는 웹 소켓을 이용한 실시간 양방향 통신을 구현하기 위한 JavaScript 라이브러리입니다.
• 웹 소켓을 기반으로 하지만, 브라우저가 웹 소켓을 지원하지 않는 경우에도 폴백 옵션을 통해 다른 통신 방식으로 자동으로 전환할 수 있습니다.
• Socket.IO는 간단한 API(자동 재연결, 룸(Room) 및 네임스페이스(Namespace) 지원 등)를 제공하며, 다양한 플랫폼(웹, 모바일 등)에서 사용할 수 있습니다.

 

웹 소켓은 직접적인 브라우저 통신이 필요하고 고성능이 요구되는 경우에 적합하며, Socket.IO는 다양한 플랫폼 호환성과 간편한 API, 다양한 기능을 제공하여 개발 효율성을 높이는 데 사용됩니다.

 

 

react 프로젝트에서 설정 방법

1. Socket.IO 설치

프로젝트 디렉토리에서 아래의 명령을 하나 실행하세요.

npm install socket.io-client

yarn add socket.io-client

 

2. Socket.IO 클라이언트 설정

클라이언트 측 코드에서 Socket.IO를 설정. (index.js에서 설정하는 것 추천)

- App.js 에서 설정

app.js에만 socket을 사용할 거라면 직접 선언하여 코드를 간결하게 할 수 있다.

// App.js

import "./App.css";
import io from "socket.io-client";
import { useEffect, useState, useRef } from "react";

const socket = io.connect("http://localhost:3001");

function App() {
  // App 컴포넌트 내용...
}

 

- index.js에서 소켓을 선언하고 props로 넘겨주기

소켓을 하나의 인스턴스로 유지할 수 있으며, 모든 컴포넌트에서 재사용 가능

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import io from 'socket.io-client';

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

ReactDOM.render(
  <React.StrictMode>
    <App socket={socket} />
  </React.StrictMode>,
  document.getElementById('root')
);

//App.js

import React, { useState, useEffect } from 'react';

function App({ socket }) {
// App 컴포넌트 내용에서 socket을 props로 받아 사용합니다.
  const [message, setMessage] = useState('');
  const [receivedMessage, setReceivedMessage] = useState('');

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

  useEffect(() => {
    socket.on('receive_message', (data) => {
      setReceivedMessage(data);
    });

    return () => {
      socket.off('receive_message');
    };
  }, [socket]);

  return (
    <div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
      <div>Received Message: {receivedMessage}</div>
    </div>
  );
}

export default App;

 

3. 서버 측 설정

클라이언트와 통신하고, 이벤트를 처리하는 로직을 작성

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

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

io.on("connection", (socket) => {
  console.log(`User Connected: ${socket.id}`);

  socket.on("send_message", (message) => {
    io.emit("receive_message", message);
  });

  socket.on("disconnect", () => {
    console.log("User Disconnected");
  });
});

server.listen(3001, () => {
  console.log("SERVER IS RUNNING");
});

클라이언트 측에서는 send_message 이벤트를 통해 메시지를 서버로 전송하고, 서버 측에서는 이를 받아서 모든 클라이언트에게 다시 전송하는 예시.

*서버는 클라이언트로부터 받은 메시지를 받으면 바로 모든 클라이언트에게 전송하므로, 클라이언트가 보낸 메시지를 다시 자신에게 받게 됩니다.

*socket.io 메서드

1. socket.emit(eventName, data):
   • socket.emit은 클라이언트에서 이벤트를 발생시키고, 서버에 데이터를 전달할 때 사용됩니다.
   • 예를 들어, 클라이언트에서 채팅 메시지를 서버로 보내거나, 사용자의 액션을 서버로 알리는 등의 작업에 사용됩니다.
2. socket.on(eventName, data):
   • socket.on은 서버에서 클라이언트로부터 데이터를 수신하는 데 사용됩니다.
   • 예를 들어, 서버에서 채팅 메시지를 수신하거나, 클라이언트의 요청에 응답하는 등의 작업에 사용됩니다.
3. socket.once(eventName, callback):
   • 특정 이벤트에 대한 리스너를 한 번만 실행하고 제거합니다.
4. socket.removeListener(eventName, callback):
   • 특정 이벤트에 대한 특정 리스너(콜백 함수)를 제거합니다.
5. socket.removeAllListeners([eventName]):
   • 모든 이벤트 리스너를 제거합니다. (특정 이벤트 선택 가능)
6. socket.connect():
   • 소켓을 서버에 연결합니다.
   • 연결이 끊어진 경우 다시 연결할 때 사용됩니다.
7. socket.disconnect():
   • 소켓 연결을 종료합니다.
   • 서버와의 연결을 끊고 소켓을 닫습니다.
8. socket.close():
   • 소켓을 닫습니다. 연결된 모든 이벤트 리스너를 제거하고 소켓을 종료합니다.
9. socket.join(room):
   • 클라이언트를 특정 방(room)에 조인시킵니다.
   • 같은 방에 조인된 클라이언트끼리 특정 이벤트를 공유할 수 있습니다.
10. socket.leave(room):
    • 클라이언트를 특정 방(room)에서 나가게 합니다.
    • 해당 방에서 나간 클라이언트는 해당 방에 속한 이벤트를 더 이상 수신하지 않습니다.
11. socket.off(eventName, callback):
    • socket.off은 이벤트 리스너를 제거. 불필요한 메모리 누수를 방지합니다.