WebSockets

WebSockets membolehkan masa nyata, komunikasi dua arah antara pelanggan dan pelayan, menjadikannya ideal untuk membina aplikasi interaktif dan kolaboratif. Dalam panduan ini, kami meneroka WebSockets dan cara melaksanakan ciri masa nyata dalam aplikasi anda.

Memahami WebSockets

WebSockets menyediakan sambungan berterusan antara klien (biasanya penyemak imbas) dan pelayan, membolehkan kedua-duanya menghantar mesej antara satu sama lain pada bila-bila masa. Tidak seperti permintaan HTTP tradisional, WebSocket memudahkan kependaman rendah dan komunikasi yang cekap, menjadikannya sesuai untuk aplikasi masa nyata.

Faedah WebSockets

• Kemas Kini Masa Nyata: Dayakan kemas kini dan pemberitahuan segera kepada pelanggan tanpa memerlukan tinjauan pendapat.
• Komunikasi Cekap: Kurangkan overhed dengan mengekalkan sambungan tunggal yang tahan lama bagi setiap pelanggan.
• Komunikasi Dwi Arah: Menyokong komunikasi dalam kedua-dua arah, mendayakan ciri interaktif seperti aplikasi sembang, kemas kini langsung dan pengeditan kolaboratif.

Melaksanakan WebSockets

Pelaksanaan Bahagian Pelayan (Node.js dengan Socket.IO)

Socket.IO ialah perpustakaan popular yang memudahkan pelaksanaan WebSocket dalam aplikasi Node.js.

// server.js

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('A client connected');

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // Broadcast message to all connected clients
  });
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Pelaksanaan Bahagian Klien (JavaScript dengan Socket.IO)

<!-- index.html -->




  <meta charset="UTF-8">
  <title>WebSocket Chat Example</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    function sendMessage() {
      const message = document.getElementById('message').value;
      socket.emit('chat message', message);
      document.getElementById('message').value = '';
    }

    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
    });
  </script>


  

Gunakan Kes untuk WebSockets

• Aplikasi Sembang: Dayakan ciri pemesejan dan sembang masa nyata.
• Papan Pemuka Langsung: Paparkan kemas kini dan analitis data secara langsung.
• Permainan Berbilang Pemain: Memudahkan interaksi permainan masa nyata.
• Pengeditan Kolaboratif: Menyokong penyuntingan dokumen atau kod serentak.

Kesimpulan

WebSockets menyediakan mekanisme yang berkuasa untuk membina aplikasi masa nyata yang menyampaikan kemas kini segera dan pengalaman interaktif kepada pengguna. Dengan memanfaatkan keupayaan WebSockets dan perpustakaan seperti Socket.IO, anda boleh meningkatkan kefungsian dan penglibatan aplikasi tindanan penuh anda.

Seterusnya, kami akan meneroka pemaparan bahagian pelayan menggunakan Next.js untuk prestasi dan SEO yang lebih baik.

Atas ialah kandungan terperinci WebSockets. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!