[리팩토링] socket.js 코드 분리하기

socket.js 코드 좀 깔끔하게 만들고싶은것이 내 숙원이었음..

한 두달 전에 짜 놓은 코드는 socke.io 문서 읽어가며 어영부영 작동시키느라 바빴지만

이번엔 잘 이해해서 좀 읽기 좋게 만들어보고싶었다. 인강과 몇번의 뻘짓으로 드디어 끝냈다.

해냇따구?

socket.js에 무더기로 쌓인 코드 처리하기

이전의 코드는 이런식으로 실행이 됐다. 

1. app.js에서 app object을 이용해 server listen 실행
2. server listen하는 코드는 ` server ` 라는 변수명에 저장
3. socket.io를 require하여 app.js 내에서 ` server `를 인자로 사용해서 실행
4. socket.js는 인자로 받은 server를 통해 동작

여기서 socket.js의 코드는, socket.io 실행, 설정, 로직이 모두 한 모듈에 뭉태기로 붙어있어서 가독성이 낮았다.

겸사겸사 이전에 잘못 쓴 코드도 눈에 보여서 필요 없는 코드는 삭제하면서 작업을 했다.

 

현재 코드는 이렇게 실행이 된다.

1. app.js에서 서버 listen하는 코드를 분리했다. (server.js)
   
   1. 이렇게 해서 app.js에서는 바로 실행 되는 코드가 없게된다. 무조건 server.js를 통해 서버가 켜져야지만 app.js가 실행되게된다.
   2. server.js에서 http listen 뿐 아니라, socket.js도 require하여 sever.js가 켜지면서 socket.js도 실행된다.
   3. 이렇게 실행과 로직을 위한 코드를 분리했다.
2. 기존에 app object로 실행하던 서버를 http모듈로 실행시키도록 변경하였다.
   1. 기존엔 app.listen()으로 http.server.listen()을 하였지만 server.js에서 listen하는 부분을 따로 변수에 저장하지 않고 진행해보려고 하다보니, socket.js에서 필요한 서버 인스턴스를 제공할 수 없었고.. 그래서 http 모듈을 사용해서 socket.js에서 서버 인스턴스를 제공했다. 근데 굳이 이럴 필요가 있었던건가? aㅏ..

   2. // server.js
      
      const http = require("./app");
      const port = process.env.EXPRESS_PORT;
      const dotenv = require("dotenv");
      dotenv.config();
      require("./socket");
      
      http.listen(port, () => {
      	console.log(`Server start at http://localhost:${port}`);
      });

3. socket.js의 코드를 ` initSocket() `과 ` io.on ` 로 분리해 initSocket에서 로직 처리, io.on에서 해당하는 이벤트 발생 시 실행
   1. initSocket()은 소켓의 로직을 담당한다. 세가지의 function으로 구성되어있다. 각각 필요한 로직에 대한 함수를 가진 object를 리턴하는 함수이다.
      1. watchEvnet : 클라이언트에게서 온 socket.on 에 대해 처리
      2. notifyToChat : chat nameSpace 에 대한 emit 처리
      3. notifyToGlobal : global nameSpace 에 대한 emit 처리
   2. 클라이언트에게서 수신한 메세지는 어차피 connection 된 nameSpace의 것만 받아오는데, emit하는 메세지는 그게 안되는 모양.. 그래서 따로 function을 작성해주었다.
   3. io.on()은 nameSpace별로 분류한다. 

   4. // 앞의 코드 생략
      
      const chatSpace = io.of("/chat");
      const globalSpace = io.of("/global");
      
      chatSpace.on("connection", (socket) => {
      	const { watchJoin, watchSend, watchByebye } = initSocket(socket);
      
      	watchJoin(); 
      	watchSend();
      	watchByebye();
      });
      
      
      globalSpace.on("connection", (socket) => {
      	const { watchGlobal } = initSocket(socket);
      
      	watchGlobal();
      });
      
      // initSocket 생략

 

 

socket.js 코드가 너무 뭉탱이어서 항상 어떻게든 리팩토링을 하고싶었는데,

드디어 깔끔해진 코드를 보니 행벅하다..

 

이 버전의 코드 전문은 이 링크에 있습니다.

https://github.com/danaisboss/OKU/commit/62771d577747f8c40ac337d6c6fbaac2db1f1a76#diff-112ac233b1e3314b31d86e70dd54fd358cf3e246c38a63bf2e3085a47a0d6cf3

Update, socket.js 코드분리, server/app 분리 · danaisboss/OKU@62771d5