1. 설치

npm install ws

2. 사용

1) 서버

import express from 'express';
import { WebSocketServer } from 'ws';

const app = express();

const server = app.listen(5000, () => {
  console.log('서버가 실행됐습니다.');
});

const wss = new WebSocketServer({ server });

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

2) 클라이언트

// WebSocket 연결 생성.
const socket = new WebSocket('ws://localhost:5000');

// 연결이 열리면 메시지를 보냄
socket.addEventListener('open', event => {
  console.log('Connected to the server');
});

// 서버로부터 메시지를 수신하면 콘솔에 출력
socket.addEventListener('message', event => {
  console.log('Message from server:', event.data);
});

// 버튼 클릭 시 메시지를 서버로 전송
document.getElementById('sendButton').addEventListener('click', () => {
  const message = document.getElementById('messageInput').value;
  socket.send(message);
});

// 연결이 닫히면 콘솔에 출력
socket.addEventListener('close', event => {
  console.log('Disconnected from the server');
});

// 종료 버튼 클릭 시 연결 종료
document.getElementById('closeButton').addEventListener('click', () => {
  socket.close();
  console.log('Connection closed by client');
});

WebSocket() 메서드는 Javascript 에 내장돼있다.

3. 작동 원리

1) 연결

클라이언트에서

const socket = new WebSocket('ws://localhost:5000');

를 수행하면, 서버에서

wss.on('connection', (ws) => {
  console.log('New client connected');
});

이 실행된다. 그러면 클라이언트에서

socket.addEventListener('open', event => {
  console.log('Connected to the server');
});

이 실행된다.

2) 메시징

클라이언트에서

document.getElementById('sendButton').addEventListener('click', () => {
  const message = document.getElementById('messageInput').value;
  socket.send(message);
});

를 수행하면, 서버에서

ws.on('message', (message) => {
  console.log(`Received message: ${message}`);
  ws.send(`Server received: ${message}`);
});

이 실행된다. 그러면 클라이언트에서

socket.addEventListener('message', event => {
  console.log('Message from server:', event.data);
});

이 실행된다.

3) 종료

클라이언트에서

document.getElementById('closeButton').addEventListener('click', () => {
  socket.close();
  console.log('Connection closed by client');
});

를 수행하면, 서버에서

ws.on('close', () => {
  console.log('Client disconnected');
});

이 실행된다. 그러면 클라이언트에서

socket.addEventListener('close', event => {
  console.log('Disconnected from the server');
});

이 실행된다.