자바스크립트 fetch API를 사용한 웹 소켓 통신 시스템 구현

10 Sep 2023

javascript

웹 소켓은 실시간 양방향 통신을 가능하게 해주는 기술로, 여러 사용자들 간에 실시간으로 데이터를 주고받을 수 있는 효과적인 방법입니다. 자바스크립트 fetch API는 웹 소켓을 사용하여 서버와 클라이언트 간에 데이터를 주고받을 수 있도록 도와주는 기능입니다. 이번 블로그 포스트에서는 자바스크립트 fetch API를 사용하여 웹 소켓 통신 시스템을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓 통신 시스템 구현을 위한 사전 준비

웹 소켓 통신 시스템을 구현하기 위해서는 몇 가지 사전 준비가 필요합니다. 먼저, 서버 측에서는 웹 소켓을 지원하는 백엔드 서버를 구축해야 합니다. 대표적으로 Node.js의 Socket.io 라이브러리를 사용할 수 있습니다. 클라이언트 측에서는 자바스크립트 fetch API를 사용하여 웹 소켓 연결을 설정할 수 있습니다.

자바스크립트 fetch API를 사용한 웹 소켓 통신 시스템 구현 방법

서버 측에서 웹 소켓을 지원하는 백엔드 서버를 구축합니다. Socket.io를 이용하여 간단한 예제를 작성해보겠습니다.

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('message', (msg) => {
    console.log('message: ' + msg);
    io.emit('message', msg);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

클라이언트 측에서는 자바스크립트 fetch API를 사용하여 웹 소켓 연결을 설정할 수 있습니다. 아래는 간단한 클라이언트 예제입니다.

fetch('http://localhost:3000')
  .then((response) => response.json())
  .then((data) => {
    const socket = io();
    socket.on('message', (msg) => {
      console.log('received message: ' + msg);
    });
    document.querySelector('#sendButton').addEventListener('click', () => {
      const message = document.querySelector('#messageInput').value;
      socket.emit('message', message);
    });
  })
  .catch((error) => {
    console.log('Error: ' + error);
  });

위의 클라이언트 코드에서는 먼저 fetch를 사용하여 서버와의 연결을 설정한 다음, 응답 데이터를 받아오는 작업을 수행합니다. 그 후 io() 함수를 호출하여 소켓을 생성하고, ‘message’ 이벤트를 수신하여 받은 메시지를 콘솔에 출력합니다. 마지막으로 ‘sendButton’이라는 버튼을 클릭할 때마다 입력한 메시지를 emit하여 서버로 전송합니다.

결론

자바스크립트 fetch API를 사용하여 웹 소켓 통신 시스템을 구현하는 방법에 대해 알아보았습니다. 웹 소켓을 사용하면 실시간 양방향 통신이 가능해지므로, 실시간 채팅 애플리케이션부터 실시간 데이터 업데이트까지 다양한 분야에서 활용할 수 있습니다. fetch API와 함께 웹 소켓을 활용하여 효율적이고 유연한 웹 애플리케이션을 개발해보세요.