[TIL] React + node.js, Socket.io

이번 실전 프로젝트에서 실시간 채팅 + 화상기능이 들어간다.
Web Socket 과 WebRTC 를 공부해야 하는데, 우선 Web Socket 먼저 시도해 보았다.

youtube 와 노마드코더 zoom 클론코딩 등 webSocket 관련된 자료는 최대한 많이 찾아보며 공부하고 진행 해 보았다.
참고한 youtube : 바로가기

우선 React 에 필요한 라이브러리 부터 다운받기
yarn add socket.io-client

React

시행착오:
처음에 아주 바보같은 짓을 해서 계속 서버랑 통신이 안됐었었다.
우선, 서버에서 열은 포트번호와, 프론트 포트번호가 같아야 한다.
처음 우리 서버쪽에서 포트번호 3002번으로 열어주고, 우리 프론트는 3000번으로 작업하는데 계속 에러 나길래 찾아본 내용! 포트번호 모두 3000으로 동일하게 맞추고 나서는 오류 메시지도 뭔가 달라졌었다.

socket.io v3 부터는 CORS 를 직접 설정해야 한다. (백 부분)

app.use(cors());
const io = require('socket.io')(server,{
    cors : {
            origin :"*",
        credentials :true
    }
});

여기까지 진행을 했는데도 계속 서버랑 프론트랑 연결이 안돼서 아무 문제 없는데 왜 그럴까,,,,하고 다시 차근히 코드를 봤는데 저런,,,,
서버 주소를 적는데 "http://13.209.4.79/:3000" 포트번호 앞에 '/'를 붙여서 적어버려서 계속 통신이 안되고 있었던거였다. /를 지워보니 바로 서버랑 통신성공,,,ㅎㅎㅎㅎㅎ 우리 조원들이랑 다같이 코드 보면서 진행했었는데 이걸 왜 아무도 발견을 못햇나구여어어 ㅎㅎㅎㅎ

그렇게 여러 시행착오 끝에 서버와 연결하고 3명이 동시에 채팅 치는것도 잘 나오는 것까지 확인했다.

이제는 통신은 완료 했으니까~~~
각 채팅 룸 만드는 부분 진행할 예정이다.

처음 서버랑 통신성공했는지 알아보기 위해 썼던 코드

 useEffect(() => {
    socketRef.current = io.connect("http://13.209.4.79:3000");
    socketRef.current.on("message", ({ name, message }) => {
      setChat([ ...chat, { name, message } ])
    })
    //처음 연결 시 띄우기
    console.log("보내기@");
    //연결 됐는지 서버에 메시지 보내기
    socket.emit("message", "연결됐나요?민지");
    //서버에서 msg 로 연결되면 메시지 보내줌
    socket.on("message", (msg) => {
      console.log(msg);
    });
  },[]);

PostChat.js

import TextField from "@material-ui/core/TextField";
import React, { useEffect, useRef, useState } from "react";
import io from "socket.io-client";

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

  const socketRef = useRef();

  useEffect(() => {    
    });
    return () => socketRef.current.disconnect();
  }, [chat]);

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

  const onMessageSubmit = (e) => {
    const { name, message } = state;
    socketRef.current.emit("message", { name, message });
    e.preventDefault();
    setState({ message: "", name });
  };

  const renderChat = () => {
    return chat.map(({ name, message }, index) => (
      <div key={index}>
        <h3>
          {name}: <span>{message}</span>
        </h3>
      </div>
    ));
  };

  return (
    <div className="card">
      <form onSubmit={onMessageSubmit}>
        <h1>Messenger</h1>
        <div className="name-field">
          <TextField
            name="name"
            onChange={(e) => onTextChange(e)}
            value={state.name}
            label="Name"
          />
        </div>
        <div>
          <TextField
            name="message"
            onChange={(e) => onTextChange(e)}
            value={state.message}
            id="outlined-multiline-static"
            variant="outlined"
            label="Message"
          />
        </div>
        <button>Send Message</button>
      </form>
      <div className="render-chat">
        <h1>Chat Log</h1>
        {renderChat()}
      </div>
    </div>
  );
}

export default PostChat;

Node.js

app.use(cors());
const io = require('socket.io')(server,{
    cors : {
            origin :"*",
        credentials :true
    }
});


io.on('connection', socket => {
        console.log("클라이언트에서  접속 ✔", socket.id, "님")

    socket.on('message',({ name, message }) => {
            console.log({name, message})
        io.emit('message', { name, message })
    })

})

server.listen(3000, function(){
    console.log('listening on port 3000');
})