1. 程式人生 > 其它 >HTML (015) HTML5 實時通訊WebSocket

HTML (015) HTML5 實時通訊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 - 表示連線已經關閉或者連線不能開啟。

  • 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](javascript:WebSocketTest())

二、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");
                    }
                }
               
            }
        }