socket.io

socket.io는 웹 소켓(WebSockets) 기술을 활용한 실시간 양방향 통신 라이브러리다. socket.io는 클라이언트와 서버 간의 실시간 통신을 가능하게 하며, 실시간 채팅, 게임, 협업 애플리케이션 등에 자주 사용된다.

동작 원리

socket.io는 다음과 같은 구조와 원리로 동작한다:

1. 연결 수립: 클라이언트가 서버에 연결을 요청한다. 서버는 이를 수락하고 소켓 연결을 설정한다.
2. 이벤트 기반 통신: 클라이언트와 서버는 이벤트(event)를 통해 메시지를 주고받는다. 각 이벤트는 특정 메시지 유형을 나타내며, on 메서드로 이벤트 리스너를 설정하고 emit 메서드로 이벤트를 발생시킨다.
3. 양방향 통신: 클라이언트와 서버는 양방향으로 메시지를 주고받을 수 있다. 서버는 클라이언트에 메시지를 보낼 수 있고, 클라이언트는 서버에 메시지를 보낼 수 있다.

사용법

socket.io를 사용하여 간단한 채팅 애플리케이션을 만드는 예제를 통해 사용법을 설명한다.

서버 설정

1. 설치: 먼저 socket.io를 설치한다.

npm install socket.io

 

 2. 서버 코드: 다음은 간단한 Express 서버와 socket.io를 설정하는 코드입니다.

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

// Express 서버 설정
const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// 클라이언트 연결 이벤트 리스너 설정
io.on('connection', (socket) => {
  console.log('a user connected');

  // 클라이언트로부터 메시지를 받을 때 이벤트 리스너 설정
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    // 모든 클라이언트에 메시지 전송
    io.emit('chat message', msg);
  });

  // 클라이언트 연결 해제 이벤트 리스너 설정
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

// 서버 실행
server.listen(3000, () => {
  console.log('listening on *:3000');
});

 

서버에서 정적 파일 제공: Express 서버에서 index.html 파일을 제공하도록 설정한다.

 

// app.js에 추가
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

 

 

주요 메서드

• io.on(event, callback): 서버 측에서 특정 이벤트를 수신할 때 실행될 콜백을 설정한다. connection 이벤트는 클라이언트가 연결될 때 발생한다.
• socket.on(event, callback): 클라이언트 또는 서버에서 특정 이벤트를 수신할 때 실행될 콜백을 설정한다.
• socket.emit(event, data): 클라이언트 또는 서버에서 특정 이벤트와 데이터를 전송한다.
• io.emit(event, data): 서버에서 연결된 모든 클라이언트에게 이벤트와 데이터를 전송한다.
• socket.broadcast.emit(event, data): 연결된 다른 클라이언트들에게만 이벤트와 데이터를 전송한다.

예제 실행

서버를 실행하고 브라우저에서 http://localhost:3000에 접속하면 채팅 애플리케이션을 사용할 수 있다. 여러 브라우저 창을 열어 서로 메시지를 주고받을 수 있다.