Aplikasi praktikal teknologi WebSocket dalam bilik sembang dalam talian-tutorial php-php.cn

Aplikasi praktikal teknologi WebSocket dalam bilik sembang dalam talian

WBOY

Lepaskan： 2023-10-15 11:50:02

asal

1240 orang telah melayarinya

Aplikasi praktikal teknologi WebSocket dalam bilik sembang dalam talian

Dengan perkembangan pesat Internet, permintaan orang ramai untuk pemesejan segera semakin tinggi. Walaupun protokol HTTP tradisional boleh menghantar data, ia perlu memulakan permintaan setiap kali, yang tidak cekap. Untuk menyelesaikan masalah ini, teknologi WebSocket telah wujud. Teknologi WebSocket boleh mewujudkan saluran komunikasi dua hala yang berterusan antara penyemak imbas dan pelayan, meningkatkan kecekapan dan prestasi masa nyata penghantaran data, jadi ia telah digunakan secara meluas dalam bilik sembang dalam talian.

Kelebihan WebSocket:

Latensi rendah: Berbanding dengan model HTTP permintaan-tindak balas tradisional, teknologi WebSocket boleh mewujudkan sambungan berterusan dan mencapai komunikasi segera untuk menghantar kandungan sembang kepada pengguna lain dengan lebih pantas.
Kurang trafik rangkaian: Teknologi WebSocket memindahkan data berbilang kali dengan mewujudkan sambungan dan bukannya menghantar permintaan HTTP setiap kali. Ini mengurangkan bilangan paket dan mengurangkan trafik rangkaian.
Keserasian yang lebih baik: Standard teknologi WebSocket telah matang dan disokong secara meluas oleh penyemak imbas moden tanpa memerlukan pemalam atau perpustakaan tambahan.

Berikut mengambil ruang sembang dalam talian sebagai contoh untuk memperkenalkan aplikasi praktikal teknologi WebSocket.

Pertama sekali, di bahagian pelayan, kami menggunakan Node.js sebagai bahasa hujung belakang. Kelebihan menggunakan Node.js ialah anda boleh menggunakan bahasa JavaScript untuk pembangunan, yang memudahkan interaksi dengan bahagian hadapan.

//引入WebSocket模块
const WebSocket = require('ws');

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

//保存连接的用户
const users = new Set();

//WebSocket服务端启动成功后的回调函数
wss.on('listening', () => {
  console.log('WebSocket server is running on port 3000.');
});

//处理WebSocket连接
wss.on('connection', (ws) => {
  //将新用户添加到用户列表中
  users.add(ws);

  //监听消息事件
  ws.on('message', (message) => {
    //将消息发送给其他用户
    users.forEach((user) => {
      if (user !== ws) {
        user.send(message);
      }
    });
  });

  //监听连接关闭事件
  ws.on('close', () => {
    //将用户从用户列表中移除
    users.delete(ws);
  });
});

Salin selepas log masuk

Di sisi pelanggan, kami menggunakan HTML, CSS dan JavaScript untuk melaksanakan antara muka pengguna dan komunikasi dengan pelayan.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线聊天室</title>
  <style>
    #chat { width: 400px; height: 300px; margin-bottom: 10px; overflow-y: auto; }
  </style>
</head>
<body>
  <div id="chat"></div>
  <input type="text" id="message" placeholder="请输入消息">
  <button id="send">发送</button>

  <script>
    const chat = document.getElementById('chat');
    const messageInput = document.getElementById('message');
    const sendButton = document.getElementById('send');

    //创建WebSocket连接
    const ws = new WebSocket('ws://localhost:3000');

    //监听WebSocket连接成功事件
    ws.addEventListener('open', () => {
      console.log('WebSocket connection is established.');
    });

    //监听WebSocket接收到消息事件
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const messageNode = document.createElement('p');
      messageNode.textContent = message;
      chat.appendChild(messageNode);
    });

    //发送消息
    sendButton.addEventListener('click', () => {
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    });
  </script>
</body>
</html>

Salin selepas log masuk

Kod di atas melaksanakan ruang sembang dalam talian yang mudah. Apabila pengguna mengakses halaman melalui pelayar, sambungan WebSocket diwujudkan dan mesej yang dimasukkan oleh pengguna dihantar ke pelayan. Pelayan akan memajukan mesej yang diterima kepada pengguna lain yang disambungkan, sekali gus merealisasikan fungsi sembang masa nyata.

Melalui teknologi WebSocket, aplikasi praktikal bilik sembang dalam talian direalisasikan. Komunikasi dua hala WebSocket boleh mengurangkan kelewatan masa dan trafik rangkaian dengan berkesan, memberikan pengalaman pengguna yang lebih baik. Memandangkan teknologi WebSocket terus berkembang dan bertambah baik, saya percaya ia akan digunakan dan dipromosikan dalam lebih banyak bidang.

Atas ialah kandungan terperinci Aplikasi praktikal teknologi WebSocket dalam bilik sembang dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!