WebSocket

강정우·2023년 6월 1일

목록 보기

9/32

WebSocket

WebSocket은 웹 브라우저와 웹 서버 간의 실시간 양방향 통신을 제공하는 프로토콜이다.
HTTP 프로토콜과 달리, WebSocket은 지속적인 연결을 유지하며 양방향 데이터 흐름을 지원한다.
이는 클라이언트와 서버 간에 실시간으로 데이터를 주고받을 수 있게 해준다.

즉, WebSocket을 사용하면 서버에서 클라이언트로 데이터를 푸시하거나, 클라이언트에서 서버로 데이터를 전송하는 등의 실시간 상호작용을 쉽게 구현할 수 있어, 이를 통해 실시간 채팅, 주식 시세 업데이트, 게임 등의 애플리케이션을 개발할 수 있다.

동작과정

HTTP 기반으로 시작하여 업그레이드 요청을 보낸다.
서버와 클라이언트 간에 WebSocket 연결을 설정한다.
연결이 성공적으로 이루어지면, 양방향으로 데이터를 주고받을 수 있는데 데이터는 텍스트 또는 이진 형식으로 전송할 수 있으며, 서버나 클라이언트는 언제든지 데이터를 보낼 수 있다.

특징

WebSocket은 전이중(full-duplex) 통신을 지원하며, 실시간성과 효율성을 제공한다.
또한, HTTP와 다르게 각 요청마다 새로운 연결을 맺지 않기 때문에 오버헤드가 줄어든다.

참고

웹 소켓은 HTML5에서 표준으로 추가되었으며, 대부분의 최신 웹 브라우저에서 지원된다.
또한, 서버 측에서는 WebSocket을 지원하는 라이브러리나 프레임워크를 사용하여 손쉽게 구현할 수 있다.

오버헤드

오버헤드(overhead)는 시스템이나 프로토콜을 실행하기 위해 필요한 추가적인 부하나 자원이다.
HTTP와 같은 기존의 요청-응답 방식에서는 클라이언트가 서버에 요청을 보낼 때마다 새로운 연결을 맺어야 하는데 이는 매 요청마다 TCP/IP 연결을 설정하고 해제하는 과정을 거쳐야 함을 의미한다.
하지만 WebSocket은 "지속적인 연결"을 유지하며, 서버와 클라이언트 간에 데이터를 주고받을 수 있다.
이렇게 연결을 유지하는 것은 매번 새로운 연결을 설정하는 오버헤드를 줄일 수 있다는 의미이다.

즉, 연결 설정과 해제를 반복하는 비용이 사라지기 때문에, WebSocket을 사용하면 효율적인 통신이 가능해진다..

또한, HTTP와 달리 WebSocket은 헤더 정보를 최소화하여 데이터 전송을 간소화한다.
HTTP 요청과 응답에는 다양한 메타데이터와 상태 정보가 포함되어야 하지만, WebSocket은 초기에 한 번 연결 설정 후에는 메타데이터를 추가로 전송할 필요가 없다. 이로 인해 데이터 전송에 따르는 오버헤드가 줄어들게 되기도 한다.

WebSocket Library

Socket.IO: Socket.IO는 실시간 양방향 통신을 위한 JavaScript 라이브러리이다.
클라이언트 측 JavaScript 라이브러리와 서버 측 Node.js 모듈로 구성되어 있으며, WebSocket을 포함한 다양한 전송 프로토콜을 사용할 수 있다.
SignalR: SignalR은 ASP.NET 기반의 실시간 웹 애플리케이션 개발을 위한 라이브러리이다.
WebSocket을 기반으로 한 실시간 통신 외에도, 기존의 폴링이나 Long Polling과 같은 대체 전송 방식을 지원한다.
SockJS: SockJS는 웹 브라우저와 서버 간에 WebSocket을 포함한 실시간 통신을 제공하는 JavaScript 라이브러리이다. SockJS는 WebSocket이 지원되지 않는 환경에서는 폴링과 같은 폴백 기술을 사용하여 실시간 통신을 대체할 수 있다.
Spring WebFlux: Spring WebFlux는 Spring Framework의 리액티브 웹 개발을 위한 모듈 중 하나로, WebSocket을 포함한 리액티브 웹 애플리케이션을 개발할 수 있다.
Spring WebFlux는 Netty와 같은 비동기 I/O 런타임을 기반으로 작동하여 높은 성능과 확장성을 제공한다.
Django Channels: Django Channels는 Python 웹 프레임워크인 Django를 확장하여 WebSocket을 지원하는 라이브러리이고 Django Channels를 사용하면 Django 애플리케이션에서 비동기 및 실시간 기능을 추가할 수 있다.

WebSocket Library 4 vue.js, react

Vue-WebSocket(vue.js)

Vue.jsdptj WebSocket을 지원하는 프레임워크는 Vue.js 자체의 공식 라이브러리인 Vue-WebSocket이다.
Vue-WebSocket은 Vue.js 애플리케이션에서 WebSocket 통신을 쉽게 구현할 수 있도록 도와준다.
Vue-WebSocket은 Vue 컴포넌트에서 WebSocket 연결을 설정하고 이벤트를 처리하는 기능을 제공하여 실시간 양방향 통신을 구현할 수 있다.

web socket 설치

npm install vue-websocket

예제코드

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue WebSocket Example</title>
</head>
<body>
  <div id="app">
    <h1>WebSocket Example</h1>
    <div v-if="message">{{ message }}</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
  <script src="main.js"></script>
</body>
</html>

import Vue from 'vue';
import VueWebSocket from 'vue-websocket';

Vue.use(VueWebSocket, 'ws://localhost:8000');

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  websocket: {
    message: {
      handler(data) {
        this.message = data;
      }
    }
  }
});

new Vue({
  // ...
}).$mount('#app');

위의 코드에서는 Vue.js와 Vue-WebSocket을 사용하여 간단한 웹 페이지를 구성하고, WebSocket 서버로부터 메시지를 수신하여 화면에 표시하는 예제이다.
Vue.use()를 사용하여 VueWebSocket을 전역적으로 사용할 수 있도록 설정하고 Vue 인스턴스의 websocket 속성에 WebSocket 이벤트 핸들러를 정의한다.
이 예제에서는 'message' 이벤트를 수신하여 데이터를 받아와 화면에 표시하는 예제코드이다.
또한 WebSocket 서버 주소로 'ws://localhost:8000'을 사용하고 있다.
당연, 해당 주소는 실제 WebSocket 서버의 주소로 변경해야 한다.
또한, WebSocket 서버와의 통신에 사용되는 Socket.IO 라이브러리도 script 태그를 통해 로드되어야 한다.
이렇게 구현된 예제는 WebSocket 서버로부터 메시지를 수신하고, 해당 메시지를 Vue 인스턴스의 데이터에 바인딩하여 동적으로 화면에 표시하는 간단한 기능을 제공합니다.

send messages (Options API)

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$socket.send('Hello WebSocket!');
    }
  }
}
</script>

위의 코드는 Vue.js 컴포넌트에서 WebSocket을 사용하여 메시지를 서버로 보내는 예제이다.
$socket을 사용하여 WebSocket 객체에 접근하고 send() 메서드를 호출하여 메시지를 전송할 수 있다.
위의 예제 코드는 Vue.js와 Vue-WebSocket을 사용하여 WebSocket 통신을 구현하는 간단한 방법을 보여준다. WebSocket 서버 주소 및 통신 로직을 프로젝트에 맞게 수정하면 된다.

send messages (Composition API)

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useWebSocket } from 'vue-websocket';

export default {
  setup() {
    const message = ref('');
    const { send } = useWebSocket('ws://localhost:8000'); // WebSocket 서버 주소로 변경 필요

    const sendMessage = () => {
      send('Hello WebSocket!');
    };

    return {
      message,
      sendMessage
    };
  }
};
</script>

useWebSocket 함수를 사용하여 WebSocket 연결을 설정하고, send 함수를 통해 메시지를 전송할 수 있다.
message라는 ref 변수를 사용하여 수신한 메시지를 저장하고 화면에 바인딩한다.
sendMessage 함수는 버튼 클릭 시 WebSocket을 통해 메시지를 전송한다.
WebSocket 서버 주소와 통신 로직을 프로젝트에 맞게 수정해야 한다.

Socket.io (React)

Socket.IO는 JavaScript 라이브러리로서 실시간 양방향 통신을 위한 다양한 기능을 제공한다.
React와 함께 사용할 수 있는 Socket.IO의 클라이언트 라이브러리를 활용하여 React 애플리케이션에서 WebSocket을 구현할 수 있다.
Socket.IO는 실시간 채팅, 실시간 업데이트 등 다양한 실시간 기능을 구현하기에 적합한 선택이다.