HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站爲了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。

瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以後，客戶端和服務器端就可以通過 TCP 連接直接交換數據。

當你獲取 Web Socket 連接後，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。

以下 API 用於創建 WebSocket 對象。

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

以上代碼中的第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

WebSocket 屬性

以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象：

屬性	描述
Socket.readyState	只讀屬性 readyState 表示連接狀態，可以是以下值： 0 - 表示連接尚未建立。 1 - 表示連接已建立，可以進行通信。 2 - 表示連接正在進行關閉。 3 - 表示連接已經關閉或者連接不能打開。
Socket.bufferedAmount	只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。

屬性

描述

Socket.readyState

只讀屬性 readyState 表示連接狀態，可以是以下值：

0 - 表示連接尚未建立。
1 - 表示連接已建立，可以進行通信。
2 - 表示連接正在進行關閉。
3 - 表示連接已經關閉或者連接不能打開。

Socket.bufferedAmount

只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。

WebSocket 事件

以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象：

事件	事件處理程序	描述
open	Socket.onopen	連接建立時觸發
message	Socket.onmessage	客戶端接收服務端數據時觸發
error	Socket.onerror	通信發生錯誤時觸發
close	Socket.onclose	連接關閉時觸發

WebSocket 方法

以下是 WebSocket 對象的相關方法。假定我們使用了以上代碼創建了 Socket 對象：

方法	描述
Socket.send()	使用連接發送數據
Socket.close()	關閉連接

WebSocket 實例

WebSocket 協議本質上是一個基於 TCP 的協議。

爲了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。

客戶端的 HTML 和 JavaScript

目前大部分瀏覽器支持 WebSocket() 接口，你可以在以下瀏覽器中嘗試實例： Chrome, Mozilla, Opera 和 Safari。

runoob_websocket.html 文件內容

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>菜鳥教程(runoob.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>

安裝 pywebsocket

在執行以上程序前，我們需要創建一個支持 WebSocket 的服務。從 pywebsocket 下載 mod_pywebsocket ,或者使用 git 命令下載：

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

mod_pywebsocket 需要 python 環境支持

mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴展，安裝步驟如下：

解壓下載的文件。
進入 pywebsocket 目錄。

執行命令：

$ python setup.py build
$ sudo python setup.py install

查看文檔說明:
```
$ pydoc mod_pywebsocket
```

開啓服務

在 pywebsocket/mod_pywebsocket 目錄下執行以下命令：

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

以上命令會開啓一個端口號爲 9998 的服務，使用 -w 來設置處理程序 echo_wsh.py 所在的目錄。

現在我們可以在 Chrome 瀏覽器打開前面創建的 runoob_websocket.html 文件。如果你的瀏覽器支持 WebSocket(), 點擊"運行 WebSocket"，你就可以看到整個流程各個步驟彈出的窗口，流程 Gif 演示：

在我們停止服務後，會彈出 "連接已關閉..."。

HTML5 服務器發送事件(Server-Sent Events)

HTML5 測驗

2 篇筆記寫筆記

   0o3

  234***[email protected]

  參考地址

Websocket 使用 ws 或 wss 的統一資源標誌符，類似於 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：
```
ws://example.com/wsapi
wss://secure.example.com/
```
Websocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數防火牆的限制。默認情況下，Websocket 協議使用 80 端口；運行在 TLS 之上時，默認使用 443 端口。

一個典型的Websocket握手請求如下：

客戶端請求
```
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
```
服務器迴應
```
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
```
- Connection 必須設置 Upgrade，表示客戶端希望連接升級。
- Upgrade 字段必須設置 Websocket，表示希望升級到 Websocket 協議。
- Sec-WebSocket-Key 是隨機的字符串，服務器端會用這些數據來構造出一個 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一個特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然後計算 SHA-1 摘要，之後進行 BASE-64 編碼，將結果做爲 “Sec-WebSocket-Accept” 頭的值，返回給客戶端。如此操作，可以儘量避免普通 HTTP 請求被誤認爲 Websocket 協議。
- Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均應當棄用。
- Origin 字段是可選的，通常用來表示在瀏覽器中發起此 Websocket 連接所在的頁面，類似於 Referer。但是，與 Referer 不同的是，Origin 只包含了協議和主機名稱。
- 其他一些定義在 HTTP 協議中的字段，如 Cookie 等，也可以在 Websocket 中使用。
在服務器方面，網上都有不同對websocket支持的服務器：
- php - http://code.google.com/p/phpwebsocket/
- jetty - http://jetty.codehaus.org/jetty/（版本7開始支持websocket）
- netty - http://www.jboss.org/netty
- ruby - http://github.com/gimite/web-socket-ruby
- Kaazing - https://web.archive.org/web/20100923224709/http://www.kaazing.org/confluence/display/KAAZING/Home
- Tomcat - http://tomcat.apache.org/（7.0.27支持websocket，建議用tomcat8，7.0.27中的接口已經過時）
- WebLogic - http://www.oracle.com/us/products/middleware/cloud-app-foundation/weblogic/overview/index.html（12.1.2開始支持）
- node.js - https://github.com/Worlize/WebSocket-Node
- node.js - http://socket.io
- nginx - http://nginx.com/
- mojolicious - http://mojolicio.us/
- python - https://github.com/abourget/gevent-socketio
- Django - https://github.com/stephenmcd/django-socketio
- erlang - https://github.com/ninenines/cowboy.git
  裝載自：http://www.runoob.com/html/html5-websocket.html

HTML5 WebSocket

HTML5 WebSocket

WebSocket 屬性

WebSocket 事件

WebSocket 方法

WebSocket 實例

客戶端的 HTML 和 JavaScript

安裝 pywebsocket

開啓服務

Window 安裝 Python 失敗 0x80070643，發生嚴重錯誤

《最新出爐》系列入門篇-Python+Playwright自動化測試-41-錄製視頻

eclipse修改代碼後，發佈到Tomcat下卻發現裏面的內容沒有更改

mysql之消息隊列

一般從美工拿到圖片，圖片的尺寸單位是px，要轉換爲Android使用的尺寸解決方案

Android Studio 開發中添加權限時遇到 Permission is only granted to system app 問題

Android 藍牙打印小票與WiFi打印小票兩種打印方式的實現（帶有圖片和二維碼）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結