[230106] typescript + express + socket.io

js로 구현하는 예제는 많은데 그대로 따라가려니 typescript 에러가 많이 떠서 생각보다 꽤 오래 헤맸다...

로컬 환경에서 테스트 완료한 기반 코드를 기록해둔다.

//app.ts

import * as express from 'express';
import * as cors from 'cors';
import helmet from 'helmet';
import * as compression from 'compression';
import { createServer } from 'http';
import morgan from './middlewares/morgan';
import router from './routes';
import errorHandler from './middlewares/errorHandler';
import logger from './config/logger';
import Socket from './socket';

class App {
  private app;

  private httpServer;

  constructor() {
    this.app = express();
    this.httpServer = createServer(this.app); //여기서 app에 http를 덧씌운다
    Socket(this.httpServer);
  }

  private setMiddlewares() {
    this.app.use(cors());
    this.app.use(helmet());
    this.app.use(compression());
    this.app.use(express.json());
    this.app.use(express.urlencoded({ extended: true }));
    this.app.use(morgan);
    this.app.use('/api', router);
    this.app.use(errorHandler);
  }

  public listen(port: number) {
    this.setMiddlewares();
    this.httpServer.listen(port, () => { //기존 app.listen에서 httpServer.listen으로 변경
      logger.info(`${port} 포트로 서버가 열렸습니다.`);
    });
  }
}

export default App;

//socket.ts

import * as http from 'http';
import { Server } from 'socket.io';
import './config/env';

const Socket = (server: http.Server) => {
  const io = new Server(server, {
    cors: {	//CORS 오류 방지
      origin: '*',
    },
  });

  io.on('connection', (socket) => {	//연결되면 실행
    console.log('New client connected');

    socket.on('disconnect', () => console.log('user disconnect', socket.id));	//연결이 해제되면 실행

    socket.on('new_chat', (data) => {	//new_chat이라는 이벤트를 받으면 실행
      io.emit('update', data);	//data를 담아 update 이벤트 실행
    });
  });
};

export default Socket;