Socket.io

Socket.io

Socket.IO

연결

const socket = io("https://server-domain.com");

기본 구조

// server-side
io.on('connection', (socket: Socket) => {
  console.log('사용자가 연결되었습니다.');

  socket.on('chat message', (msg: string) => {
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('사용자 연결이 끊어졌습니다.');
  });
});

// client-side
import { io, Socket } from 'socket.io-client';
const socket: Socket = io('http://localhost:3000');

socket.on('chat message', (msg: string) => {
  const li = document.createElement('li');
  li.textContent = msg;
  messages.appendChild(li);
});

Complete API

1. 이벤트 관련:

   • socket.emit(eventName[, ...args][, ack]): 이벤트 발생

   • socket.on(eventName, callback): 이벤트 리스너 등록

   • socket.once(eventName, callback): 일회성 이벤트 리스너 등록

   • socket.off(eventName, listener) : 이벤트 리스너 삭제.

     예시

     const listener = (...args) => {
       console.log(args);
     };
     
     socket.on("details", listener);
     
     // 나중에 리스너 제거
     socket.off("details", listener);

2. 룸 관련:

   • socket.join(room): 소켓을 특정 룸에 추가
   • socket.leave(room): 소켓을 특정 룸에서 제거
   • socket.to(room).emit(eventName[, ...args]): 특정 룸에 이벤트 발생

3. 연결 관련:

   • socket.disconnect(close): 소켓 연결 해제
   • socket.connected: 연결 상태 확인
   • socket.id: 소켓의 고유 식별자

4. 데이터 전송:

   • socket.compress(value): 데이터 압축 설정
   • socket.volatile: 휘발성 메시지 전송 설정

5. 인증 및 보안:

   • socket.handshake: 핸드셰이크 정보 접근
   • socket.client: 기본 클라이언트 객체 접근

6. 네임스페이스 관련:

   • socket.nsp: 소켓이 속한 네임스페이스 객체

7. 미들웨어:

   • socket.use(fn): 미들웨어 함수 등록

확인 응답

기본적으로 emit은 단방향이지만, 아래 방법을 통해 클라이언트에서 emit을 보낸 후에 잘 받았는지 확인이 가능하다.

Server

io.on("connection", (socket) => {
  socket.on("update item", (arg1, arg2, callback) => {
    console.log(arg1);// 1
    console.log(arg2);// { name: "updated" }
    callback({
      status: "ok"
    });
  });
});

• 서버는 "update item" 이벤트를 수신합니다.
• 이벤트 핸들러는 세 개의 인자를 받습니다: arg1, arg2, callback.
• 처리가 완료되면 callback 함수를 호출하여 클라이언트에 응답을 보냅니다.

Client

socket.emit("update item", "1", { name: "updated" }, (response) => {  
	console.log(response.status); *// ok*
});

• 클라이언트는 "update item" 이벤트를 emit합니다.
• 첫 두 인자는 서버로 전송할 데이터입니다.
• 마지막 인자는 서버의 응답을 처리할 콜백 함수입니다.

모든 이벤트를 듣기

socket.onAny(listener)

모든 수신 이벤트를 디버깅하거나 할 때 유용.

typescriptsocket.onAny((eventName, ...args) => {
  console.log(`이벤트 수신: ${eventName}`);
  console.log('인자:', args);
});

• 모든 수신 이벤트에 대한 리스너를 추가합니다.
• listener 함수는 이벤트 이름과 전달된 인자들을 받습니다.