Gunakan WebSocket untuk melaksanakan fungsi sembang masa nyata dalam aplikasi web

Menggunakan WebSocket untuk melaksanakan fungsi sembang masa nyata dalam aplikasi web memerlukan contoh kod khusus

Dalam aplikasi web moden, sembang masa nyata adalah ciri yang sangat biasa. Komunikasi menggunakan protokol HTTP tradisional tidak sesuai untuk prestasi masa nyata, jadi WebSocket diperlukan untuk melaksanakan fungsi sembang masa nyata.

WebSocket ialah teknologi baharu dalam HTML5 yang menyediakan protokol untuk komunikasi dupleks penuh antara pelayar web dan pelayan. Berbanding dengan HTTP tradisional, WebSocket mempunyai ciri kependaman rendah, kecekapan tinggi dan kebolehpercayaan, dan sangat sesuai untuk melaksanakan fungsi sembang masa nyata.

Di bawah saya akan memberikan contoh kod khusus untuk menunjukkan cara menggunakan WebSocket untuk melaksanakan fungsi sembang masa nyata dalam aplikasi web.

Mula-mula, buat objek WebSocket dalam kod bahagian hadapan dan buat sambungan ke pelayan.

const socket = new WebSocket('ws://localhost:8000/chat');

// 连接建立成功后的回调函数
socket.onopen = function() {
  console.log('WebSocket连接已建立');
};

// 接收到消息时的回调函数
socket.onmessage = function(event) {
  const message = JSON.parse(event.data);
  console.log('收到消息：', message);
};

// 关闭连接时的回调函数
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 发送消息的函数
function sendMessage(message) {
  socket.send(JSON.stringify(message));
}

Kod di atas mencipta objek WebSocket dan menggunakannya untuk mewujudkan sambungan dengan pelayan. Selepas mewujudkan sambungan, kami boleh menerima mesej yang dihantar oleh pelayan melalui acara onmessage objek WebSocket dan memantau penutupan sambungan melalui acara onclose. Mesej boleh dihantar ke pelayan dengan memanggil kaedah socket.send. onmessage事件来接收服务器传递过来的消息，并通过onclose事件监听连接关闭的情况。通过调用socket.send方法可以发送消息到服务器。

接下来，我们需要在服务器端实现WebSocket的处理逻辑。

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8000 });

// 保存所有连接到服务器的客户端
const clients = new Set();

// 处理客户端连接事件
wss.on('connection', function(ws) {
  console.log('客户端已连接');

  // 将客户端添加到集合中
  clients.add(ws);

  // 处理收到消息的事件
  ws.on('message', function(message) {
    console.log('收到消息：', message);

    // 将消息发送给所有连接的客户端
    clients.forEach(function(client) {
      client.send(message);
    });
  });

  // 处理连接关闭事件
  ws.on('close', function() {
    console.log('客户端已关闭');

    // 将客户端从集合中移除
    clients.delete(ws);
  });
});

以上代码创建了一个WebSocket服务器，并监听8000端口。在连接事件中，我们将客户端保存在一个集合中，当收到客户端发送的消息时，遍历集合将消息发送给所有连接的客户端。在连接关闭事件中，我们将关闭的客户端从集合中移除。

将以上的前端和后端代码分别保存到index.html和server.js文件中，并在终端中运行以下命令启动服务器：

node server.js

然后在浏览器中打开index.html

Seterusnya, kita perlu melaksanakan logik pemprosesan WebSocket di bahagian pelayan.

rrreee

Kod di atas mencipta pelayan WebSocket dan mendengar pada port 8000. Dalam acara sambungan, kami menyimpan klien dalam koleksi, dan apabila mesej daripada klien diterima, koleksi dilalui dan mesej dihantar kepada semua pelanggan yang berkaitan. Dalam acara penutupan sambungan, kami mengalih keluar pelanggan tertutup daripada koleksi. 🎜🎜Simpan kod hadapan dan belakang belakang di atas ke dalam fail index.html dan server.js masing-masing, dan jalankan arahan berikut dalam terminal untuk memulakan pelayan: 🎜rrreee🎜 Kemudian buka fail index.html dalam penyemak imbas untuk melaksanakan fungsi sembang masa nyata yang ringkas. Anda boleh melihat konsol dalam alat pembangun penyemak imbas untuk memerhati sambungan dan penghantaran dan penerimaan mesej. 🎜🎜Melalui contoh kod di atas, kita dapat melihat bahawa sangat mudah untuk melaksanakan fungsi sembang masa nyata menggunakan WebSocket. Sudah tentu, ini hanyalah contoh paling asas Dalam aplikasi sebenar, isu seperti keselamatan, pengesahan pengguna dan storan mesej juga perlu dipertimbangkan. Tetapi dengan kecekapan dan sifat masa nyata WebSocket, anda boleh membina aplikasi sembang masa nyata yang lebih kompleks dan berfungsi sepenuhnya. 🎜

Atas ialah kandungan terperinci Gunakan WebSocket untuk melaksanakan fungsi sembang masa nyata dalam aplikasi web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!