1. 문제의 인식 : 관심사 분리가 안된 소켓 코드

const io = new Server(httpServer, {});

io.on('connection', (socket) => {
	socket.on('disconnect', () => {
		//!!! 소켓에 관련된 로직 !!!
  });

	...

  socket.on('domainA', () => {
		//!!! '도메인A'에 관련된 로직 !!!
  });

  socket.on('domainB', () => {
		//!!! '도메인B'에 관련된 로직 !!!
  });

	...
}

• 소켓 통신의 경우, 서버에서 client가 connect될 때, client의 소켓과 통신할 수 있는 socket 객체가 인자로 들어오는 callback 함수를 통해서 socket 객체에 접근을 하고, 이벤트를 모두 등록해주어 하는 문제가 있었다.
• 즉, 서로 다른 도메인에 대한 분리가 안 되어 있어 io.on(’connection’, callback)과 같은 형태에서 callback 함수가 너무 많은 책임을 지고 있었고, callback 함수가 가지는 관심사가 직접적으로 노출되어 있었다.
• 그 결과, 새로운 도메인이 추가되거나, 도메인이 삭제되는 등의 변경점이 발생하면 전반적인 코드에 대해서 수정이 필요했고, callback 함수에서 이 모든 걸 일일이 관리해주어야 하는 문제가 있었다.

2. 문제 접근 : REST API 서버는 도메인 별로 Controller를 나누던데?

• 기존에 REST API 서버를 제작할 때에는 여러개의 router로 관심사를 분리하고 각각에 대해서 콜백 함수를 따로 분리하거나 repository 와 service 레이어를 따로 두는 형태로 가독성을 높힐 수 있었다.
• 기존에 사용한 경험이 있는 프레임워크에서는 도메인에 따라 Controller와 Service, 그리고 Repository를 별도로 분리하여 비즈니스 로직을 나누어주는 형태로 이런 문제를 해소하였다. 즉, 어떤 도메인에 변경사항이 발생했을 때 최선의 경우 Service나 Repository, 그리고 Controller 중 하나의 코드만 수정할 수 있고, 최악의 경우에도 하나의 도메인에 속하는 객체들을 수정해주는 형태로 변경 사항의 확산을 막을 수 있었다.

3. 나의 시도 : 그럼 Socket 서버에서는 관심사 분리가 어려울까?

Application Layer 구현하기

• 우선, io 객체를 관리하는 App class를 선언하여 서버가 동작하는 파일과 구조를 담당하는 파일을 분리하려고 시도하였다.

  import { ControllerInterface } from './controller/controller.interface';
  import * as socketIo from 'socket.io';
  import http from 'http';
  
  export default class App {
    httpServer: http.Server;
    io: socketIo.Server;
  
    constructor(controllers: ControllerInterface[]) {
      this.httpServer = http.createServer();
      this.io = new socketIo.Server(this.httpServer, {});
  
      this.io.on('connection', (socket) => {
  
        controllers.forEach((controller) => {
          controller.register(socket);
        });
      });
    }
  
    listen(port: number, callback?: () => void) {
      this.httpServer.listen(port).then(callback || () => {});
    }
  }
  

Controller Layer 구현하기

• 그 후, Controller의 기본적인 형태를 결정하였다.

  export interface ControllerInterface {
    register(socket: Socket): void;
  }
  

  • App class의 객체가 최초 생성될 때 controller의 배열을 인자로 받고, 새로운 client가 연결될 때마다 controller들의 register() 함수를 각각 호출하는 형태로 이벤트를 등록하는 부분과 실제 비즈니스 로직이 작성되는 부분의 두 관심사를 분리하고자 하였다.

• 다음은 실제로 구현된 Controller의 예시이다

  class KeywordController implements ControllerInterface {
    constructor(
      private readonly keywordService: KeywordServiceInterface,
    ) {}
  
    onSelectKeyword(socket: Socket): (input: inputDTO, callback?: (error: any) => void) => void {
      return async (
        input: inputDTO,
        errorCallback?: (error: any) => void
      ) => {
        try {
  				// 비즈니스 로직
        } catch (error) {
          errorCallback && errorCallback(createFailedResponseTemplate(error));
        }
      };
    }
   
    register(socket: Socket) {
      socket.on(EventEnum.select_keyword, this.onSelectKeyword(socket));
    }
  }
  
  export { KeywordController };
  export default new KeywordController(keywordService, KeywordUserService, CommunityUserService, CommunityService);
  

  • socket.io에서 제공하는 ack 함수의 기능을 활용하여 error에 대한 1:1 대응을 가능하도록 하였다.
  • Controller에서는 client socket 객체와의 직접적인 연관이 없기 때문에 외부에서 이를 주입하면 콜백함수를 반환하는 형태로 이벤트를 등록할 수 있는 방식으로 register 함수를 구현하였다.
  • 만약, 새로운 이벤트에 대한 요구가 추가된다면 다음과 같은 형태로 Controller를 쉽게 확장할 수 있다.

  class KeywordController implements ControllerInterface {
    constructor(
      private readonly keywordService: KeywordServiceInterface,
    ) {}
  
  	// 기존의 이벤트
  	onSelectKeyword(socket: Socket): (input: inputDTO, callback?: (error: any) => void) => void {
      return async (
        input: inputDTO,
        errorCallback?: (error: any) => void
      ) => {
        try {
  				// 비즈니스 로직
        } catch (error) {
          errorCallback && errorCallback(createFailedResponseTemplate(error));
        }
      };
    }
  
  	//!!! 추가된 이벤트 !!!//
  	onNewEvent(socket: Socket): (input: newInputDTO, callback?: (error: any) => void) => void {
  		return async (
  			input: newInputDTO,
  			errorCallback?: (error: any) => void
  		) => {
  		// 새로운 비즈니스 로직
  		}
  	}
  
    register(socket: Socket) {
      socket.on(EventEnum.select_keyword, this.onSelectKeyword(socket));
  		//!!! 새로운 이벤트 추가 !!!
  		socket.on('new event', this.onNewEvent(socket));
    }
  }
  
  ...
  

  • 모든 객체는 Interface에 의존하도록 의존성을 작성하였다.
  • 마지막으로, 싱글톤 방식으로 객체의 메모리 소요를 최소화하기 위해 새로운 객체를 형성하여 export하는 방식으로 구현하였다.

• 마지막으로, Controller를 일괄적으로 App 객체를 생성할 때 등록하고 실행하면 모든 이벤트에 대해서 적용이 되도록 한다.

  // src/controller/index.ts
  
  export default [KeywordController, CommunityController];
  

  import App from './app';
  import Controllers from './controller/index.ts';
  
  new App(Controllers).listen(3000);