자바스크립트 socket.io 채팅으로 초성게임 만들기 #1 설정하기

계획

코로나 시국에 친구를 자주 만나지 못해서 엄청 간단한 초성게임을 하고 싶다는 생각을 해서 계획하게 되었습니다
javascript만으로도 되지만 react를  배우는 겸 react로 진행하겠습니다

 

전체적인 구성

CHOSUNG-GAME
├─ .gitignore
├─ node_modules/
├─ public/
├─ server/ -서버
      └─ index.js
├─ src/
├─ components/
       └─ . . .
├─ utilities/ -초성 검사, 랜덤초성만들기 ..
├─ styles/
      └─index.tsx
├─ package.json
└─ tsconfig.json

 

1. 서버에서 react build를 해서 나온 정적인 index.html 파일을 socket.io를 쓸수있게 해서 서버를 구동합니다

• 들어오는 유저를 순서대로 저장
• 첫번째 유저와 두번째 유저와 게임
• 게임에 쓰는 초성저장

2. 클라이언트에서는 게임의 상태와 유저의 내용을 서버에 전달합니다

• 들어오는 유저의 소켓아이디 전달
• 두번째 유저를 서버에서 확인하면 자동으로 게임시작
• 서버에서 랜덤으로 돌린 초성을 클라이언트도 전달
• 첫번째 or 두번째 유저가 접속이 끊기면 게임을 초기화 후 서버에 게임 끝을 전달
• 초성에 맞는 단어만 적을 수 있다

전체적인 구성은 이정도로 가볍게 하면 될것같습니다
턴을 바꾸는것과 복잡한 규칙들은 일단은 안하도록 하겠습니다

 

SETUP

시작하기전 node.js와 텍스트편집기(vscode, sublime...)가 필요합니다
처음은 터미널 아래 명령을 입력하면 자동으로 만들어지는 react app을 만듭니다

$ npx create-react-app chosung-game --template typescript

chosung-game부분을 폴더이름을 뜻하기 때문에 아무 이름이나 넣어도 상관없습니다

폴더 안에 왼쪽처럼 만들어집니다
필요없는 파일 App.css, index.css, logo.svg 파일을 삭제하고, 관련코드는 바꾸고 없애버립니다
추가할 폴더 server와 src 안에 styles, utilities, store를 만들어줍니다


이제 npm으로 필요한 패키지를 프로젝트에 인스톨 합니다

$ npm i @types/express @types/socket.io @types/react-redux express nodemon react-redux redux socket.io socket.io-client 

스타일을 위한 패키지는 다음 글에서 인스톨 하겠습니다

실행을 하기위해 package.json을 수정합니다

기존 react app은 npm start 를 하면 react 가 실행이됩니다
하지만 react 서버에서는 socket.io를 작동시킬 수 없기 때문에
npm run build로 정적인 파일을 만들어서 그 파일을 socket.io통신을 할 수 있게 express 위에서 돌려야 합니다
scripts에 server를 실행하는 스크립트를 추가합니다

수정한 내용을 보면 npm start 부분을 server/index.js가 수정될때마다 서버를 다시 실행해줍니다
server 만드는거는 socket.io를 확인하면 쉽게 만들 수 있습니다

서버를 실행하는 코드로 socket.io를 사용하기 위한 기본적인 코드입니다
일단 전체 복사후 조금 수정해줘야 합니다(사이트에 가면 복사가능합니다)

server/index.js 

... 

const path = require('path'); 
app.use(express.static(path.join(__dirname, '../build'))); 

...

이 코드를 추가해줍니다
서버가 npm run build로 만든 index.html에 접근을 해야하는데 build가 어디있는지 server는 모르는 상태라서
server에게 build의 위치를 알려주는 작업입니다


이제하는 작업은 오류가 없는지 확인하는 test작업입니다
server/index.js에 'hi' 라는 이름의 이벤트를 만들어서 정보를 받아서 emit으로 각 클라이언트에게 보내는 역할을 하게 합니다

info정보를 받아서 io.emit으로 모든 유저에게 `Hi user ${info}`를 보냅니다 server에서는 socket.id를 콘솔로 출력을 합니다

클라이언트에 해당되는 App.js에서 받는코드와 보내는 코드를 만들어야지 서버와 클라이언트가 양방향 통신을 할 수 있습니다

socket.on으로 hi 이벤트를 연결합니다
임시 버튼을 만들어서 클릭을 하면 서버한테 보내는 emit 함수를 실행합니다
이제 build를 하고 start를 해보면

결과 화면으로 서버의 socket.id와 클라이언트의 socket.id가 같은 것을 확인했습니다
들어오는 client를 감지하고 통신 할 수 있음을 확인했습니다
socket.io 내용을 정리하자면 서버에서든 클라이언트에서든 socket.on()을 받는 작업이고 emit은 보내는 작업이라고 보면 될 것 같습니다
이상으로 setup을 마칩니다
다음글에서는 index.js를 게임을 할 수 있게 추가하는 작업을 하겠습니다

참고자료

https://create-react-app.dev/docs/adding-typescript/

Adding TypeScript | Create React App

https://socket.io/get-started/chat

Get started

https://www.freecodecamp.org/news/build-a-chat-app-with-react-typescript-and-socket-io-d7e1192d288/

Build a chat app with React, TypeScript and Socket.io