[ React ] socket io 사용하기

socket io를 사용해서 통신하는 방법입니다.

 

socket.io란 ?

NodeJS기반 '실시간' 웹 애플리케이션 지원 라이브러리입니다.

 

 

Client --> Server

io.on('connection', (socket) => {})

// connection : socket.io의 기본 이벤트이며, 사용자가 웹에 접속하면 자동으로 발생하는 이벤트입니다.

socket.on('message', (data) => {
    console.log('Data', data);
});

// 해당 클라이언트에서 메시지를 보내줍니다.

 

Server --> Client

io.emit('message', data);

// 서버가 현재 접속해있는 모든 클라이언트에게 이벤트를 전달해줍니다.

socket.emit('message', data);

// 서버에서 event를 발생시키는 함수입니다. 서버에서 이벤트를 발생시키면 클라이언트 페이지에 해당 이벤트에서 처리합니다. 해당 소켓을 통해 클라이언트에게 메시지를 전송합니다.

 

npm

// BackEnd
$ npm install socket.io

// FrontEnd
$ npm install socket.io-client

 

socket.js

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

const serverUrl = "http://localhost:4000/";

const socket = io(serverUrl);

export { socket };

 

App.js [ Front End ]

import { useEffect, useState } from "react";
import { socket } from "../../js/socket";

const App = () => {

    const [state, setState] = useState({name: '', message: ''});
    const [chat, setChat] = useState([]);

    useEffect(() => {
        socket.on('message', ({name, message}) => {
            setChat([...chat, {name, message}]);
        })
    }, [chat]);

    const textChange = (e) => {
        setState({...state, [e.target.name]: e.target.value});
    };

    const onSubmit = () => {
        const {name, message} = state;
        socket.emit('message', {name, message});
        setState({message: '', name})
    };

    return (
        <div>
            <input type="text" name="name" value={state.name} onChange={textChange} placeholder="이름입력" />
            <textarea value={state.message} name="message" onChange={textChange} />
            <button onClick={onSubmit}>내용입력</button>

            {
                chat.map((item, index) => (
                    <div key={index}>
                        <div>{item.name}</div>
                        <div>{item.message}</div>    
                    </div>
                ))
            }
        </div>
    );
};


export default App;

 

App.js [ Back End ]

const express = require('express');
const app = express();

const http = require('http');
const socket = require('socket.io');

const server = http.createServer(app);
const io = socket(server, {
	cors: {
		origin: "*",
		methods: ["GET", "POST"]
	}
});

const PORT = 4000;
server.listen(PORT, () => {
    const message = `
        [ Project ]
        Running PORT: localhost:${PORT}
    `;

    console.log(message);
});

io.on('connection', (socket) => {
    socket.on('message', ({name, message}) => {
        io.emit('message', ({name, message}));
    });
    console.log('연결 완료');
});