WebSocket dan JavaScript: Cipta sistem tolak mesej masa nyata yang cekap

WebSocket dan JavaScript: Cipta sistem tolak mesej masa nyata yang cekap

Dengan perkembangan pesat Internet, sistem tolak mesej masa nyata menjadi semakin penting dalam aplikasi moden. Sebagai protokol berasaskan TCP, WebSocket menyediakan pembangun kaedah komunikasi dua hala masa nyata yang cekap. Digabungkan dengan JavaScript, kami boleh membina sistem tolak mesej masa nyata yang cekap dengan cepat.

Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tolak mesej masa nyata yang mudah, dan menyediakan contoh kod khusus yang berkaitan.

1. Konsep asas WebSocket

WebSocket ialah protokol berasaskan TCP Ia mewujudkan saluran komunikasi dupleks penuh antara penyemak imbas dan pelayan, yang boleh mencapai komunikasi dua hala masa nyata. Berbanding dengan permintaan HTTP tradisional, ciri WebSocket termasuk:

1. Komunikasi dua hala: WebSocket membenarkan pelayan untuk menolak mesej secara aktif kepada pelanggan, dan pelanggan juga boleh menghantar mesej kepada pelayan.
2. Masa Nyata: Setelah sambungan WebSocket berjaya diwujudkan, kelewatan komunikasi adalah sangat rendah dan tolakan mesej masa nyata boleh dicapai.
3. Jimat lebar jalur: WebSocket menggunakan protokol dengan pengepala yang lebih kecil dan hanya satu jabat tangan, yang boleh mengurangkan overhed penghantaran data secara berkesan berbanding dengan permintaan HTTP.

2. Gunakan WebSocket untuk melaksanakan sistem tolak mesej masa nyata

Di bawah ini kami akan menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tolak mesej masa nyata yang ringkas.

1. Contoh kod sisi pelayan (Node.js):

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('Received message:', message);
  });

  ws.send('Hello, client!');
});

Kod di atas menggunakan perpustakaan WebSocket Node.js untuk mencipta pelayan WebSocket dan mendengar pada port 3000. Apabila pelanggan menyambung, acara connection akan dicetuskan dan penerimaan dan penghantaran mesej akan diproses dalam fungsi panggil balik. connection事件，并在该回调函数中处理消息的接收和发送。

2. 客户端代码示例（JavaScript）：

const ws = new WebSocket('ws://localhost:3000');

ws.onopen = () => {
  console.log('Connected to server.');

  ws.send('Hello, server!');
};

ws.onmessage = (event) => {
  console.log('Received message:', event.data);
};

ws.onclose = () => {
  console.log('Disconnected from server.');
};

上述代码创建了一个WebSocket对象，并连接到服务器的地址。在连接建立成功后，会触发onopen事件，并通过send方法向服务器发送消息。当接收到服务器发送的消息时，会触发onmessage事件，并通过event.data获取消息内容。当连接关闭时，会触发onclose

Contoh kod pelanggan (JavaScript):
rrreee

Kod di atas mencipta objek WebSocket dan bersambung ke alamat pelayan. Selepas sambungan berjaya diwujudkan, acara onopen akan dicetuskan dan mesej akan dihantar ke pelayan melalui kaedah hantar. Apabila mesej yang dihantar oleh pelayan diterima, acara onmessage akan dicetuskan dan kandungan mesej akan diperoleh melalui event.data. Apabila sambungan ditutup, acara onclose akan dicetuskan.

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tolak mesej masa nyata yang ringkas. Sebagai protokol komunikasi dua hala yang cekap dan masa nyata, WebSocket boleh memenuhi keperluan masa nyata aplikasi moden.

Dengan kod contoh di atas, kami boleh mulakan dengan cepat menggunakan WebSocket dan melaksanakan fungsi tolak mesej masa nyata dalam aplikasi kami sendiri. Sudah tentu, senario aplikasi sebenar mungkin lebih kompleks, dan isu seperti format mesej dan pengesahan identiti perlu dipertimbangkan. Saya harap artikel ini dapat memberikan pembaca pengenalan asas dan membimbing mereka untuk mengetahui lebih lanjut mengenai WebSocket dan teknologi push mesej masa nyata.
• Rujukan:

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket🎜🎜https://www.npmjs.com/package/ws🎜🎜

Atas ialah kandungan terperinci WebSocket dan JavaScript: Cipta sistem tolak mesej masa nyata yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!