Latest web development tutorials

HTML5 WebSocket

HTML5 WebSocket adalah awal yang disediakan oleh komunikasi full-duplex melalui protokol koneksi TCP tunggal.

Dalam WebSocket API, browser dan server hanya untuk melakukan aksi jabat tangan, kemudian, antara browser dan server pada pembentukan jalur cepat. Anda dapat mentransfer data secara langsung antara satu sama lain.

Browser mengirimkan ke server melalui permintaan JavaScript untuk membuat sambungan WebSocket, sambungan dibuat, klien dan server dapat dihubungkan langsung untuk bertukar data melalui TCP.

Ketika Anda mendapatkan koneksi Web Socket, Anda dapat mengirim data ke server melalui metodesend (), dan menerima data yang dikembalikan oleh server onmessageacara.

WebSocket mengikuti API digunakan untuk membuat objek.

var Socket = new WebSocket(url, [protocal] );

Kode di atas parameter pertama url, menentukan koneksi URL. Parameter kedua adalah protokol opsional yang menentukan diterima sub-protokol.


properti WebSocket

Ini adalah objek atribut WebSocket. Misalkan kita menggunakan kode di atas untuk membuat objek Socket:

milik deskripsi
Socket.readyState

Atribut read-onlyreadyState menunjukkan status koneksi dapat memiliki nilai berikut:

  • 0 - menunjukkan bahwa sambungan belum ditetapkan.

  • 1 - menunjukkan sambungan dibuat, dapat berkomunikasi.

  • 2 - menunjukkan bahwa sambungan ditutup.

  • 3 - menunjukkan bahwa koneksi telah ditutup atau sambungan tidak dapat dibuka.

Socket.bufferedAmount

Atribut read-onlybufferedAmount telah mengirim () ditempatkan dalam antrian menunggu untuk transfer, tapi belum mengeluarkan UTF-8 byte teks.


acara WebSocket

Berikut adalah objek peristiwa WebSocket. Misalkan kita menggunakan kode di atas untuk membuat objek Socket:

peristiwa event handler deskripsi
terbuka Socket.onopen Dipicu ketika sambungan dibuat
pesan Socket.onmessage Ketika klien menerima data pemicu Server
error Socket.onerror Hal ini dipicu ketika terjadi kesalahan Komunikasi
dekat Socket.onclose Dipicu ketika koneksi ditutup

metode WebSocket

Berikut adalah objek metode WebSocket. Misalkan kita menggunakan kode di atas untuk membuat objek Socket:

cara deskripsi
Socket.send ()

Menggunakan sambungan untuk mengirim data

Socket.close ()

Tutup koneksi


WebSocket contoh

protokol WebSocket alam adalah protokol berbasis TCP.

Dalam rangka untuk membuat sambungan WebSocket, browser klien memulai server HTTP pertama ingin meminta bahwa permintaan ini dan permintaan HTTP biasa, berisi beberapa informasi header tambahan, dimana informasi header tambahan "Tingkatkan: WebSocket" menunjukkan bahwa ini adalah protokol aplikasi Upgrade permintaan HTTP, server mem-parsing informasi header tambahan kemudian dihasilkan pesan respon kembali ke klien, klien koneksi WebSocket dan server didirikan, kedua belah pihak bisa, melalui transmisi yang menghubungkan saluran informasi yang bebas, dan koneksi ini Ini berlanjut sampai klien atau server-side party aktif untuk menutup koneksi.

HTML klien dan JavaScript

Saat ini, sebagian besar browser mendukung WebSocket () interface, Anda dapat mencoba contoh dalam browser berikut: Chrome, Mozilla, Opera dan Safari.

isi file w3big_websocket.html

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>本教程(w3big.com)</title>
	
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function()
               {
                  // Web Socket 已连接上,使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
				
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
				
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
		
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

instalasi pywebsocket

Sebelum melaksanakan program di atas, kita perlu menciptakan layanan dukungan WebSocket. Dari pywebsocket Download mod_pywebsocket, atau menggunakan perintah git untuk men-download:

git clone https://github.com/google/pywebsocket.git

dukungan mod_pywebsocket diperlukan lingkungan python

mod_pywebsocket dari ekstensi Web Socket Apache HTTP, langkah-langkah instalasi adalah sebagai berikut:

  • Unzip file yang didownload.

  • Masukkan direktoripywebsocket.

  • Jalankan:

    $ python setup.py build
    $ sudo python setup.py install
    
  • Lihat dokumentasi:

    $ pydoc mod_pywebsocket

Buka Layanan

Jalankan perintah berikut dipywebsocket direktori / mod_pywebsocket:

$ sudo python standalone.py -p 9998 -w ../example/

Perintah di atas akan membuka nomor port layanan 9998, menggunakan -w untuk mengatur echo_wsh.py direktori handler berada.

Sekarang kita dapat membuka file w3big_websocket.html Anda buat sebelumnya di browser Chrome. Jika browser Anda mendukung WebSocket (), klik "Run WebSocket", Anda dapat melihat seluruh proses setiap langkah dari jendela pop-up, proses Gif demo:

Setelah kita menghentikan layanan, maka akan muncul "Sambungan ditutup ...."