[티켓 예매 프로젝트] 6. 실시간 입장 확인 (Socket.IO)

공연장 입장 시 QR코드 티켓을 찍고 입장 확인을 받은 후에 들어간다. 코드를 찍는 안드로이드 앱에서 입금 여부를 확인한 후에 직접 입장할 수도 있겠지만 아무래도 눈에 보이는 변화가 있으면 좋을거란 생각이 들었다.

 

소켓을 이용한 실시간 통신을 넣어보기로 했다. 서버에서 입장 확인이 되면 클라이언트(해당 관객 기기)로 데이터를 보내주는 방식이다.

 

백엔드

대장님이 작업한 백엔드 코드이다. 열심히 배워왔다.

 

const { Server } = require('socket.io');
const { httpServer } = require('../index');

class SocketSingleton {
  constructor(httpServer) {
    // try catch  없이 초기 설정이 fail 하면 서버 바로 종료
    this.io = new Server(httpServer, {
      /* options */
      cors: {
        origin: ['https://admin.gosrock.link','https://gosrock.link', 'http://localhost:3000']
      }
    });
    this.adminSocket = this.io.of('/socket/admin');
    this.ticketsSocket = this.io.of('/socket/tickets');
    this.startCheck = false; // 소켓 서버 실행 체크 변수
  }

  // 소켓 서버 실행
  startSocketServer = () => {
    /**
    *
    **/
  };
}

module.exports = new SocketSingleton(httpServer);

생성자 안에서 소켓을 초기화해주고 네임스페이스를 만들어준다. 공식문서가 매우 잘 되어 있다.

adminSocket 은 어드민페이지에서 입장확인할 때, ticketsSocket은 프론트 페이지에서 입장확인할 때 사용할 네임스페이스이다.

 

싱글톤

소켓 객체를 싱글톤으로 만들어서 외부에서도 값에 접근할 수 있도록 했다. new SocketSingleton(httpServer); 로 인스턴스를 생성하고 모듈로 exports 해주었다. nodejs에서 한번 load(require)된 모듈은 require.cache 라는 객체에 캐싱되는데, 즉 모듈을 require 할때마다 새로운 인스턴스가 생성되는게 아니라 캐싱된 객체 인스턴스를 재사용한다. 그렇기 때문에 싱글톤으로 사용할 수 있게 되는 것!!

 

const express = require('express');
const app = express();
const { createServer } = require('http');
const httpServer = createServer(app);
module.exports = { httpServer };
//...
const SocketSingleton = require('./sockets');


const server = () => {
    //...
    SocketSingleton.startSocketServer();
    //...
    httpServer.listen(5000);
}

server();

index.js에서는 소켓 싱글톤 객체를 위처럼 불러와서 사용한다.

 

소켓 연결하기

  startSocketServer = () => {
    if (this.startCheck) throw Error('소켓서버를 이중으로 실행했습니다.');
    const connectionAuthMiddleware = require('./connectionAuthMiddleware');
    const ticketsUrlMiddleware = require('./ticketsUrlMiddleware');

    connectionAuthMiddleware();
    ticketsUrlMiddleware();
    this.io.on('connection', socket => {
      socket.disconnect();
    });
    this.adminSocket.on('connection', socket => {
      console.log('admin is enter', socket.data);
    });

    this.ticketsSocket.on('connection', socket => {
      console.log('tickets is enter', socket.data.ticketId);
      //룸에 강제삽입

      socket.join(socket.data.ticketId);
    });

    this.startCheck = true;
  };

startSocketServer 메소드이다. 아까 생성자에서 초기화된 네임스페이스별로 connection 정보를 따로 받고 있다. 기본 네임스페이스에 연결된 소켓은 필요없으니 바로 끊어준다고 했다.

 

ticketsSocket이 연결되면 socket.join(socket.data.ticketId); 로 room을 만들고 join한다. 입장확인 정보를 큐알코드를 찍은 각각의 기기에 개별적으로 보내야 하기 때문에 room을 사용한다. 채팅으로 치면 갠톡방. room은 socket.data.ticketId의 값으로 구분하는데, 그 값은 메소드를 실행한 후에 미들웨어에서 받아서 넘겨준 값이다.

 

미들웨어

미들웨어에서는 소켓 통신에 담긴 헤더 토큰 검증과 에러 처리를 하고 넘겨준다. 토큰이 검증되었다면 socket.data.ticketId = ticketId; 로 직접 socket 객체에 데이터를 담는다.

 

https://socket.io/docs/v3/middlewares/#sending-credentials

클라이언트에서 auth 옵션으로 보낸 정보를 서버에선 handshake.auth로 받을 수 있다.

 

입장 확인

SocketSingleton.ticketsSocket
.to(ticketId)
.emit('enter', { enterState: true, ticketInfo: ticketUpdated });

안드로이드 기기에서 보낸 입장확인 api 요청을 받게 되면 티켓의 입금상태를 검증한 후에 위와 같은 메소드를 실행한다. .to(ticketId).emit() 으로 특정한 ticketId의 room에만 emit을 보낼 수 있다.

 

싱글톤을 쓰는 이유는 여기에 있다. SocketSingleton 인스턴스가 딱 한개밖에 없기 때문에 어디서 접근하든 똑같은 객체에 접근할 수 있는 것이다.

 

 

프론트

내가 담당한 프론트엔드 부분 코드는 훨씬 간단하다. 서버에서 '입장 확인'이라는 정보가 오면 리덕스에 저장된 티켓 상태를 바꿔주고 티켓의 색깔을 바꿔주기만 하면 된다.

 

npm install socket.io-client

socket.io-client 를 설치하고 import io from 'socket.io-client' 로 임포트해준다.

 

const [socket, setSocket] = useState();

useEffect(() => {
  if (!socket) {
    setSocket(
      io('https://api.gosrock.link/socket/tickets', {
        auth: {
          ticketId: ticketId
        }
      })
    );
  } else {
    socket.on('enter', data => {
      if (data.enterState) {
        dispatch({ type: 'TICKET_ENTER_SUCCESS', payload: data.ticketInfo });
        toast('입장 완료', 5000);
      }
    });
  }
}, [socket]);

socket state를 만들어서 사용했다. useEffect 훅을 사용하는게 제일 좋은 방법인지는 잘 모르겠다. 소켓과 연결을 첫 렌더링 시에만 하기 위해 훅 안에 넣었다.

 

io()의 첫번째 인자로 도메인을 넣고 초기화 해준다. /socket/tickets 네임 스페이스로 연결이 된다. 두번째 인자로는 옵션이 들어가는데, auth 옵션으로 네임 스페이스로 연결할 때 인증을 위한 토큰을 담아서 보낼 수 있다. 문서

 

socket.on()으로 이벤트를 받을 수 있다. 'enter'이벤트가 왔을 때 data를 열어서 입장 확인이면 리덕스에 디스패치한다.

 

결과

포스트맨으로 보내보았다. 안드로이드 기기에서 서버로 보내는 입장확인 api이다. 서버는 티켓의 입금 상태를 확인하고 emit으로 보낸다.

 

리덕스에 저장된 티켓의 상태가 'enter'이면 QR코드 주변의 테두리가 금색이 되도록 했다. 이쁘네. 토스트 문구도 5초동안 올라왔다가 사라지도록. 아무도 신경 안쓸 것 같지만 맘에 든다!! 이전부터 소켓통신을 써보고 싶었는데 이번 기회에 적절하게 넣어볼 수 있어서 좋았다. 다음 달에는 타입스크립트를 써봐야겟다.