cari

Rumah >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

WBOY
WBOYasal
2016-05-16 15:45:541915semak imbas

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表示连接的状态。有以下取值：

  1. 0 表示连接尚未建立。

  2. 1 表示连接已建立，可以进行通信。

  3. 2 表示连接正在进行关闭握手。

  4. 3 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已经使用 send() 方法排队的 URF-8 文本字节数。


  1. 0 bermakna sambungan belum diwujudkan lagi.
    3. 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.
    5. 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. >
  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. >  
  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 浏览器支持这一概念>。

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Arah aliran pembangunan masa depan HTML5 _html5 kemahiran tutorialArtikel seterusnya：Arah aliran pembangunan masa depan HTML5 _html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi