리액트) 디스코드 클론 - 2

이전 글에서는 서버의 기본 세팅을 마련했다.

이제 소켓 연결에 대한 코드를 작성해보자.

io.on("connection", (socket) => {
  console.log("connection!!!!");
});

끝이다.

엥? 이라는 의문이 들 수도 있겠지만 단순한 클라이언트-서버간의 웹소켓 연결이라면 정말 이게 끝이다.

나는 클라이언트에서 피어를 생성하고 다른 이용자와 연결을 진행할 예정이기에 서버는 단순 중계기 같은 역할만 진행한다.

클라이언트 - 핸드폰, 서버 - 중계기 와 비슷하다가 생각하면 된다.

이제 클라이언트 쪽을 작성해보자.

npm i socket.io-client peerjs react-router-dom uuid

 

import React, { useEffect } from "react";
import { io } from "socket.io-client";

const App = () => {
  useEffect(() => {
    const socket = io.connect("http://localhost:9000");
  }, []);

  return <div></div>;
};

 

이후 프로젝트를 실행하면 서버에 connect라는 콘솔이 나오는 것을 확인할 수 있다.

이제 정말정말 기본적인 셋팅은 끝이났다.