Analisis Vue dan komunikasi sisi pelayan: cara mengendalikan sambungan yang panjang

Analisis komunikasi antara Vue dan pelayan: kaedah pemprosesan sambungan panjang

Dalam pembangunan web moden, seni bina pemisahan bahagian hadapan dan belakang telah digunakan secara meluas, dan rangka kerja bahagian hadapan arus perdana Vue juga telah menjadi salah satu pilihan pertama pemaju. Walau bagaimanapun, kaedah komunikasi antara Vue dan pelayan adalah isu yang tidak boleh diabaikan. Terutamanya apabila sambungan panjang terlibat, bagaimanakah kita boleh memastikan kestabilan dan kecekapan komunikasi? Artikel ini akan menjalankan analisis mendalam tentang sambungan panjang antara Vue dan bahagian pelayan, dan memberikan contoh kod yang berkaitan.

1. Konsep dan tujuan sambungan panjang

Apa yang dipanggil sambungan panjang adalah untuk mengekalkan komunikasi berterusan dalam sambungan TCP, tidak seperti sambungan pendek yang ditutup serta-merta selepas menyelesaikan permintaan. Sambungan panjang mempunyai ciri-ciri berikut:

1. Kurangkan penggunaan masa penubuhan sambungan: Dalam sambungan panjang, pelanggan dan pelayan hanya perlu mewujudkan sambungan sekali, dan kemudian mereka boleh terus berkomunikasi, mengelakkan overhed mewujudkan sambungan untuk setiap permintaan.
2. Kurangkan overhed pengepala penghantaran data: Dalam sambungan yang panjang, hanya sejumlah kecil data yang perlu dihantar untuk setiap komunikasi, mengurangkan penghantaran data dan menghuraikan overhed pengepala HTTP.
3. Masa nyata dan cekap: Sambungan panjang boleh menghantar data dalam masa nyata, membolehkan pelayan menolak data secara aktif kepada pelanggan, meningkatkan kecekapan komunikasi dan masa nyata.

Dalam aplikasi praktikal, sambungan panjang biasanya digunakan dalam senario seperti tolak mesej masa nyata, sembang segera dan permainan dalam talian.

2. Bagaimana untuk melaksanakan sambungan panjang dalam Vue

Dalam Vue, kami boleh melaksanakan sambungan panjang melalui WebSocket atau Long Polling.

1. WebSocket

WebSocket ialah protokol komunikasi dupleks penuh berasaskan TCP yang boleh mewujudkan sambungan berterusan antara penyemak imbas dan pelayan untuk mencapai komunikasi masa nyata antara kedua-dua pihak.

Untuk menggunakan WebSocket dalam Vue, anda perlu memasang kebergantungan WebSocket yang berkaitan terlebih dahulu. Anda boleh menggunakan arahan npm untuk memasang pemalam vue-native-websocket Kod sampel adalah seperti berikut:

npm install vue-native-websocket --save

Kemudian, masukkan pemalam WebSocket ke dalam fail main.js projek Vue dan lakukan konfigurasi yang berkaitan. :

import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, 'ws://localhost:8000', {
  store, // 将WebSocket状态保存到Vuex中
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
});

Dalam kod di atas, kami mengkonfigurasi alamat sambungan WebSocket, format, sambungan semula pemotongan dan parameter lain, dan menyimpan status WebSocket ke Vuex. Dengan cara ini, kami boleh mengurus status dan data sambungan WebSocket melalui Vuex.

2. Long Polling

Long polling adalah teknologi yang menunggu data yang tersedia di sisi pelayan Prinsipnya ialah selepas pelanggan menghantar permintaan kepada pelayan, pelayan akan memastikan permintaan dibuka untuk tempoh masa. Tanggapan tidak akan dikembalikan sehingga data tiba atau beberapa waktu telah berlalu.

Untuk melaksanakan tinjauan panjang dalam Vue, kami boleh menggunakan perpustakaan axios untuk menghantar permintaan tinjauan panjang dan tinjauan pendapat melalui setTimeout. Kod sampel adalah seperti berikut:

function longPolling() {
  axios.get('/api/longPolling')
    .then((response) => {
      // 处理服务器端返回的数据
      console.log(response.data);

      // 再次发起长轮询请求
      setTimeout(longPolling, 3000);
    })
    .catch((error) => {
      // 处理错误
      console.error(error);

      // 再次发起长轮询请求
      setTimeout(longPolling, 3000);
    });
}

// 在Vue的生命周期函数中调用长轮询函数
export default {
  created() {
    longPolling();
  },
};

Dalam kod di atas, kami mentakrifkan fungsi longPolling untuk menghantar permintaan pengundian yang panjang, dan kemudian menetapkan masa pengundian melalui setTimeout. Selepas setiap permintaan dikembalikan, kami boleh memproses data yang dikembalikan oleh pelayan dan memulakan permintaan pengundian yang panjang sekali lagi.

3. Kesimpulan

Sama ada menggunakan WebSocket atau tinjauan panjang, sambungan panjang antara Vue dan pelayan boleh dilaksanakan dengan berkesan. WebSocket mempunyai ciri-ciri komunikasi dua hala dan sesuai untuk senario seperti tolak mesej masa nyata masih merupakan kaedah pelaksanaan yang boleh dilaksanakan dalam persekitaran yang tidak menyokong WebSocket.

Dalam pembangunan sebenar, memilih kaedah sambungan panjang yang sesuai perlu diputuskan berdasarkan keperluan perniagaan tertentu dan susunan teknologi. Tidak kira kaedah yang dipilih, matlamatnya adalah untuk meningkatkan kestabilan dan kecekapan komunikasi dan menjadikan komunikasi antara Vue dan pelayan lebih lancar.

Atas ialah kandungan terperinci Analisis Vue dan komunikasi sisi pelayan: cara mengendalikan sambungan yang panjang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!