Socket.io 완전 간단 메세지 기능 만들기!!

현재 우수수강생 프로젝트에서 채팅을 구현하기 위해서 오늘은 socket.io를 통해 테스트 한것을 정리 하려합니다.

사용 기술은 : React, Socket.io 입니다.

1. npx create-react-app client 으로 프로젝트 셋업하기

& npx create-react-app client

2. socket.io 설치 하기

& yarn add socket.io-client

3. 통신할 서버 주소 셋팅 하기

import io from 'socket.io-client';

// 저는 node.js 로 개발환경에서만 개발 하였습니다. 
const socket = io.connect('http://localhost:3001');

이것으로 준비는 끝났습니다.

4. 서버에 data 전달하기

const [message, setMessage] = useState('');

// .emit 명령어로 전송 할수 있습니다.

/*socket.emit(eventName [, ...args][, ack] 
eventName <string>|<symbol>
args <any[]>
ack <Function>
return true
*/
const sendMessage = () => {
  socket.emit('send_message', {message});
}

5. 서버에서 보내는 data 받기

// .on 명령어로 수신 할수있습니다.

/*cket.on(eventName, callback)
Inherited from the EventEmitter class.

eventName <string> | <symbol>
listener <Function>
Returns <Socket>
*/

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

해당 예제는 정말 기초 기능으로 맛만 볼수 있었지만, 해당 코드로 socket.io가 간단한 동작은 어떻게 하는지 알수 있었습니다. 아래에는 참고 url 과 임시 server 와 client 코드를 첨부하겠습니다. socket.io에 대해 자세히 이해하지는 못했지만 프로젝트를 마치고 나면 좀 더 발전 하고싶습니다. 😆😆😆

//app.js
// 클라이언트
import io from 'socket.io-client';
import { useEffect, useState } from 'react';

function App() {
  const socket = io.connect('http://localhost:3001');
  const [message, setMessage] = useState('');
  const [messageReceived, setMessageReceived] = useState('');
  const sendMessage = () => {
    socket.emit('send_message', { message });
  };

  useEffect(() => {
    socket.on('receive_message', (data) => {
      setMessageReceived(data.message);
    });
  }, [socket]);

  return (
    <div className='App'>
      <input
        placeholder='Message...'
        type='text'
        onChange={(event) => {
          setMessage(event.target.value);
        }}
      />
      <button onClick={sendMessage}> Send Message </button>
      <h1>Message:</h1>
      {messageReceived}
    </div>
  );
}

export default App;

서버 code

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require('socket.io');
// 개발 단계에서 보안을 해제 하는 옵션입니다.
const cors = require('cors');

app.use(cors());
const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

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

  socket.on('send_message', (data) => {
    socket.broadcast.emit('receive_message', data);
  });
});

//서버를 동작시키는 코드 입니다. 3001은 서버 포트 번호 입니다.
server.listen(3001, () => {
  console.log('SERVER IS RUNNING');
});

참고 동영상