Cara menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue

Cara menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue

1. Pengenalan
   Kini, komunikasi masa nyata telah menjadi salah satu fungsi penting dalam banyak aplikasi. Sebagai protokol komunikasi yang baru muncul, WebSocket digunakan secara meluas dalam senario komunikasi masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue, dan memberikan contoh kod terperinci.
2. Persediaan
   Sebelum kita mula, kita perlu memastikan bahawa rangka kerja Vue dan perpustakaan berkaitan WebSocket telah dipasang.

2.1 Pasang Vue
Pasang Vue menggunakan arahan berikut:

npm install vue

2.2 Pasang perpustakaan klien WebSocket
Pasang perpustakaan klien WebSocket menggunakan arahan berikut:

npm install vue-native-websocket

3. Buat instance Vue WebSocket dalam Contoh Vue. Dalam fail masukan Vue, perkenalkan modul WebSocket dan buat contoh Vue.
   

import Vue from 'vue'
import VueNativeSock from 'vue-native-websocket'

Vue.use(VueNativeSock, 'ws://localhost:3000', {
  connectManually: true,   // 手动连接
  reconnection: true,      // 自动重连
  reconnectionAttempts: 5, // 重连尝试次数
})

new Vue({
  render: h => h(App),
}).$mount('#app')

Di sini, kami menetapkan alamat sambungan WebSocket kepada 'ws://localhost:3000', anda boleh mengubah suai mengikut situasi sebenar.

Tulis komponen sembang
4. Seterusnya, kita perlu menulis komponen sembang Chat.vue untuk memaparkan antara muka sembang dan mengendalikan fungsi sembang.
   

<template>
  <div>
    <div v-for="message in messages" :key="message.id">{{ message.content }}</div>
    <input v-model="inputMessage">
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    }
  },
  mounted() {
    this.$options.sockets.onmessage = (event) => {
      const message = JSON.parse(event.data)
      this.messages.push(message)
    }
    this.$options.sockets.connect()   // 手动连接WebSocket
  },
  methods: {
    sendMessage() {
      const message = {
        content: this.inputMessage,
      }
      this.$options.sockets.send(JSON.stringify(message))
      this.inputMessage = ''
    },
  },
}
</script>

Dalam kod di atas, kami menggunakan arahan v-for untuk memaparkan setiap mesej sembang ke antara muka, dan mengikat kandungan kotak input melalui arahan v-model. Apabila butang hantar diklik, fungsi sendMessage dipanggil untuk menghantar mesej yang dimasukkan ke pelayan.

Mulakan pelayan WebSocket
5. Dalam pembangunan sebenar, kita perlu membina pelayan WebSocket untuk menerima dan menghantar mesej. Di sini kami mengambil perpustakaan ws menggunakan Node.js sebagai contoh untuk menunjukkan secara ringkas proses pembinaan pelayan.
   

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    wss.clients.forEach((client) => {
      client.send(message)
    })
  })
})

Dalam kod di atas, kami mendengar port 3000. Apabila pelanggan menyambung, acara sambungan akan dicetuskan. Apabila mesej yang dihantar oleh pelanggan diterima, mesej itu disiarkan kepada semua pelanggan yang bersambung.

Kompil dan jalankan
6. Pada ketika ini, kami telah menyelesaikan penulisan kod untuk menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue. Kini, kami boleh menyusun dan menjalankan aplikasi Vue kami menggunakan arahan berikut:
   

npm run serve

Lawati http://localhost:8080 dalam penyemak imbas dan anda akan melihat antara muka sembang.

Ringkasan
7. Artikel ini memperkenalkan cara menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue, dan menyediakan contoh kod terperinci. Melalui keupayaan komunikasi masa nyata WebSocket, kami boleh membina aplikasi sembang masa nyata yang berkuasa dengan mudah. Saya harap artikel ini dapat membantu semua orang!
   

Atas ialah kandungan terperinci Cara menggunakan WebSocket untuk melaksanakan fungsi sembang dalam pembangunan teknologi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!