Vue에서 실시간 통신을 위해 WebSocket을 사용하는 방법

Vue는 동적 사용자 인터페이스와 단일 페이지 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. WebSocket은 실시간 통신을 위한 TCP 프로토콜 기반의 네트워크 도구입니다. Vue에 WebSocket을 결합하면 실시간 데이터 전송을 달성하고 프런트엔드 애플리케이션과 백엔드 간의 실시간 통신을 촉진할 수 있습니다. 이 기사에서는 Vue와 WebSocket을 사용하여 실시간 통신을 구현하는 방법을 소개합니다.

1. WebSocket의 기본 지식

1. WebSocket의 특징

WebSocket은 전이중, 장기 연결 프로토콜의 특징은 다음과 같습니다.

• 양방향 통신: 클라이언트와 서버 모두 가능합니다. 정보를 보냅니다.
• 실시간 통신: 정기적으로 서버에 요청할 필요가 없으며 서버가 적극적으로 클라이언트에 정보를 푸시할 수 있습니다.
• 낮은 대기 시간: WebSocket의 데이터 전송 지연은 작고 데이터 전송 효율성은 상대적으로 높습니다.
• 확장성: WebSocket은 HTTP 프로토콜을 핸드셰이크 프로토콜로 사용하고 RESTful 사양을 따릅니다.

2. WebSocket 사용 시나리오

WebSocket은 채팅방, 온라인 게임, 실시간 주식 시세 등과 같이 서버가 클라이언트에 실시간 정보를 푸시하는 시나리오에서 주로 사용됩니다.

3. WebSocket 구현 방법

WebSocket은 서버와 클라이언트 사이에 TCP 연결을 설정하여 양방향 통신을 구현합니다. 통신 프로세스는 다음과 같습니다.

먼저 클라이언트가 서버에 요청을 보냅니다. 요청 헤더에는 서버에 프로토콜을 업그레이드하고 WebSocket을 사용하여 연결하도록 지시하는 업그레이드 및 연결 필드가 포함되어 있습니다. 요청을 받은 후 서버는 응답 메시지를 반환합니다. 응답에는 연결이 성공적으로 설정되었음을 나타내는 상태 코드 101 스위칭 프로토콜과 업그레이드 헤더 필드가 포함되어 있습니다. 두 당사자가 성공적으로 연결되면 서로에게 정보를 보낼 수 있으며, 어느 한 당사자가 연결을 종료하면 TCP 연결이 중단됩니다.

2. Vue에서 WebSocket 사용

1. WebSocket 라이브러리 설치

Vue에서 WebSocket을 사용하려면 해당 라이브러리를 설치해야 합니다. Vue.js용 WebSocket 플러그인인 vue-native-websocket 플러그인을 사용할 수 있습니다. 설치 방법은 다음과 같습니다.

npm install vue-native-websocket --save

그 중 --save 옵션은 해당 플러그인을 package.json 파일에 의존성으로 저장한다는 의미입니다.

2. WebSocket 플러그인 사용

설치가 완료된 후 Vue 인스턴스에서 WebSocket을 활성화해야 합니다. Vue의 main.js 파일에서 다음과 같이 구성할 수 있습니다.

import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:3000', {
  store: store, //将store注入到VueNativeSock实例中，使其能够访问store中的state和action。
  format: 'json', //设置数据格式为JSON
  reconnection: true, //断开连接时自动重新连接
  reconnectionAttempts: 5, //重新连接的最大尝试次数
  reconnectionDelay: 3000, //重新连接的时间间隔
})

위 코드는 WebSocket 플러그인을 Vue용 플러그인으로 사용합니다. 그 중 첫 번째 매개변수는 WebSocket 연결의 URL이고, 두 번째 매개변수는 구성 객체입니다. JSON 형식으로 데이터 형식 지정, 자동 재연결 활성화 등과 같은 몇 가지 옵션을 설정했습니다.

다음으로 Vue 구성 요소에서 WebSocket 인스턴스를 정의하여 실시간 통신 기능을 구현할 수 있습니다. 예를 들어 WebSocketExample이라는 Vue 컴포넌트를 다음과 같이 정의할 수 있습니다.

<template>
  <div>
    <h1>WebSocketExample</h1>
    <div>
      <input type="text" v-model="message" placeholder="input message" />
      <button @click="send">Send</button>
    </div>
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{msg.text}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'WebSocketExample',
  data() {
    return {
      message: '',
      messages: [],
    }
  },
  methods: {
    send() {
      this.$socket.send(
        JSON.stringify({
          message: this.message,
        })
      )
      //清空输入框
      this.message = ''
    },
  },
  mounted() {
    this.$socket.onMessage((msg) => {
      console.log('Received:', msg.data)
      const message = JSON.parse(msg.data)
      this.messages.push({
        id: Math.random()
          .toString()
          .slice(2),
        text: message.message,
      })
    })
  },
}
</script>

위 코드에서는 텍스트 상자와 목록이 포함된 Vue 컴포넌트를 정의하고, 텍스트 상자를 통해 정보를 입력하고 전송한 다음 정보를 표시합니다. 목록에. Mounted() 함수를 사용하여 구성 요소가 로드된 후 WebSocket 메시지 이벤트 수신을 시작하고 수신된 메시지를 메시지 배열에 저장한 다음 이를 탐색하여 페이지에 표시합니다.

main.js 파일에서 스토어를 구성한 후 VueNativeSock 인스턴스에서 스토어의 메서드와 상태 데이터를 사용할 수 있습니다. 예를 들어, 메서드에서 this.$store.dispatch() 메서드를 사용하여 작업을 보낼 수 있고, this.$store.state를 사용하여 Mounted()의 상태 데이터에 액세스할 수 있습니다.

3. 요약

Vue와 WebSocket의 결합으로 프런트엔드와 백엔드 간의 실시간 통신을 쉽게 구현할 수 있습니다. Vue에서 vue-native-websocket 플러그인을 사용하여 WebSocket 연결을 구현하고 간단한 채팅방 예제를 구현합니다. Vue와 WebSocket의 결합을 통해 실시간 애플리케이션을 빠르게 구축하고 실시간 데이터 전송을 실현할 수 있습니다.

위 내용은 Vue에서 실시간 통신을 위해 WebSocket을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!