Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) · Pelajaran

WebSockets untuk Aliran Dua Hala

Laksanakan dan fahami WebSockets, iaitu protokol komunikasi dupleks penuh yang sesuai untuk pertukaran data dua hala masa nyata antara klien dan pelayan.

Pelajaran 2 daripada 411 langkah

WebSockets untuk Aliran Dua Hala ialah pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Apakah Itu WebSockets?

Bayangkan panggilan telefon yang membolehkan kedua-dua orang bercakap dan mendengar pada masa yang sama, tanpa perlu memutuskan panggilan dan mendail semula untuk setiap ayat. Sambungan WebSocket adalah serupa dengannya!

WebSockets menyediakan saluran komunikasi dupleks penuh melalui satu sambungan yang berjangka hayat panjang. Ini bermakna data boleh mengalir dalam kedua-dua arah secara serentak, menjadikan interaksi masa nyata lancar dan cekap.

Melangkaui HTTP: Aliran Dua Hala

Komunikasi HTTP tradisional berfungsi seperti menghantar surat dan menunggu balasan. Setiap permintaan adalah berasingan.

HTTP: Klien menghantar permintaan dan pelayan menghantar respons. Sambungan biasanya ditutup.
WebSockets: Selepas disambungkan, klien dan pelayan boleh menghantar mesej kepada satu sama lain pada bila-bila masa, tanpa memerlukan kitaran permintaan/respons baharu. Sambungan kekal terbuka.

Sifat berterusan dan dua hala ini amat penting untuk kemas kini langsung.

Mewujudkan WebSocket

Sambungan WebSocket bermula dengan permintaan HTTP standard, tetapi permintaan itu menyertakan pengepala khas untuk 'menaik taraf' sambungan.

Proses ini dipanggil Jabat Tangan WebSocket:

Klien menghantar permintaan HTTP dengan pengepala 'Upgrade'.
Pelayan membalas dengan status '101 Switching Protocols'.
Sambungan itu kemudiannya menjadi sambungan WebSocket yang berterusan.

Selepas jabat tangan, sambungan TCP yang mendasari digunakan untuk pertukaran mesej WebSocket secara langsung.

API WebSocket Pelayar Anda

Dalam pelayar web, anda berinteraksi dengan WebSockets menggunakan API WebSocket terbina dalam. Ia ialah objek JavaScript yang mengurus butiran sambungan untuk anda.

Anda mencipta tika WebSocket baharu dengan memberikan URL pelayan WebSocket anda. URL ini biasanya bermula dengan ws:// untuk sambungan tidak disulitkan atau wss:// untuk sambungan disulitkan (WebSockets selamat).

Menyambung ke Pelayan

Mari lihat cara mewujudkan sambungan WebSocket asas daripada pelayar anda. Kami akan menyambung kepada pelayan gema awam yang hanya menghantar kembali apa sahaja yang diterimanya.

Cuba jalankan contoh ini. Anda sepatutnya melihat 'Connected!' apabila sambungan berjaya diwujudkan.

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Connect</title>
</head>
<body>
  <h1>Connecting...</h1>
  <script>
    // Use wss:// for secure connections
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      document.querySelector('h1').innerText = 'Connected!';
      console.log('WebSocket connection opened');
    };

    socket.onerror = (error) => {
      document.querySelector('h1').innerText = 'Error!';
      console.error('WebSocket Error:', error);
    };
  </script>
</body>
</html>

Menghantar Data kepada Pelayan

Selepas disambungkan, anda boleh menghantar data kepada pelayan WebSocket menggunakan kaedah send() bagi objek WebSocket anda. Anda boleh menghantar teks, data perduaan atau malah rentetan JSON.

Dalam contoh ini, taipkan mesej dan klik 'Send'. Pelayan gema akan menerimanya.

<!DOCTYPE html>
<html>
<head>
  <title>Send WebSocket</title>
</head>
<body>
  <input type="text" id="messageInput" placeholder="Type a message">
  <button onclick="sendMessage()">Send</button>
  <p id="status"></p>
  <script>
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      document.getElementById('status').innerText = 'Connected. Send a message!';
    };

    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value;
      if (socket.readyState === WebSocket.OPEN) {
        socket.send(message);
        document.getElementById('status').innerText = 'Sent: ' + message;
        input.value = ''; // Clear input after sending
      } else {
        document.getElementById('status').innerText = 'Not connected yet!';
      }
    }
  </script>
</body>
</html>

Menerima Kemas Kini Pelayan

Untuk menerima mesej daripada pelayan, dengarkan peristiwa message menggunakan socket.onmessage. Objek peristiwa mengandungi data yang diterima.

Jalankan kod ini. Kod tersebut menghantar mesej apabila sambungan dibuka, kemudian memaparkan respons pelayan gema.

<!DOCTYPE html>
<html>
<head>
  <title>Receive WebSocket</title>
</head>
<body>
  <h1>Echo Messages</h1>
  <ul id="messages"></ul>
  <script>
    const socket = new WebSocket('wss://echo.websocket.events');

    socket.onopen = () => {
      console.log('WebSocket connection opened.');
      // Send a message to get a response from the echo server
      socket.send('Hello Echo Server!'); 
    };

    socket.onmessage = (event) => {
      const messageList = document.getElementById('messages');
      const newItem = document.createElement('li');
      newItem.textContent = 'Received: ' + event.data;
      messageList.appendChild(newItem);
    };

    socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };
  </script>
</body>
</html>

Menutup WebSockets dengan Betul

Amalan yang baik ialah mengurus sambungan WebSocket anda. Anda boleh menutup sambungan menggunakan kaedah socket.close().

Selain itu, anda boleh mendengar peristiwa lain:

socket.onclose: Dicetuskan apabila sambungan ditutup.
socket.onerror: Dicetuskan jika berlaku ralat semasa sambungan.

Pengendalian peristiwa ini dengan betul membantu membina aplikasi masa nyata yang kukuh.

Kecemerlangan WebSockets

WebSockets sesuai untuk aplikasi yang memerlukan kemas kini segera dan berterusan antara klien dengan pelayan. Kes penggunaan biasa termasuk:

Aplikasi sembang masa nyata: Mesej muncul serta-merta untuk semua peserta.
Skor sukan langsung/penunjuk saham: Data dikemas kini tanpa memuat semula halaman.
Permainan dalam talian berbilang pemain: Menyegerakkan keadaan permainan dan tindakan pemain.
Penyuntingan kolaboratif: Melihat perubahan daripada orang lain dalam masa nyata.

WebSockets menyediakan alternatif yang lebih cekap berbanding meninjau pelayan berulang kali.

Semakan Pengetahuan WebSocket

Anda telah mempelajari tentang WebSockets. Mari uji pemahaman anda!

Jawab dalam pelajaran interaktif

Ringkasan WebSockets

Tahniah! Dalam pelajaran ini, anda telah meneroka WebSockets, iaitu teknologi berkuasa untuk komunikasi masa nyata.

WebSockets menyediakan komunikasi dupleks penuh dan dua hala.
WebSockets mewujudkan sambungan berterusan selepas jabat tangan HTTP.
API WebSocket pelayar membolehkan anda menyambung, menghantar dan menerima mesej.
WebSockets amat sesuai untuk aplikasi yang memerlukan kemas kini segera dan berterusan.

Seterusnya, anda akan mendalami aplikasi praktikal saluran data dalam WebRTC!

Percuma untuk bermula

Pelajari Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “WebSockets untuk Aliran Dua Hala” percuma?

Ya — teks penuh “WebSockets untuk Aliran Dua Hala” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), tingkat taraf kepada CoddyKit PRO. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “WebSockets untuk Aliran Dua Hala”?

Laksanakan dan fahami WebSockets, iaitu protokol komunikasi dupleks penuh yang sesuai untuk pertukaran data dua hala masa nyata antara klien dan pelayan. Anda berlatih Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “WebSockets untuk Aliran Dua Hala” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) ini?

Ya. Setiap pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Data Langsung berbanding HTTP Tradisional
WebSockets untuk Aliran Dua Hala
Server-Sent Events (SSE) untuk Tolakan Satu Hala
Pengundian Panjang dan Evolusi ke Arah Penstriman

← Kembali ke Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)