Soket Web HTML5


WebSocket ialah protokol untuk komunikasi dupleks penuh pada sambungan TCP tunggal yang HTML5 mula sediakan.

Dalam API WebSocket, penyemak imbas dan pelayan hanya perlu melakukan tindakan berjabat tangan, dan kemudian saluran pantas dibentuk antara penyemak imbas dan pelayan. Data boleh dihantar terus antara keduanya.

Pelayar menghantar permintaan kepada pelayan untuk mewujudkan sambungan WebSocket melalui JavaScript Selepas sambungan diwujudkan, pelanggan dan pelayan boleh bertukar-tukar data secara langsung melalui sambungan TCP.

Selepas anda memperoleh sambungan Soket Web, anda boleh menghantar data ke pelayan melalui kaedah hantar() dan menerima data yang dikembalikan oleh pelayan melalui onmessage peristiwa.

API berikut digunakan untuk mencipta objek WebSocket.

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

url parameter pertama dalam kod di atas menentukan URL sambungan. Protokol parameter kedua adalah pilihan dan menentukan subprotokol yang boleh diterima.


Sifat WebSocket

Berikut ialah sifat-sifat objek WebSocket. Katakan kita menggunakan kod di atas untuk mencipta objek Soket:

Properties Perihalan
Socket.readyState
属性描述
Socket.readyState

只读属性 readyState 表示连接状态,可以是以下值:

  • 0 - 表示连接尚未建立。

  • 1 - 表示连接已建立,可以进行通信。

  • 2 - 表示连接正在进行关闭。

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

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

Sifat baca sahaja
readyState

mewakili status sambungan, yang boleh menjadi berikut nilai:

  • 0 - bermakna sambungan belum diwujudkan lagi.

  • 事件事件处理程序描述
    openSocket.onopen连接建立时触发
    messageSocket.onmessage客户端接收服务端数据时触发
    errorSocket.onerror通信发生错误时触发
    closeSocket.onclose连接关闭时触发
    1 - Menunjukkan bahawa sambungan diwujudkan dan komunikasi boleh dilakukan.
  • 2 - Menunjukkan bahawa sambungan sedang ditutup.

  • 3 - Menunjukkan bahawa sambungan telah ditutup atau sambungan tidak boleh dibuka.

Socket.bufferedAmount
方法描述
Socket.send()

使用连接发送数据

Socket.close()

关闭连接

Sifat baca sahaja <🎜>bufferedAmount<🎜> has been send() meletakkan bilangan bait teks UTF-8 yang beratur untuk penghantaran tetapi masih belum dihantar. <🎜>
<🎜><🎜>Acara WebSocket <🎜><🎜>Berikut ialah peristiwa berkaitan objek WebSocket. Katakan kita menggunakan kod di atas untuk mencipta objek Socket: <🎜><🎜><🎜><🎜>Kaedah WebSocket <🎜><🎜>Berikut ialah kaedah berkaitan objek WebSocket. Katakan kita menggunakan kod di atas untuk mencipta objek Soket: <🎜> < /tr>
KaedahPenerangan
Socket.send()<🎜>Gunakan sambungan untuk menghantar data<🎜>
Soket. close() <🎜>Tutup sambungan<🎜>

Instance WebSocket

Protokol WebSocket pada asasnya ialah protokol berasaskan TCP.

Untuk mewujudkan sambungan WebSocket, penyemak imbas klien mesti memulakan permintaan HTTP ke pelayan terlebih dahulu Permintaan ini berbeza daripada permintaan HTTP biasa dan mengandungi beberapa maklumat pengepala tambahan, termasuk maklumat pengepala tambahan "Naik taraf : WebSocket" Menunjukkan bahawa ini adalah permintaan HTTP untuk memohon naik taraf protokol. Pelayan menghuraikan maklumat pengepala tambahan ini dan kemudian menjana maklumat respons dan mengembalikannya kepada klien. Sambungan WebSocket antara klien dan pelayan diwujudkan, dan kedua-duanya pihak boleh berkomunikasi secara bebas melalui maklumat saluran sambungan ini, dan sambungan ini akan terus wujud sehingga sama ada klien atau pelayan menutup sambungan secara aktif.

HTML dan JavaScript pada bahagian klien

Kebanyakan penyemak imbas kini menyokong antara muka WebSocket() Anda boleh mencuba contoh dalam penyemak imbas berikut: Chrome, Mozilla, Opera dan Safari.

kandungan fail php_websocket.html

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>php中文网(php.cn)</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>

Pasang pywebsocket

Sebelum melaksanakan prosedur di atas, kami perlu mencipta perkhidmatan yang menyokong WebSocket. Muat turun mod_pywebsocket daripada pywebsocket, atau gunakan arahan git untuk memuat turun:

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

mod_pywebsocket memerlukan sokongan persekitaran python

mod_pywebsocket ialah sambungan Soket Web untuk HTTP Apache :


  • Nyahzip fail yang dimuat turun.

  • Masukkan direktori pywebsocket.

  • Laksanakan arahan:

    $ python setup.py build
    $ sudo python setup.py install
  • Lihat penerangan dokumen:

    $ pydoc mod_pywebsocket

Mulakan perkhidmatan

Laksanakan arahan berikut dalam direktori pywebsocket/mod_pywebsocket:

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

Arahan di atas akan membuka perkhidmatan dengan nombor port 9998. Gunakan -w untuk menetapkan pengendali di mana echo_wsh.py terletak.

Kini kita boleh membuka fail php_websocket.html yang dibuat lebih awal dalam penyemak imbas Chrome.