[항해 14기] 개발일지 55 (실전프로젝트 - Socket.io)

실전프로젝트 - 3주차

 

1. Socket.io

1) 개요

- 실시간 웹 응용 프로그램을 구축하기 위한 JavaScript 라이브러리. 웹 소켓(WebSocket)을 기반으로 클라이언트와 서버 간의 양방향 통신을 지원 
- 실시간 데이터 전송을 위한 다양한 기능과 추상화된 인터페이스를 제공. 이벤트 기반 아키텍처를 사용하여 클라이언트와 서버 간의 상호 작용을 간단하게 처리할 가능

- 푸시 알림, 실시간 채팅, 다중 작업 등에 이용 가능

2) 기본 로직

- 설치 : npm install socket.io

- 기본 로직

//수신 로직
// 소켓에 접속한 모든 클라이언트에게 전송
io.emit('event', data);

// 이벤트 명을 지정하고 데이터 송신
socket.emit('event', data)

// 송신 주체를 제외한 모든 클라이언트에게 전송
socket.broadcast.emit('event', msg);

// 특정 클라이언트에게만 전송(방 개념)
io.to(room).emit('event', data);



//송신 로직
// 클라이언트와 소켓 연결/해제 이벤트
io.on('connection/disconnection', (socket) => {
});

// 이벤트를 받고 콜백함수 실행
socket.on('event', (data) => {
})

- 클라이언트 로직

<script src="/socket.io/socket.io.js"></script>
<script>   
   const socket = io.connect('도메인/ip', {
      path: '/socket.io', // 서버 path와 통일
      // transports: ['websocket'] // ws통신 설정 
   });
   
   // 서버에서 데이터 수신
   socket.on('event1', (data) => {
      console.log(data);
      
      // 서버로 데이터 송신
      socket.emit('event2', data2);//
   });
</script>

- 서버 로직

const express = require("express");
const app = express();
const port = 3000;
const socket = require("socket.io");
const server = app.listen(port, () => {});
const io = socket(server, { path: "/socket.io" });

//웹소켓 연결
io.on('connection', (socket) => {

  //연결 종료
  socket.on('disconnect', () => { 
     clearInterval(socket.interval);
  });
  
  socket.on('error', (err) => {
     console.error(err);
  });

  //클라이언트 데이터 수신
  socket.on('event2', (data) => {
     console.log(data);
  });

  //클라이언트에게 데이터 송신
  socket.emit('event', data);
});

 

 

 

2. 트러블슈팅/회고

1) DB 변화 감지 이슈

- 일정 주기마다 que table에서 접속한 store_id에 해당하는 db들을 emit으로 클라이언트에게 전송 중

- db가 변하지 않을 때도 db조회 + 웹소켓 수신이 진행되고 있으므로 매우 비효율적인 로직

- mysql-events, mysql trigger 등을 시도 하였으나 구현에 시간이 오래 걸려 FE 작업을 위하여 위의 로직으로 임시 배포

- 차주에 리팩토링을 통하여 dq 변화 감지시에만 emit 실행되도록 변경 예정