Membawa anda mengenali WebSocket dalam HTML5

Kenali WebSocket HTML5

Dalam spesifikasi HTML5, teknologi web kegemaran saya ialah API WebSocket, yang menjadi popular dengan cepat. WebSocket menyediakan alternatif yang dialu-alukan kepada teknologi Ajax yang telah kami gunakan sejak beberapa tahun lalu. API baharu ini menyediakan cara untuk menolak mesej daripada klien ke pelayan dengan cekap menggunakan sintaks mudah. Mari kita lihat API WebSocket HTML5: Ia boleh digunakan di bahagian klien, bahagian pelayan. Dan terdapat API pihak ketiga yang sangat baik yang dipanggil Socket.IO.

1. Apakah itu WebSocket API dalam HTML5?

WebSocket API ialah kaedah komunikasi tak segerak pelayan pelanggan generasi seterusnya. Komunikasi ini menggantikan soket TCP tunggal, menggunakan protokol ws atau wss, dan boleh digunakan oleh mana-mana program klien dan pelayan. WebSocket kini diseragamkan oleh W3C. WebSocket sudah pun disokong oleh pelayar seperti Firefox 4, Chrome 4, Opera 10.70 dan Safari 5.

Perkara yang menarik tentang API WebSocket ialah pelayan dan pelanggan boleh menolak maklumat antara satu sama lain pada bila-bila masa dalam julat masa tertentu. WebSocket tidak terhad kepada komunikasi Ajax (atau XHR), kerana teknologi Ajax memerlukan pelanggan untuk memulakan permintaan, dan pelayan dan pelanggan WebSocket boleh menolak maklumat antara satu sama lain;

Perkara yang bijak tentang teknologi Ajax ialah tiada cara yang direka untuk menggunakannya. WebSocket dicipta untuk sasaran yang ditentukan dan digunakan untuk menolak mesej dalam kedua-dua arah.

2. Penggunaan WebSocket API dalam HTML5

Hanya fokus pada API bahagian klien, kerana setiap bahasa bahagian pelayan mempunyai API sendiri. Coretan kod di bawah membuka sambungan, mencipta pendengar acara untuk sambungan, memutuskan sambungan, masa mesej, menghantar semula mesej ke pelayan dan menutup sambungan.

Kodnya adalah seperti berikut:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!');
  // 监听消息
  socket.onmessage = function(event){
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket.... 
  //socket.close()
};

Mari kita lihat coretan permulaan di atas. Parameter ialah URL, dan ws mewakili protokol WebSocket. Kaedah onopen, onclose dan onmessage menyambungkan peristiwa ke tika Socket. Setiap kaedah menyediakan peristiwa untuk mewakili keadaan Soket.

Acara onmessage menyediakan atribut data, yang boleh mengandungi bahagian Badan mesej. Bahagian Badan mesej mestilah rentetan yang boleh disiri/diserialisasikan untuk memindahkan lebih banyak data.

Sintaks WebSocket adalah sangat mudah, dan menggunakan WebSockets adalah sangat mudah...melainkan pelanggan tidak menyokong WebSocket. Pelayar IE pada masa ini tidak menyokong komunikasi WebSocket. Jika pelanggan anda tidak menyokong komunikasi WebSocket, terdapat beberapa pilihan sandaran untuk anda gunakan:

Teknologi Flash - Flash boleh memberikan penggantian mudah. Kelemahan yang paling jelas menggunakan Flash ialah tidak semua pelanggan memasang Flash, dan sesetengah pelanggan, seperti iPhone/iPad, tidak menyokong Flash.

Teknologi Pengundian Lama AJAX - Menggunakan tinjauan panjang AJAX untuk mensimulasikan WebSocket telah berada dalam industri sejak sekian lama. Ia adalah teknik yang berdaya maju, tetapi ia tidak mengoptimumkan mesej yang dihantar. Iaitu, ia adalah penyelesaian, tetapi bukan yang terbaik teknikal.

Memandangkan penyemak imbas semasa seperti IE tidak menyokong WebSocket, apakah yang perlu kami lakukan jika kami perlu menyediakan pemprosesan acara WebSocket, penghantaran balik dan menggunakan API bersatu pada bahagian pelayan? Nasib baik, Guillermo Rauch mencipta teknologi Socket.IO.

3. WebSocket dengan Socket.IO

Socket.IO ialah API WebSocket yang dicipta oleh Guillermo Rauch, ketua pegawai teknologi LearnBoost dan ketua saintis LearnBoost Labs. Socket.IO menggunakan fungsi pengesanan untuk menentukan sama ada untuk mewujudkan sambungan WebSocket, sambungan undian panjang AJAX atau Flash, dsb. Aplikasi masa nyata boleh dibuat dengan cepat. Socket.IO juga menyediakan API NodeJS, yang kelihatan sangat mirip dengan API pelanggan.

[Cadangan berkaitan]

1 Tutorial video dalam talian h5 percuma

2. Manual versi penuh HTML5

3. Tutorial video html5 asal php.cn

4. Contoh cara melukis bendera merah lima bintang dengan h5Canvas