HTML5（12） 實時通訊WebSocket

一、WebSocket

1、概述

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

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

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

瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。

以下 API 用於創建 WebSocket 對象。

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

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

2、WebSocket 屬性

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

3、WebSocket 事件

• open ：   Socket.onopen    連接建立時觸發
• message ：   Socket.onmessage    客戶端接收服務端數據時觸發
• error ：   Socket.onerror    通信發生錯誤時觸發
• close ：   Socket.onclose    連接關閉時觸發

4、WebSocket 方法

• Socket.send() ：   使用連接發送數據
• Socket.close()：    關閉連接

5、Websocket握手請求

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

為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的 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 協議。

6、Websocket 端口

Websocket 使用 ws 或 wss 的統一資源標志符，類似於 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數防火牆的限制。默認情況下，Websocket 協議使用 80 端口；運行在 TLS 之上時，默認使用 443 端口。

7、客戶端代碼

菜鳥教程(runoob.com)

運行 WebSocket

二、C# 建立Socket連接

1、利用原始socket

https://www.cnblogs.com/xqaizx/p/9446863.html

2、利用第三方庫

c#可以選擇websocket-sharp來實現websocket Server。或者https://github.com/Azure/DotNetty

class Program
    {
        static void Main(string[] args)
        {
            var wssv = new WebSocketServer(10086);
            wssv.AddWebSocketService("/scan");
            wssv.Start();
            if (wssv.IsListening)
            {
                Console.WriteLine("Listening on port {0}, and providing WebSocket services:", wssv.Port);
                foreach (var path in wssv.WebSocketServices.Paths)
                    Console.WriteLine("- {0}", path);
            }

            Console.WriteLine("\nPress Enter key to stop the server...");
            Console.ReadLine();

            wssv.Stop();
        }
    }

    public class ScannerHandler : WebSocketBehavior
    {
        protected override void OnMessage(MessageEventArgs e)
        {
            if(e.Data == "scan")
            {
                ScanResult result = ScanerHelper.Scan("D:\\test.jpg");
                if (result.Success)
                {
                    Console.WriteLine("scan success");
                    Send("scan success");
                }
                else
                {
                    Send("scan eror");
                }
            }
           
        }
    }