socket.io

socket.io

 

자바스크립트를 사용해 웹소켓을 사용하길 원한다면 가장 많이 사용되는 라이브러리

웹소켓을 사용할 수 없는 브라우저인 경우 서버에서 데이터를 일정 간격마다 받아오는 polling 기능으로 실시간 기능 구현

 

socket.io는 웹소켓과 다르다!

> socket.io는 웹소켓을 포함하여, 웹소켓을 사용하지 못하는 환경에서도 웹소켓과 비슷하게 사용이 가능하도록 구현해놓은 라이브러리

 

socket.js 예시 (sansamPet)

const socketIo = require('socket.io');
const http = require('./app.js');

const io = socketIo(http);
const socketIdMap = {};
let admin = '';

io.on('connection', sock => {
  const { watchLogin, watchByeBye, watchNotice, watchADMIN } = initSocket(sock);
  watchADMIN();
  watchLogin();
  watchNotice();
  watchByeBye();
});

function initSocket(sock) {
  socketIdMap[sock.id] = null;
  console.log(sock.id, '새로운 소켓이 연결됐어요!');

  // 특정 이벤트가 전달되었는지 감지할 때 사용될 함수
  function watchEvent(event, func) {
    sock.on(event, func);
  }

  // 연결된 모든 클라이언트에 데이터를 전달하는 함수
  function notifyEveryone(event, data) {
    sock.broadcast.emit(event, data);
  }

  // 특정한 클라이언트에 데이터를 전달하는 함수
  function notifyTo(socketId, event, data) {
    io.to(socketId).emit(event, data);
  }

  return {
    watchNotice: () => {
      watchEvent('NOTICE', data => {
        const payload = {
          notice: data.notice,
          date: new Date().toISOString(),
        };
        console.log('전체 공지 발송', payload.notice, payload.date);
        notifyEveryone('NOTICE_EVERYONE', payload);
      });
    },

    watchADMIN: () => {
      watchEvent('ADMINLOGIN', data => {
        admin = sock.id;
      });
    },
    watchLogin: () => {
      watchEvent('LOGIN', data => {
        const payload = {
          nickname: data.nickname,
          date: new Date().toISOString(),
        };
        console.log('로그인 기록', payload.nickname, payload.date);
        notifyTo(admin, 'LOGIN_DATA', payload);
      });
    },

    watchByeBye: () => {
      watchEvent('disconnect', () => {
        delete socketIdMap[sock.id];
        console.log(sock.id, '연결이 끊어졌어요!');
      });
    },
  };
}

 

socket.io 사용시 emit 보안

emit에 이름이 노출되면 모두가 볼 수 있다.

> response.json({key: emit이름})안에 키는 아무거나, 값으로 emit이름을 넣어준다.