socket.io

WebSocket과 같이 실시간 상호작용을 위해 사용하는 기술입니다. 상호작용 웹 서비스를 만드는 표준 기술은 WebSocket이고 socket.io를 사용하면 실시간 웹 서비스를 손쉽게 사용할 수 있습니다.

socket.io는 javascript를 이용해 구현하며 서버 구현체도 Node.js 밖에 사용하지 못한다는 특징이 있습니다.

---

설치하기

// React client
npm install socket.io-client

---

기본 문법

서버와 연결하기

import io from 'socket.io-client';

const socket = io([서버 주소]);

위 코드로 서버의 socket과 연결되고, 서버에서 connection 이벤트가 발동합니다.

socket.emit('join', {
  joiningUserPk: userPk,
  targetUserPk: targetPk,
  nickname,
});

클라이언트에서 join 이벤트가 발생하고 이벤트 발생 시에 필요한 데이터를 서버에 전달합니다. 서버는 join 이라는 이벤트가 on 된다면 클라이언트에서 보내는 데이터를 받아 약속된 동작을 수행하게 됩니다.

socket.on('updateMessage', (data) => {
  chatLogState.setChatLogs((chatLog) => chatLog.concat(data));
});

서버에서 updateMessage라는 이벤트가 emit되면 클라이언트에서 감지해 동작을 수행하는 코드입니다. 최초로 한번 on 실행 시 socket은 해당 이벤트를 계속 감시하게 되고 서버에서 updateMessage라는 이벤트가 emit 될 때마다 해당 코드를 수행합니다.

---

참고

WebSocket과 Socket.io

socket io사용하기