[javascript] Express.js에서의 웹소켓 사용법

04 Dec 2023

javascript

Express.js는 Node.js를 기반으로한 웹 애플리케이션 프레임워크입니다. 웹소켓은 실시간 통신을 가능하게 하는 프로토콜입니다. Express.js에서 웹소켓을 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

1. Express.js 앱 설정

먼저, Express.js 앱의 설정을 해야합니다. app.js 파일이 있다고 가정하고, 아래와 같이 필요한 패키지를 import 합니다.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

그리고 Express.js 앱과 서버를 생성하고, 웹소켓 서버를 만들어줍니다.

const app = express();
const server = http.createServer(app);
const io = new Server(server);

2. 웹소켓 이벤트 핸들링

웹소켓 서버를 생성했으니, 이제 웹소켓 이벤트를 핸들링해야합니다. 아래는 connection 이벤트 핸들러를 추가하는 예시입니다.

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

위 코드에서 connection 이벤트는 클라이언트가 웹소켓에 연결될 때마다 발생합니다. disconnect 이벤트는 클라이언트가 웹소켓과의 연결을 끊을 때 발생합니다.

3. 클라이언트에서 웹소켓 사용

Express.js 앱에서 웹소켓을 생성하고 사용하는 방법은 다음과 같습니다.

io.on('connection', (socket) => {
  socket.emit('message', 'Hello, client!');

  socket.on('message', (data) => {
    console.log('received message:', data);
  });
});

위 코드에서 emit 함수로 클라이언트에게 message 이벤트를 보내고, 클라이언트로부터 message 이벤트를 받아 출력합니다.

클라이언트에서도 웹소켓을 사용하기 위해서는 socket.io-client 패키지를 설치하고 아래와 같이 사용합니다.

const socket = io();

socket.on('message', (data) => {
  console.log('received message:', data);
});

socket.emit('message', 'Hello, server!');

위 코드에서 io() 함수로 웹소켓에 연결하고, on 함수로 message 이벤트를 받아 출력합니다. emit 함수로 message 이벤트를 서버에게 보냅니다.

Express.js에서의 웹소켓 사용법에 대해 간략하게 알아보았습니다. 자세한 내용은 Express.js와 Socket.IO 공식 문서를 참고하세요.

References:

Express.js 공식 문서: https://expressjs.com/
Socket.IO 공식 문서: https://socket.io/