Socket IO 연구

 

 Socket io 관련 강의는 대부분 채팅과 관련이 되어 있어서 게임에 필요한 캐릭터 이동과 관련된 강의는 찾기 어려웠는데 마침 좋은 강의를 발견했다. 채널에서 게임 물리나 충돌 같은것도 다루고 있더라. 다만 3년전 강의라 앞부분을 조금 바뀌기 때문에 그부분은 기록을 조금 해 두어야 겠다. 

 

 

 

import { Server } from "socket.io";
import express from "express";
import * as http from "http";
import ViteExpress from "vite-express";

const app = express();
const server = http.createServer(app);

const io = new Server(server);
io.on('connection', (client) => { 
    console.log('사용자가 연결되었습니다'); 
    // 여기에 다른 로직을 추가하세요.
});

server.listen(3000, () => {
    console.log('3000번 포트에서 서버가 실행 중입니다');
});

app.get("/message", (_, res) => res.send("안녕! 익스프레스 바이트"))

ViteExpress.bind(app, server);

 

 일단 GPT와 다른 강의에 도움을 받아서 여기까진 구현을 해보았다. 3년전 강의다 보니 좀더 최신 기술인 Vite를 쓸거라서 앞부분은 조금 다를수도 있겠다. 

 

https://ko.vitejs.dev/guide/

Vite

 npm보다는 yarn을 쓸 생각이다. 써보니 이쪽이 더 쓰기 편하더라. 

 

 리엑트는 모르기 때문에 패스 한다. 

{

"name": "socketgame",

"private": true,

"version": "0.0.0",

"type": "module",

"scripts": {

"dev": "vite",

"build": "vite build",

"preview": "vite preview"

},

"devDependencies": {

"vite": "^5.4.1",

"express": "^4.19.2",

"vite-express": "^0.18.0",

"socket.io": "^4.7.5"

}

}

 의존성은 이렇게 구성한다. 

 

 yarn하고 설치가 끝나면 yarn dev를 누르면 초기 세팅이 뜬다. 이제 서버를 구동해 보자. 

 

 터미널에 node server를 치면 된다.

 

 정상적으로 잘 작동한다. ctrl + c를 누르면 서버는 끌수가 있다. 

 

 영상에 진행을 하려면 이게 필요하다. 참고로 유니티 웹GL 플러터로 연결 테스트 할때도 쓴다. 

 

 3000대로 포트를 변경해 준다. 

 

 접속이 안되는데 GPT말로는 cors 패키지를 설치해야 한다고 한다. 

 

 

 접속을 허용하거나 막는 걸로 AWS할때도 비슷한걸 경험한적이 있다. 대략적으로 어떤식인지 알듯 싶다. 이제 메세지를 보내면 얼추 된거 같다. 1단계 앞부분은 이게 버전업이 되다 보니 강의 영상과 일치하지 않는 부분이 있어서 쉽지 않았다. 

 

 이 이후로는 동영상을 보고 그대로 따라하면 되는거라 더 적을 필요는 없을듯 싶다. 다음에 인턴들 교육할때 이걸 보여주어야 겠다. 

 

 

 2강의에서 물리 엔진을 불러올때 잘 안맞는 부분이 있어 기록한다. 

 

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

 

 여기에 이걸 설정을 해줘야 엔진이 정상적으로 동작한다. 엔진자체는 꽤나 흥미로운 물리법칙이 적용이 되어 있다. 콜라이더도 잘 구현이 되어 있다.

 

mocorgo.js

0.02MB

userInput.js

0.00MB

 

 유저 인풋이 예전 방식이여서 고쳤다. 

 

 불러오는걸 코드를 고치더라도 일원화 해야 할듯 싶다. 

 

 익명함수를 넘겨주는게 잘 안된다. 타입이 언디파인으로 넘어오더라. 

 

 정석적인 방식으로 해결한다. 

 

 내생각에 해당 방식을 타입스크립트를 써야 할꺼 같긴 하다. 

 

 꽤나 재미있는 장남감을 발견한 기분이 든다.