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.

Kod JavaScriptSalin kandungan ke papan keratan

1. var Soket = baharu WebSocket(url, [protokol] );

URL parameter pertama digunakan untuk menentukan URL untuk disambungkan. Atribut kedua - port adalah pilihan dan, jika disediakan, menentukan subprotokol yang mesti disokong oleh pelayan untuk sambungan yang berjaya.

Sifat WebSocket

Berikut ialah sifat-sifat objek WebSocket. Andaikan kita telah mencipta objek Soket di atas:
Atribut Penerangan Socket.readyState Atribut baca sahaja
readyState mewakili status sambungan. Ia mempunyai nilai berikut:

属性	描述
Socket.readyState	只读属性readyState表示连接的状态。有以下取值： 0 表示连接尚未建立。 1 表示连接已建立，可以进行通信。 2 表示连接正在进行关闭握手。 3 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。

1. 
   0 bermakna sambungan belum diwujudkan lagi.
   
1 bermakna sambungan diwujudkan dan komunikasi boleh dilakukan.


事件	事件处理程序	描述
open	Socket.onopen	建立 socket 连接时触发这个事件。
message	Socket.onmessage	客户端从服务器接收数据时触发。
error	Socket.onerror	连接发生错误时触发。
close	Socket.onclose	连接被关闭时触发。

3. 
   2 menunjukkan bahawa sambungan sedang menjalani jabat tangan tertutup.
   
3 bermaksud sambungan telah ditutup atau sambungan tidak boleh dibuka.


方法	描述
Socket.send()	send(data) 方法使用连接传输数据。
Socket.close()	close() 方法用于终止任何现有连接。

Socket.bufferedAmount Atribut baca sahajabufferedAmountMewakili bilangan bait teks URF-8 yang telah beratur menggunakan kaedah send(). 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: Kaedah Penerangan Socket.send() Kaedah hantar(data) menggunakan sambungan untuk memindahkan data. Socket.close() Kaedah close() digunakan untuk menamatkan sebarang sambungan sedia ada.

Acara Tekan Pelayan
Aplikasi web tradisional menjana acara yang dihantar ke bahagian pelayan web. Sebagai contoh, mengklik pautan akan meminta halaman baharu daripada 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
Untuk menggunakan acara tolak pelayan dalam aplikasi web, kami perlu menambahkan elemen

Atribut src bagi elemen

harus menghala ke URL yang harus menyediakan sambungan berterusan HTTP untuk menghantar aliran data yang mengandungi acara.

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.

Kod XML/HTMLSalin kandungan ke papan keratan

1. /span>>
2. html>
3. kepala>
4. skrip taip="teks/ javascript">
5. /* Tentukan logik pengendalian peristiwa di sini */
6. skrip>
7. kepala>
8. badan>
9. div id="sse" >
10.  eventsource src="/cgi -bin/ticker.cgi" />
11. div>
12. div id="ticker" >
13. MASA>
14. div>
15. badan>
16. html>

Skrip bahagian pelayan SSE
Skrip bahagian pelayan harus menghantar pengepala jenis Kandungan yang menyatakan jenis sebagai teks/strim-acara, seperti ditunjukkan di bawah:

Salin kod

Kod adalah seperti berikut:

cetak "Jenis Kandungan: teks/acara -streamnn" ;

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.

Salin kod

Kod adalah seperti berikut:

cetak "Acara: pelayan-masa";

Langkah terakhir ialah menghantar data acara menggunakan teg Data:, diikuti dengan nilai rentetan integer yang ditamatkan dengan baris baharu, seperti ini:

Salin kod

Kodnya adalah seperti berikut:

$time = localtime();
cetak " Data: $timen";

Berikut ialah ticker.cgi lengkap yang ditulis dalam perl:

Salin kod

Kod tersebut adalah seperti berikut:

#!/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:

Kod XML/HTMLSalin kandungan ke papan keratan

1. HTML>  
2. html>  
3. kepala>  
4. skrip taip="teks/ javascript">  
5.    document.getElementsByTagName("eventsource")[0].   
6.             addEventListener("masa pelayan", eventHandler, false);   
7.    fungsi eventHandler(event)   
8.    {   
9.        // Masa makluman dihantar oleh pelayan   
10.        document.querySelector('#ticker').innerHTML = event.data;   
11.   
12.    }   
13. skrip>  
14. kepala>  
15. badan>  
16. div id="sse" >  
17.    eventsource src="/cgi -bin/ticker.cgi" />  
18. div>  
19. div id="ticker"  nama="ticker">  
20.    [MASA]   
21. div>  
22. badan>  
23. html>  

在测试服务器推送事件之前，建议你确保你的 Web 浏览器支持这一概念>。