Pengkomputeran Pinggir dengan Cloudflare Workers & Deno · Pelajaran

WebSockets & Masa Nyata

Laksanakan aplikasi masa nyata menggunakan Cloudflare Workers dan WebSockets untuk pengalaman interaktif.

Pelajaran 1 daripada 411 langkah

WebSockets & Masa Nyata ialah pelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno percuma di CoddyKit. Ini ialah pelajaran 1 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 Pengkomputeran Pinggir dengan Cloudflare Workers & Deno, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengkomputeran Pinggir dengan Cloudflare Workers & Deno merangkumi sejumlah 4 pelajaran.

Aplikasi Masa Nyata dengan WebSockets

Apakah itu WebSockets? Teknologi ini membolehkan komunikasi dua hala masa nyata antara klien, seperti pelayar anda, dengan pelayan. Berbeza daripada permintaan HTTP tradisional, WebSockets mengekalkan sambungan berterusan yang terbuka.

Teknologi ini amat sesuai untuk aplikasi yang memerlukan kemas kini segera, seperti aplikasi sembang, papan pemuka langsung atau permainan dalam talian.

Sambungan HTTP berbanding WebSocket

HTTP tradisional adalah tanpa keadaan dan berasaskan permintaan-respons. Setiap tindakan memerlukan permintaan baharu daripada klien.

Walau bagaimanapun, WebSockets mewujudkan sambungan tunggal yang berpanjangan. Setelah dibuka, klien dan pelayan boleh menghantar mesej pada bila-bila masa tanpa menunggu permintaan.

HTTP: Klien membuat permintaan, pelayan memberikan respons dan sambungan ditutup.
WebSocket: Klien meminta peningkatan, pelayan meluluskannya dan sambungan kekal terbuka.

Peningkatan WebSocket

Sebelum sambungan WebSocket diwujudkan, permintaan HTTP awal dibuat. Klien menghantar pengepala "Upgrade" yang menunjukkan hasratnya untuk menukar protokol.

Jika pelayan menyokong WebSockets, pelayan membalas dengan kod status "101 Switching Protocols", lalu meningkatkan sambungan daripada protokol HTTP kepada protokol WebSocket. Proses ini dikenali sebagai Jabat Tangan WebSocket.

Cloudflare Workers dan WebSockets

Cloudflare Workers amat sesuai untuk mengendalikan WebSockets di pinggir rangkaian. Workers boleh bertindak sebagai titik akhir pelayan, mengurus sambungan dan memproses mesej masa nyata terus di lokasi pengguna anda.

Workers menyediakan API WebSocketPair untuk meningkatkan permintaan HTTP masuk kepada sambungan WebSocket dengan mudah, sekali gus memudahkan proses jabat tangan.

Peningkatan WebSocket Worker

Mari kita cipta Worker yang menerima sambungan WebSocket masuk. Kita akan menggunakan new WebSocketPair() untuk mengurus sambungan tersebut.

Cuba jalankan contoh ini. Untuk mengujinya, biasanya anda akan menyambung menggunakan klien WebSocket, seperti konsol pembangun pelayar atau alat khusus.

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept(); // Accept the WebSocket connection

    server.addEventListener('message', event => {
      console.log('Received message:', event.data);
      // We'll add logic to send messages back soon!
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed:', event.code, event.reason);
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event.message);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

Pendengar Peristiwa WebSocket

Setelah sambungan WebSocket diwujudkan, anda boleh mendengar pelbagai peristiwa pada objek WebSocket sebelah pelayan:

'open': Sambungan berjaya diwujudkan.
'message': Mesej diterima daripada klien. Data mesej berada dalam event.data.
'close': Sambungan ditutup oleh salah satu pihak.
'error': Ralat berlaku pada sambungan.

Peristiwa ini membolehkan Worker anda bertindak balas secara dinamik terhadap interaksi klien.

Menggemakan Mesej

Dalam kod sebelumnya, kita menambahkan pendengar peristiwa untuk 'message'. Mari kita lanjutkannya supaya Worker menggemakan kembali setiap mesej yang diterimanya.

Kaedah server.send(message) membolehkan Worker menghantar data kembali kepada klien yang disambungkan. Ini menghasilkan pelayan "gema" yang ringkas.

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get('Upgrade');
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
      return new Response('Expected Upgrade: websocket', { status: 426 });
    }

    const { 0: client, 1: server } = new WebSocketPair();

    server.accept();
    server.addEventListener('message', event => {
      const message = event.data;
      console.log('Received message:', message);
      // Echo the message back to the client
      server.send(`Echo from Worker: ${message}`);
    });
    server.addEventListener('close', event => {
      console.log('WebSocket closed');
    });
    server.addEventListener('error', event => {
      console.error('WebSocket error:', event);
    });

    return new Response(null, {
      status: 101,
      webSocket: client,
    });
  },
};

Penyiaran Masa Nyata

Pelayan gema ialah permulaan yang baik, tetapi banyak aplikasi masa nyata perlu menghantar mesej kepada berbilang klien yang disambungkan (penyiaran).

Contohnya, dalam aplikasi sembang, apabila seorang pengguna menghantar mesej, semua pengguna lain dalam bilik sembang tersebut sepatutnya menerimanya.

Cloudflare Workers, yang secara lalai tidak berkeadaan, memerlukan mekanisme untuk mengurus sambungan merentas permintaan. Di sinilah Durable Objects menjadi amat berguna untuk mengekalkan keadaan dan mengurus berbilang sambungan WebSocket bagi sumber yang dikongsi.

(Kita akan meneroka Durable Objects dalam pelajaran yang akan datang!)

Melindungi WebSockets

Seperti HTTP, sambungan WebSocket hendaklah dilindungi. Sentiasa gunakan wss:// (WebSocket Selamat) dan bukannya ws://.

Sambungan wss:// disulitkan menggunakan TLS/SSL bagi menghalang pencurian dengar dan pengubahan. Cloudflare Workers mengendalikan penamatan TLS secara automatik, jadi sambungan anda dilindungi secara lalai apabila digunakan.

Gunakan wss:// untuk persekitaran produksi.
Laksanakan pengesahan dan kebenaran.
Sahkan semua mesej yang masuk.

Uji Kefahaman Anda

Pertimbangkan sebuah Cloudflare Worker yang bertujuan mewujudkan sambungan WebSocket dengan klien.

Jawab dalam pelajaran interaktif

Imbas Kembali: WebSockets di Pinggir Rangkaian

Syabas! Anda telah mempelajari cara melaksanakan komunikasi masa nyata dengan WebSockets menggunakan Cloudflare Workers.

WebSockets membolehkan komunikasi dua hala yang berterusan.
Workers menggunakan WebSocketPair dan 101 Switching Protocols untuk jabat tangan.
Pendengar peristiwa ('message', 'close', 'error') mengurus kitar hayat sambungan.
Sentiasa gunakan wss:// untuk sambungan yang selamat.

Dalam pelajaran akan datang, kita akan mendalami Durable Objects untuk mengurus keadaan merentas berbilang sambungan WebSocket bagi aplikasi masa nyata lanjutan.

Percuma untuk bermula

Pelajari Pengkomputeran Pinggir dengan Cloudflare Workers & Deno 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: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “WebSockets & Masa Nyata” percuma?

Ya — teks penuh “WebSockets & Masa Nyata” 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 Pengkomputeran Pinggir dengan Cloudflare Workers & Deno, tingkat taraf kepada CoddyKit PRO. Kursus Pengkomputeran Pinggir dengan Cloudflare Workers & Deno merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “WebSockets & Masa Nyata”?

Laksanakan aplikasi masa nyata menggunakan Cloudflare Workers dan WebSockets untuk pengalaman interaktif. Anda berlatih Pengkomputeran Pinggir dengan Cloudflare Workers & Deno 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 Pengkomputeran Pinggir dengan Cloudflare Workers & Deno?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno 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 1 daripada 4.

Berapa lamakah pelajaran “WebSockets & Masa Nyata” 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 Pengkomputeran Pinggir dengan Cloudflare Workers & Deno ini?

Ya. Setiap pelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno 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

← Kembali ke Pengkomputeran Pinggir dengan Cloudflare Workers & Deno