Cara menggunakan WebSocket untuk mencapai komunikasi masa nyata dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna dinamik dan Aplikasi Satu Halaman. WebSocket ialah alat rangkaian berdasarkan protokol TCP untuk komunikasi masa nyata. Menggabungkan WebSocket dalam Vue boleh mencapai penghantaran data masa nyata dan menggalakkan komunikasi masa nyata antara aplikasi bahagian hadapan dan bahagian belakang. Artikel ini akan memperkenalkan cara menggunakan Vue dan WebSocket untuk mencapai komunikasi masa nyata.

1. Pengetahuan asas WebSocket

1. Ciri WebSocket

WebSocket ialah protokol sambungan panjang dupleks penuh dengan ciri-ciri berikut:

• Komunikasi dua hala: kedua-dua pelanggan dan pelayan boleh menghantar maklumat.
• Komunikasi masa nyata: Tidak perlu kerap meminta pelayan, pelayan boleh secara aktif menolak maklumat kepada pelanggan.
• Kependaman yang lebih rendah: WebSocket mempunyai kelewatan penghantaran data yang lebih kecil dan kecekapan penghantaran data yang lebih tinggi.
• Skalabiliti: WebSocket menggunakan protokol HTTP sebagai protokol jabat tangan dan mengikut spesifikasi RESTful.

2. Senario penggunaan WebSocket

WebSocket digunakan terutamanya dalam senario di mana pelayan menolak maklumat masa nyata kepada pelanggan, seperti bilik sembang, permainan dalam talian, sebut harga saham masa nyata, dsb.

3. Cara WebSocket dilaksanakan

WebSocket mencapai komunikasi dua hala dengan mewujudkan sambungan TCP antara pelayan dan klien Proses komunikasi adalah seperti berikut:

Pertama , pelanggan menghantar permintaan kepada pelayan. Pengepala permintaan mengandungi medan Naik Taraf dan Sambungan, memberitahu pelayan untuk menaik taraf protokol dan menggunakan WebSocket untuk menyambung. Selepas menerima permintaan, pelayan mengembalikan mesej respons. Respons mengandungi kod status 101 Switching Protocols dan medan pengepala Naik Taraf, menunjukkan bahawa sambungan telah berjaya diwujudkan. Selepas kedua-dua pihak berjaya disambungkan, mereka boleh menghantar maklumat antara satu sama lain, dan apabila mana-mana pihak menamatkan sambungan, sambungan TCP terganggu.

2. Menggunakan WebSocket dalam Vue

1. Memasang perpustakaan WebSocket

Menggunakan WebSocket dalam Vue memerlukan pemasangan perpustakaan yang sepadan. Kita boleh menggunakan pemalam vue-native-websocket, yang merupakan pemalam WebSocket untuk Vue.js. Kaedah pemasangan adalah seperti berikut:

npm install vue-native-websocket --save

Antaranya, pilihan --save bermaksud menyimpan pemalam sebagai kebergantungan dalam fail package.json.

2. Menggunakan pemalam WebSocket

Selepas pemasangan selesai, kami perlu mendayakan WebSocket dalam contoh Vue. Dalam fail main.js Vue, kami boleh mengkonfigurasinya seperti ini:

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, //重新连接的时间间隔
})

Kod di atas menggunakan pemalam WebSocket sebagai pemalam untuk Vue. Antaranya, parameter pertama ialah URL sambungan WebSocket, dan parameter kedua ialah objek konfigurasi. Kami telah menetapkan beberapa pilihan, seperti memformat data dalam format JSON, mendayakan penyambungan semula automatik, dsb.

Seterusnya, kita boleh mentakrifkan contoh WebSocket dalam komponen Vue untuk melaksanakan fungsi komunikasi masa nyata. Sebagai contoh, kita boleh mentakrifkan komponen Vue bernama WebSocketExample seperti ini:

<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>

Dalam kod di atas, kami mentakrifkan komponen Vue yang mengandungi kotak teks dan senarai, masukkan maklumat melalui kotak teks dan hantarkannya, dan kemudian Paparkan maklumat dalam senarai. Kami menggunakan fungsi mounted() untuk mula mendengar peristiwa mesej WebSocket selepas komponen dimuatkan, menyimpan mesej yang diterima dalam tatasusunan mesej, dan kemudian melintasi dan memaparkannya pada halaman.

Selepas kami mengkonfigurasi kedai dalam fail main.js, kami boleh menggunakan kaedah dan data status kedai dalam contoh VueNativeSock. Sebagai contoh, anda boleh menggunakan kaedah ini.$store.dispatch() dalam kaedah untuk menghantar tindakan dan anda boleh menggunakan ini.$store.state untuk mengakses data keadaan dalam mounted().

3. Ringkasan

Gabungan Vue dan WebSocket boleh mencapai komunikasi masa nyata dengan mudah antara bahagian hadapan dan bahagian belakang. Kami menggunakan pemalam vue-native-websocket dalam Vue untuk melaksanakan sambungan WebSocket dan melaksanakan contoh bilik sembang ringkas. Melalui gabungan Vue dan WebSocket, kami boleh membina aplikasi masa nyata dengan cepat dan merealisasikan penghantaran data masa nyata.

Atas ialah kandungan terperinci Cara menggunakan WebSocket untuk mencapai komunikasi masa nyata dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!