純靜態HTML 與 C# Server 進行WebSocket 連線
阿新 • • 發佈：2018-12-05
轉載自：https://segmentfault.com/a/1190000017180726
TODO: 這篇文章只是寫了一個DEMO，告訴你如何使用C#構建一個WebSocket伺服器，以便HTML網頁可以通過WebSocket與之進行互動。將會使用到的 Package：
websocket-sharp
Newtonsoft.JSON
這個DEMO主要完成的工作是：
- HTML 連線 WebSocket 並傳送一個Json，Json包含兩個數字a和b。
- 伺服器監聽 WebSocket 並解析Json裡面的兩個數字，將兩個數字加起來的和作為結果以Json的形式傳送給HTML。
- HTML 得到返回以後更新顯示。
- 10秒之後，伺服器主動向瀏覽器再發送一次訊息。
準備姿勢
新建工程
首先需要準備兩個工程：
- 一個是Web專案，可以是任何Web專案，因為我們只用到HTML。HTML單檔案也是沒有問題的。這裡我用的是vscode live server。
- 另一個是C#命令列專案，當然也可以不是命令列，只是覺得命令列比較方便，DEMO也不需要窗體，如果你需要窗體可以使用WPF或者WinForms。
必要依賴
- 在C#專案中，我們需要安裝Nuget包：WebSocketSharp （由於這個Nuget包在寫文的時候還是rc，所以需要勾選包括搶鮮版才會搜尋出來哦）和 Newtonsoft.JSON
伺服器程式碼
首先我們需要新建一個類，作為一個app，去處理傳送來的訊息。
using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using WebSocketSharp; using WebSocketSharp.Server; namespace WebSocketDemo { class Add : WebSocketBehavior { protected override void OnOpen() { Console.WriteLine("Connection Open"); base.OnOpen(); } protected override void OnMessage(MessageEventArgs e) { var data = e.Data; if (TestJson(data)) { var param = JToken.Parse(data); if (param["a"] != null && param["b"] != null) { var a = param["a"].ToObject<int>(); var b = param["b"].ToObject<int>(); Send(JsonConvert.SerializeObject(new { code = 200, msg = "result is " + (a + b) })); Task.Factory.StartNew(() => { Task.Delay(10000).Wait(); Send(JsonConvert.SerializeObject(new { code = 200, msg = "I just to tell you, the connection is different from http, i still alive and could send message to you." })); }); } } else { Send(JsonConvert.SerializeObject(new { code = 400, msg = "request is not a json string." })); } } protected override void OnClose(CloseEventArgs e) { Console.WriteLine("Connection Closed"); base.OnClose(e); } protected override void OnError(ErrorEventArgs e) { Console.WriteLine("Error: " + e.Message); base.OnError(e); } private static bool TestJson(string json) { try { JToken.Parse(json); return true; } catch (JsonReaderException ex) { Console.WriteLine(ex); return false; } } } }
上面這一段程式碼中，重點在於OnMessage方法，這個方法就是處理訊息的主要流程。
在Main函式中，我們加入下面的程式碼。6690是這次Demo使用的埠號，第二行AddWebSocketService添加了一行路由，使得連線到ws://localhost:6690/add可以導向我們預定義好的App類中的處理邏輯。
using System;
using WebSocketSharp.Server;
namespace WebSocketDemo
{
class Program
{
static void Main(string[] args)
{
var wssv = new WebSocketServer(6690);
wssv.AddWebSocketService<Add>("/add");
wssv.Start();
Console.WriteLine("Server starting, press any key to terminate the server.");
Console.ReadKey(true);
wssv.Stop();
}
}
}客戶端程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>WebSocket DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<div>
a:<input type="text" id="inpA" /> b:<input type="text" id="inpB" />
<button type="button" id="btnSub">submit</button>
</div>
<ul id="outCnt"></ul>
<script>
let wsc;
var echo = function(text) {
var echoone = function(text) {
var dom = document.createElement("li");
var t = document.createTextNode(text);
dom.appendChild(t);
var cnt = document.getElementById("outCnt");
cnt.appendChild(dom);
};
if (Array.isArray(text)) {
text.map(function(t) {
echoone(t);
});
} else {
echoone(text);
}
};
(function() {
if ("WebSocket" in window) {
// init the websocket client
wsc = new WebSocket("ws://localhost:6690/add");
wsc.onopen = function() {
echo("connected");
};
wsc.onclose = function() {
echo("closed");
};
wsc.onmessage = function(e) {
var data = JSON.parse(e.data);
echo(data.msg || e.data);
console.log(data.msg || e.data);
};
// define click event for submit button
document.getElementById("btnSub").addEventListener('click', function() {
var a = parseInt(document.getElementById("inpA").value);
var b = parseInt(document.getElementById("inpB").value);
if (wsc.readyState == 1) {
wsc.send(JSON.stringify({ a: a, b: b }));
} else {
echo("service is not available");
}
});
}
})();
</script>
</body>
</html>
當建立WebSocket物件的時候，會自動進行連線，這個物件可以用onopen,onclose,onmessage分別處理事件。主要通訊的流程也是在onmessage中進行處理。