用 C# 編寫 WebSocket 伺服器

如果您想使用 WebSocket API,擁有一個伺服器會很有幫助。在本文中,我將向您展示如何用 C# 編寫一個。您可以使用任何伺服器端語言來實現,但為了保持簡單和易於理解,我選擇了微軟的語言。

此伺服器符合 RFC 6455,因此它只能處理來自 Chrome 16、Firefox 11、IE 10 及更高版本的連線。

第一步

WebSocket 透過 TCP(傳輸控制協議) 連線進行通訊。幸運的是,C# 有一個 TcpListener 類,它的功能正如其名。它位於 System.Net.Sockets 名稱空間中。

注意: 使用 using 關鍵字包含名稱空間是一個好主意,這樣可以減少輸入量。它允許您在不每次都輸入完整名稱空間的情況下使用名稱空間中的類。

TcpListener

建構函式

cs
TcpListener(System.Net.IPAddress localAddr, int port)

localAddr 指定監聽器的 IP,port 指定埠。

注意: 要從 string 建立 IPAddress 物件,請使用 IPAddressParse 靜態方法。

方法

  • Start()
  • System.Net.Sockets.TcpClient AcceptTcpClient() 等待 TCP 連線,接受它並將其作為 TcpClient 物件返回。

這是一個最基本的伺服器實現

cs
using System.Net.Sockets;
using System.Net;
using System;

class Server {
    public static void Main() {
        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);

        server.Start();
        Console.WriteLine("Server has started on 127.0.0.1:80.{0}Waiting for a connection…", Environment.NewLine);

        TcpClient client = server.AcceptTcpClient();

        Console.WriteLine("A client connected.");
    }
}

TcpClient

方法

  • System.Net.Sockets.NetworkStream GetStream() 獲取流,這是通訊通道。通道的兩端都具有讀取和寫入功能。

屬性

  • int Available 此屬性指示已傳送多少位元組的資料。在 NetworkStream.DataAvailabletrue 之前,該值為零。

NetworkStream

方法

  • 從緩衝區寫入位元組,offset 和 size 確定訊息的長度。

    cs
    Write(byte[] buffer, int offset, int size)
    
  • 將位元組讀入 bufferoffsetsize 確定訊息的長度。

    cs
    Read(byte[] buffer, int offset, int size)
    

讓我們擴充套件我們的示例。

cs
TcpClient client = server.AcceptTcpClient();

Console.WriteLine("A client connected.");

NetworkStream stream = client.GetStream();

// Enter to an infinite cycle to be able to handle every change in stream
while (true) {
    while (!stream.DataAvailable);

    byte[] bytes = new byte[client.Available];

    stream.Read(bytes, 0, bytes.Length);
}

握手

當客戶端連線到伺服器時,它會發送一個 GET 請求,將連線從一個簡單的 HTTP 請求升級為 WebSocket。這被稱為握手。

此示例程式碼可以檢測到客戶端的 GET 請求。請注意,這將阻塞直到訊息的前 3 個位元組可用。在生產環境中應研究替代解決方案。

cs
using System.Text;
using System.Text.RegularExpressions;

while(client.Available < 3)
{
   // wait for enough bytes to be available
}

byte[] bytes = new byte[client.Available];

stream.Read(bytes, 0, bytes.Length);

// Translate bytes of request to string
String data = Encoding.UTF8.GetString(bytes);

if (Regex.IsMatch(data, "^GET")) {

} else {

}

響應很容易構建,但可能有點難以理解。伺服器握手的完整解釋可以在 RFC 6455 的第 4.2.2 節中找到。就我們而言,我們將構建一個簡單的響應。

您必須

  1. 獲取“Sec-WebSocket-Key”請求頭的值,不帶任何前導或尾隨空格
  2. 將其與“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”連線(RFC 6455 指定的特殊 GUID)
  3. 計算新值的 SHA-1 和 Base64 雜湊
  4. 將雜湊寫回作為 HTTP 響應中 Sec-WebSocket-Accept 響應頭的值
cs
if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
{
    const string eol = "\r\n"; // HTTP/1.1 defines the sequence CR LF as the end-of-line marker

    byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol
        + "Connection: Upgrade" + eol
        + "Upgrade: websocket" + eol
        + "Sec-WebSocket-Accept: " + Convert.ToBase64String(
            System.Security.Cryptography.SHA1.Create().ComputeHash(
                Encoding.UTF8.GetBytes(
                    new System.Text.RegularExpressions.Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
                )
            )
        ) + eol
        + eol);

    stream.Write(response, 0, response.Length);
}

解碼訊息

成功握手後,客戶端將向伺服器傳送編碼的訊息。

如果我們傳送“MDN”,我們會得到這些位元組

129 131 61 84 35 6 112 16 109

讓我們看看這些位元組的含義。

第一個位元組,當前值為 129,是一個位欄位,分解如下

FIN (位 0) RSV1 (位 1) RSV2 (位 2) RSV3 (位 3) Opcode (位 4:7)
1 0 0 0 0x1=0001
  • FIN 位:此位指示是否已從客戶端傳送完整訊息。訊息可以分幀傳送,但目前我們將保持簡單。
  • RSV1、RSV2、RSV3:除非協商了提供非零值的擴充套件,否則這些位必須為 0。
  • Opcode:這些位描述了接收到的訊息型別。Opcode 0x1 表示這是一個文字訊息。Opcode 完整列表

第二個位元組,當前值為 131,是另一個位欄位,分解如下

MASK (位 0) Payload Length (位 1:7)
1 0x83=0000011
  • MASK 位:定義“Payload data”是否被掩碼。如果設定為 1,則 Masking-Key 中存在一個掩碼金鑰,用於解除“Payload data”的掩碼。所有從客戶端到伺服器的訊息都有此位設定為 1。
  • Payload Length:如果此值在 0 到 125 之間,則它是訊息的長度。如果為 126,則接下來的 2 個位元組(16 位無符號整數)是長度。如果為 127,則接下來的 8 個位元組(64 位無符號整數)是長度。

注意: 因為客戶端到伺服器的訊息的第一位總是 1,所以您可以從該位元組中減去 128 來去除 MASK 位。

請注意,我們的訊息中設定了 MASK 位。這意味著接下來的四個位元組(61、84、35 和 6)是用於解碼訊息的掩碼位元組。這些位元組會隨著每條訊息而變化。

剩餘的位元組是編碼的訊息負載。

解碼演算法

D_i = E_i XOR M_(i mod 4)

其中 D 是解碼後的訊息陣列,E 是編碼後的訊息陣列,M 是掩碼位元組陣列,i 是要解碼的訊息位元組的索引。

C# 中的示例

cs
byte[] decoded = new byte[3];
byte[] encoded = new byte[3] {112, 16, 109};
byte[] mask = new byte[4] {61, 84, 35, 6};

for (int i = 0; i < encoded.Length; i++) {
    decoded[i] = (byte)(encoded[i] ^ mask[i % 4]);
}

整合

ws-server.cs

cs
//
// csc ws-server.cs
// ws-server.exe

using System;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Text.RegularExpressions;

class Server {
    public static void Main() {
        string ip = "127.0.0.1";
        int port = 80;
        var server = new TcpListener(IPAddress.Parse(ip), port);

        server.Start();
        Console.WriteLine("Server has started on {0}:{1}, Waiting for a connection…", ip, port);

        TcpClient client = server.AcceptTcpClient();
        Console.WriteLine("A client connected.");

        NetworkStream stream = client.GetStream();

        // enter to an infinite cycle to be able to handle every change in stream
        while (true) {
            while (!stream.DataAvailable);
            while (client.Available < 3); // match against "get"

            byte[] bytes = new byte[client.Available];
            stream.Read(bytes, 0, bytes.Length);
            string s = Encoding.UTF8.GetString(bytes);

            if (Regex.IsMatch(s, "^GET", RegexOptions.IgnoreCase)) {
                Console.WriteLine("=====Handshaking from client=====\n{0}", s);

                // 1. Obtain the value of the "Sec-WebSocket-Key" request header without any leading or trailing whitespace
                // 2. Concatenate it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (a special GUID specified by RFC 6455)
                // 3. Compute SHA-1 and Base64 hash of the new value
                // 4. Write the hash back as the value of "Sec-WebSocket-Accept" response header in an HTTP response
                string swk = Regex.Match(s, "Sec-WebSocket-Key: (.*)").Groups[1].Value.Trim();
                string swkAndSalt = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
                byte[] swkAndSaltSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swkAndSalt));
                string swkAndSaltSha1Base64 = Convert.ToBase64String(swkAndSaltSha1);

                // HTTP/1.1 defines the sequence CR LF as the end-of-line marker
                byte[] response = Encoding.UTF8.GetBytes(
                    "HTTP/1.1 101 Switching Protocols\r\n" +
                    "Connection: Upgrade\r\n" +
                    "Upgrade: websocket\r\n" +
                    "Sec-WebSocket-Accept: " + swkAndSaltSha1Base64 + "\r\n\r\n");

                stream.Write(response, 0, response.Length);
            } else {
                bool fin = (bytes[0] & 0b10000000) != 0,
                    mask = (bytes[1] & 0b10000000) != 0; // must be true, "All messages from the client to the server have this bit set"
                int opcode = bytes[0] & 0b00001111; // expecting 1 - text message
                ulong offset = 2,
                      msgLen = bytes[1] & (ulong)0b01111111;

                if (msgLen == 126) {
                    // bytes are reversed because websocket will print them in Big-Endian, whereas
                    // BitConverter will want them arranged in little-endian on windows
                    msgLen = BitConverter.ToUInt16(new byte[] { bytes[3], bytes[2] }, 0);
                    offset = 4;
                } else if (msgLen == 127) {
                    // To test the below code, we need to manually buffer larger messages — since the NIC's autobuffering
                    // may be too latency-friendly for this code to run (that is, we may have only some of the bytes in this
                    // websocket frame available through client.Available).
                    msgLen = BitConverter.ToUInt64(new byte[] { bytes[9], bytes[8], bytes[7], bytes[6], bytes[5], bytes[4], bytes[3], bytes[2] },0);
                    offset = 10;
                }

                if (msgLen == 0) {
                    Console.WriteLine("msgLen == 0");
                } else if (mask) {
                    byte[] decoded = new byte[msgLen];
                    byte[] masks = new byte[4] { bytes[offset], bytes[offset + 1], bytes[offset + 2], bytes[offset + 3] };
                    offset += 4;

                    for (ulong i = 0; i < msgLen; ++i)
                        decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]);

                    string text = Encoding.UTF8.GetString(decoded);
                    Console.WriteLine("{0}", text);
                } else
                    Console.WriteLine("mask bit not set");

                Console.WriteLine();
            }
        }
    }
}

client.html

html
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
    <script src="client.js" defer></script>
  </head>
  <body>
    <h2>WebSocket Test</h2>
    <textarea cols="60" rows="6"></textarea>
    <button>send</button>
    <div id="output"></div>
  </body>
</html>

styles.css

css
textarea {
  vertical-align: bottom;
}
#output {
  overflow: auto;
}
#output > p {
  overflow-wrap: break-word;
}
#output span {
  color: blue;
}
#output span.error {
  color: red;
}

client.js

js
// http://www.websocket.org/echo.html
const button = document.querySelector("button");
const output = document.querySelector("#output");
const textarea = document.querySelector("textarea");
const wsUri = "ws://127.0.0.1/";
const websocket = new WebSocket(wsUri);

button.addEventListener("click", onClickButton);

websocket.onopen = (e) => {
  writeToScreen("CONNECTED");
  doSend("WebSocket rocks");
};

websocket.onclose = (e) => {
  writeToScreen("DISCONNECTED");
};

websocket.onmessage = (e) => {
  writeToScreen(`<span>RESPONSE: ${e.data}</span>`);
};

websocket.onerror = (e) => {
  writeToScreen(`<span class="error">ERROR:</span> ${e.data}`);
};

function doSend(message) {
  writeToScreen(`SENT: ${message}`);
  websocket.send(message);
}

function writeToScreen(message) {
  output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
}

function onClickButton() {
  const text = textarea.value;

  text && doSend(text);
  textarea.value = "";
  textarea.focus();
}