WebSocket Vue-WebSocket methods

강정우·2023년 6월 8일

네트워크

목록 보기

10/32

WebSocket methods

send

send(message: string | ArrayBuffer | Blob | ArrayBufferView): void: WebSocket 을 통해 메시지를 보낸다.
인자로 문자열 또는 ArrayBuffer, Blob, ArrayBufferView 등을 전달할 수 있다.

close

close(code?: number, reason?: string): void: WebSocket 연결을 닫는다.
인자로 선택적으로 닫힘 코드와 닫힘 이유를 전달할 수 있다.

reconnect

reconnect(): void: WebSocket 연결을 다시 연결한다.
참고로 연결이 이미 열려있는 경우는 무시한다.

isOpen

isOpen: Ref<boolean>: WebSocket 연결의 상태를 나타내는 부울 값이다.
true는 연결이 열려있음을 나타내고, false는 연결이 닫혔음을 나타낸다.

isConnecting

isConnecting: Ref<boolean>: WebSocket이 연결을 시도 중인지 여부를 나타내는 부울 값이다.
true는 연결 시도 중임을 나타내고, false는 연결 시도 중이 아님을 나타낸다.

error

error: Ref<WebSocketError | null>: WebSocket 연결 중 발생한 오류를 나타내는 객체이다.
null인 경우 오류가 발생하지 않았음을 나타낸다.

실시간 메신져 예제 코드

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      <strong>{{ message.sender }}</strong>: {{ message.text }}
    </div>

    <input v-model="newMessage" type="text" placeholder="Type your message">
    <button @click="sendMessage">Send</button>
  </div>
</template>

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

export default {
  setup() {
    const messages = ref([]);
    const newMessage = ref('');
    const { send, isOpen } = useWebSocket('ws://localhost:8000'); 

    const sendMessage = () => {
      if (newMessage.value) {
        send(newMessage.value);
        newMessage.value = '';
      }
    };

    onMounted(() => {
      isOpen.value = true; // WebSocket 연결 열기

      // WebSocket 메시지 수신 이벤트 핸들러
      const handleMessage = (event) => {
        const message = {
          id: messages.value.length + 1,
          sender: 'Server',
          text: event.data
        };
        messages.value.push(message);
      };

      // WebSocket 이벤트 리스너 등록
      isOpen.value && useWebSocket.on('message', handleMessage);
    });

    return {
      messages,
      newMessage,
      sendMessage
    };
  }
};
</script>

위의 예제에서는 messages라는 배열로 수신한 메시지들을 저장하고, newMessage라는 변수를 통해 새로운 메시지를 입력받는다.
sendMessage 함수는 입력한 메시지를 WebSocket을 통해 서버로 전송한다.
useWebSocket 훅은 onMounted 라이프사이클 훅에서 실행되며, WebSocket 연결을 열고 메시지를 수신하는 이벤트 핸들러를 등록한다.
받은 메시지는 messages 배열에 추가되어 화면에 표시된다.

User

onMounted(() => {
  isOpen.value = true; // WebSocket 연결 열기

  // WebSocket 메시지 수신 이벤트 핸들러
  const handleMessage = (event) => {
    const message = {
      id: messages.value.length + 1,
      sender: 'Server',
      text: event.data
    };
    messages.value.push(message);
  };

  // WebSocket 이벤트 리스너 등록
  isOpen.value && useWebSocket.on('message', handleMessage);
});

위의 코드 블록은 Composition API의 onMounted 훅을 사용하여 컴포넌트가 마운트된 후 실행될 로직을 정의하는데
이 코드 블록에서는 WebSocket 연결을 열고 메시지를 수신하는 이벤트 핸들러를 등록한다.
이제 한 줄 한 줄 설명해주겠다.

isOpen.value = true;:
WebSocket 연결을 열기 위해 isOpen 변수의 값을 true로 설정한다. 이로써 WebSocket 연결이 열리고, 이후 메시지를 주고받을 수 있게 된다.

const handleMessage = (event) => { ... }:
WebSocket에서 메시지를 수신하는 이벤트 핸들러 함수이다.
event 매개변수는 수신한 메시지에 대한 정보를 포함하고 있다.
이 예제에서는 수신한 메시지를 가공하여 messages 배열에 추가하는 로직을 구현하고 있습니다. 새로운 메시지 객체를 생성하고, 해당 객체를 messages 배열에 추가한다.

isOpen.value && useWebSocket.on('message', handleMessage);:
useWebSocket.on() 함수를 사용하여 WebSocket의 'message' 이벤트에 대한 리스너를 등록한다. 이는 WebSocket 서버로부터 메시지를 수신할 때마다 handleMessage 함수가 호출되어 수신한 메시지를 처리한다.
isOpen.value를 사용하여 WebSocket이 연결된 상태인 경우에만 이벤트 리스너를 등록하도록 조건을 설정한다.

참고

isOpen.value && useWebSocket.on('message', handleMessage) 에서 'message'는 WebSocket에서 수신한 메시지에 대한 이벤트 유형을 나타낸다.
WebSocket은 다양한 유형의 이벤트를 지원하는데 주요한 이벤트 중 하나는 메시지를 수신할 때 발생하는 'message' 이벤트이다.
이제 클라이언트 단에서 이벤트를 통해 서버로부터 수신한 메시지를 처리하고 필요한 로직을 수행할 수 있다.
useWebSocket.on( )은 useWebSocket 훅에서 제공하는 메소드로, 'message' 이벤트에 대한 이벤트 리스너를 등록하는 역할을 한다.
이렇게 등록된 이벤트 리스너는 WebSocket이 'message' 이벤트를 수신할 때마다 실행된다.
따라서 'message'는 이벤트 유형을 식별하는 문자열로 사용되며, WebSocket에서 지원하는 다른 이벤트 유형에 따라 다른 문자열을 사용할 수도 있다.
예를 들어, 'open'은 WebSocket 연결이 열릴 때 발생하는 이벤트를 나타내고, 'close'는 WebSocket 연결이 닫힐 때 발생하는 이벤트를 나타낼 수 있다는 것이다.