hujung hadapan web
Tutorial H5
Analisis ringkas tentang kemahiran tutorial WebSocket dan server push events_html5 HTML5
Analisis ringkas tentang kemahiran tutorial WebSocket dan server push events_html5 HTML5
Soket Web
Web Sockets ialah generasi baharu teknologi komunikasi dua hala untuk aplikasi web, berjalan pada satu soket, yang didedahkan dalam penyemak imbas yang serasi HTML5 melalui antara muka JavaScript.
Setelah anda memperoleh sambungan Soket Web pada pelayan web, anda boleh menghantar data daripada penyemak imbas ke pelayan dengan memanggil kaedah hantar() dan menerima data daripada pelayan ke penyemak imbas melalui pengendali acara onmessage.
Berikut ialah API untuk mencipta objek WebSocket baharu.
- var Soket = baharu WebSocket(url, [protokol] );
Sifat WebSocket
Berikut ialah sifat-sifat objek WebSocket. Andaikan kita telah mencipta objek Soket di atas: 只读属性readyState表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。 只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。 send(data) 方法使用连接传输数据。 close() 方法用于终止任何现有连接。 Acara Tekan Pelayan Masa jenis ini daripada pelayar web ke pelayan web boleh dipanggil acara sebelah pelanggan. Dengan kemunculan HTML5, WHATWG Web Applications 1.0 memperkenalkan aliran acara daripada pelayan web kepada pelayar web yang dipanggil Server Push Events (SSE). Gunakan SSE untuk terus menolak acara DOM ke penyemak imbas pengguna. Kaedah penstriman acara ini akan membuka sambungan berterusan ke pelayan dan menghantar data kepada pelanggan apabila mesej baharu tersedia, menghapuskan keperluan untuk pengundian berterusan. Aplikasi Web SSE URL ini akan menghala ke PHP, PERL atau mana-mana skrip Python yang menghantar data acara secara berterusan. Berikut ialah contoh mudah aplikasi web yang menjangkakan masa pelayan. Skrip bahagian pelayan SSE
Atribut
Penerangan
Socket.readyState
Atribut baca sahaja
readyState mewakili status sambungan. Ia mempunyai nilai berikut:
属性
描述
Socket.readyState
Socket.bufferedAmount
0 bermakna sambungan belum diwujudkan lagi.
事件
事件处理程序
描述
open
Socket.onopen
建立 socket 连接时触发这个事件。
message
Socket.onmessage
客户端从服务器接收数据时触发。
error
Socket.onerror
连接发生错误时触发。
close
Socket.onclose
连接被关闭时触发。
2 menunjukkan bahawa sambungan sedang menjalani jabat tangan tertutup.
方法
描述
Socket.send()
Socket.close()
Acara WebSocket Berikut ialah peristiwa yang berkaitan dengan objek WebSocket. Andaikan kita telah mencipta objek Soket di atas:
Kaedah WebSocket Berikut ialah kaedah yang berkaitan dengan objek WebSocket. Andaikan kita telah mencipta objek Soket di atas:
Socket.bufferedAmount
Atribut baca sahajabufferedAmountMewakili bilangan bait teks URF-8 yang telah beratur menggunakan kaedah send().
Kaedah
Penerangan
Socket.send()
Kaedah hantar(data) menggunakan sambungan untuk memindahkan data.
Socket.close()
Kaedah close() digunakan untuk menamatkan sebarang sambungan sedia ada.
Aplikasi web tradisional menjana acara yang dihantar ke bahagian pelayan web. Sebagai contoh, mengklik pautan akan meminta halaman baharu daripada pelayan.
Untuk menggunakan acara tolak pelayan dalam aplikasi web, kami perlu menambahkan elemen
Skrip bahagian pelayan harus menghantar pengepala jenis Kandungan yang menyatakan jenis sebagai teks/strim-acara, seperti ditunjukkan di bawah:
Selepas menetapkan jenis Kandungan, skrip sebelah pelayan akan menghantar teg Acara: diikuti dengan nama acara. Contoh berikut akan menghantar Masa Pelayan yang ditamatkan baris baharu sebagai nama acara.
Langkah terakhir ialah menghantar data acara menggunakan teg Data:, diikuti dengan nilai rentetan integer yang ditamatkan dengan baris baharu, seperti ini:
cetak " Data: $timen";
Berikut ialah ticker.cgi lengkap yang ditulis dalam perl:
#!/usr/bin /perl
print "Content-Type: text/event-streamnn";
while(true){
print "Event: server-timen";
$time = localtime();
cetak " Data: $timen";
tidur(5);
Mengendalikan acara tolak pelayan
Mari ubah suai aplikasi web kami untuk mengendalikan acara tolak pelayan. Berikut ialah contoh terakhir:
- >
- <html>
- <kepala>
- <skrip taip="teks/ javascript">
- document.getElementsByTagName("eventsource")[0].
- addEventListener("masa pelayan", eventHandler, false);
- fungsi eventHandler(event)
- {
- // Masa makluman dihantar oleh pelayan
- document.querySelector('#ticker').innerHTML = event.data;
- }
- skrip>
- kepala>
- <badan>
- <div id="sse" >
- <eventsource src="/cgi -bin/ticker.cgi" />
- div>
- <div id="ticker" nama="ticker">
- [MASA]
- div>
- badan>
- html>
在测试服务器推送事件之前，建议你确保你的 Web 浏览器支持这一概念>。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
