C#工做總結（一）：Fleck的WebSocket使用

時間 2019-11-05

標籤 c# 總結 fleck websocket 使用欄目 C# 简体版

原文原文鏈接

一.引子（Foreword）

最近公司裏面要作窗體和網頁交互的功能。網上找了一下資料，這裏作一個簡單的擴充和整理，部份內容多是摘自其餘博客，這裏會註明出處和原文地址供你們和本身往後查閱。javascript

二.基礎知識（Foundation）

（1）. WebSocket介紹html

WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——容許服務器主動發送信息給客戶端。（來自白度百科）前端

（2）.瀏覽器對WebSocket的支持java

瀏覽器git	支持狀況github
Chrome谷歌瀏覽器web	Chrome version 4+支持瀏覽器
Firefox火狐瀏覽器服務器	Firefox version 5+支持websocket
IE微軟瀏覽器	IE version 10+支持（咱們通常win7自帶的是IE11）
Safari蘋果瀏覽器	IOS 5+支持
Android Brower安卓瀏覽器	Android 4.5+支持

（3）. WebSocket服務器支持

廠商	應用服務器	備註
IBM	WebSphere	WebSphere 8.0以上版本支持，7.X以前版本結合MQTT支持相似的HTTP長鏈接
甲骨文	WebLogic	WebLogic 12c 支持，11g以及10g版本經過HTTP Publish支持相似的HTTP長鏈接
微軟	IIS	IIS 7.0+支持
Apache	Tomcat	Tomcat 7.0.5+支持
	Jetty	Jetty 7.0+支持

（4）. Web前端知識概要

<1>. 對象建立（調用WebSocket的構造函數）

1）函數原型：

[javascript] view plain copy

Constructor(DOMString url,[DOMString protocols]);

2）說明：url爲WebSocket服務器的地址，protocols爲發起握手的協議名稱，爲可選擇項。

<2>. 接口及函數方法（WebSocket的接口的定義）

1）函數原型：

[javascript] view plain copy

Interface<span style="color:#333333;"> </span>WebSocket:EventTarget{
readonly attribute DOMString url;
//readyState狀態值
Const unsigned short CONNECTING=0;
Const unsigned short OPEN=1;
Const unsigned short CLOSING=2;
Const unsigned short CLOSED=3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
//監聽網絡狀態的事件監聽器屬性
[TreatNonCallableAsNull] attribute Function? onopen;
[TreatNonCallableAsNull] attribute Function? onerror;
[TreatNonCallableAsNull] attribute Function? onclose;
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
//關閉網絡鏈接的方法
void close([Clamp] optional unsigned short code,optional DOMString reason);
//接受服務器消息的事件監聽器函數
[TreatNonCallableAsNull] attribute Function? onmessage;
attribute DOMString binaryType;
void send(DOMString data);
void send(ArrayBuffer data);
void send(Blob data);
};

2）說明：

【1】. 兩個方法：

● send()：向遠程服務器發送數據

● cosle()：關閉該WebSocket

【2】. 四個重要的事件監聽器屬性：

● onopen：當WebSocket創建網絡鏈接的時候觸發該事件

● onerror：當網絡鏈接出現問題的時候觸發該事件

● onclose：當WebSocket被關閉的時候觸發該事件

● onmessage：當WebSocket接受到遠程服務器的數據的時候觸發該事件

注意：1. 上面的四個函數名均爲小寫，大小寫時敏感的；

2. onmessage 綁定一個型爲 function(event){…} 的函數這樣就能夠經過event.data來得到返回的數據；

【3】. readyState屬性，用於返回WebSocket所處的狀態：

● CONNECTING（數值0）：WebSocket正在嘗試與服務器創建鏈接

● OPEN（數值1）：WebSocket與服務器已經創建鏈接

● CLOSING（數值2）：WebSocket正在關閉與服務器的鏈接

● CLOSED（數值3）：WebSocket已經關閉了與服務器的鏈接

<3>. 使用WebSocket（4步）

1）將相關的定義函數綁定到上面4個監聽事件中；

2）調用WebSocket的構造函數，給定一個url來初始化一個WebSocket對象；

3）經過send()方法來發送數據；

4）在有必要的時候能夠用close()來關閉監聽；

（4）.客戶端知識概要

<1>. 梗概

咱們能夠經過基礎的Socket通訊來實現和網頁的相互通訊。但因爲只有在.net Framework在4.5以及4.5以上的版本對WebSocket通訊的數據解析纔有相關的類來支持。因此解析數據寫起來十分的繁瑣，因此咱們使用第三方的庫來完成低版本.net框架中的通訊。若是有時間我也會寫一篇有關socket來進行通訊及解析數據的文章。

接下來我看看用的軟件和相關的技術知識。

<2>. .Net不一樣WebSocket庫的比較

我這裏找了一下網上的資料，以下連接，若是僅僅是要從網頁發送消息到服務器，那麼我這邊使用Flerk。

● 英文版：WebSocket libraries comparison

● 翻譯版：.NET的WebSocket開發包比較【已翻譯100%】

<3>. Fleck的源碼下載以及說明文檔

源碼能夠從網上下載，這裏我給出連接：源碼下載

點擊頁面中的Clone or download -> Download ZIP，以下

圖一

說明文檔就在下載的下面，是英文版的的，固然也能夠看我博客中的譯文：博主翻譯版說明文檔（以爲不錯的話轉載一下喲：-》）

一.引子（Foreword）

對於怎麼使用直接看說明文檔，很是簡單，這裏博主就很少說了。（博主都寫到晚上1點了T T）

三.代碼（Code）

（1）. Web網頁端代碼

[html] view plain copy

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>WebSocket測試</title>
<style>
.div1
{
height:88px;
width:173px;
border:1px solid blue;
margin:auto;
}
h4
{
margin:auto;
}
</style>
<script>
var webSocket = {};
//建立websockt
function CreateWebSocket() {
webSocket = new WebSocket("ws://127.0.0.1:30000");
webSocket.onopen = WebSokectOnOpen;
webSocket.onmessage = WebSocketOnMessage;
webSocket.onclose = WebSocketOnClose;
};
//創建鏈接事件
function WebSokectOnOpen() {
alert("已經打開鏈接！");
webSocket.Send("WebSocketCreate Success!");
};
//監聽事件
function WebSocketOnMessage(event) {
//監聽來自客戶端的數據
alert(event.data);
};
function WebSocketOnClose() {
//監聽來自客戶端的數據
alert('和服務器斷開鏈接');
};
//發送事件
function WebSocketSendMsg() {
//獲取text中的值
var text = document.getElementById("Text1").value;
//發送到服務器
webSocket.send(text);
};
</script>
</head>
<body onload="CreateWebSocket()">
<div class="div1">
<h4>CSDN博客</h4>
<h4>By:LoveMiw</h4>
<input type="text" id="Text1" />
<input type="button" onclick="WebSocketSendMsg()" value="發送數據" />
</div>
</body>
</html>

（2）. 服務端C#代碼

[csharp] view plain copy

//上面是程序生成的using
using Fleck;
namespace WebSocketTest
{
class Program
{
static void Main(string[] args)
{
//客戶端url以及其對應的Socket對象字典
IDictionary<string, IWebSocketConnection> dic_Sockets = new Dictionary<string, IWebSocketConnection>();
//建立
WebSocketServer server = new WebSocketServer("ws://0.0.0.0:30000");//監聽全部的的地址
//出錯後進行重啓
server.RestartAfterListenError = true;
//開始監聽
server.Start(socket =>
{
socket.OnOpen = () => //鏈接創建事件
{
//獲取客戶端網頁的url
string clientUrl = socket.ConnectionInfo.ClientIpAddress + ":" + socket.ConnectionInfo.ClientPort;
dic_Sockets.Add(clientUrl, socket);
Console.WriteLine(DateTime.Now.ToString() + "|服務器:和客戶端網頁:" + clientUrl + " 創建WebSock鏈接！");
};
socket.OnClose = () => //鏈接關閉事件
{
string clientUrl = socket.ConnectionInfo.ClientIpAddress + ":" + socket.ConnectionInfo.ClientPort;
//若是存在這個客戶端,那麼對這個socket進行移除
if (dic_Sockets.ContainsKey(clientUrl))
{
//注:Fleck中有釋放
//關閉對象鏈接
//if (dic_Sockets[clientUrl] != null)
//{
//dic_Sockets[clientUrl].Close();
//}
dic_Sockets.Remove(clientUrl);
}
Console.WriteLine(DateTime.Now.ToString() + "|服務器:和客戶端網頁:" + clientUrl + " 斷開WebSock鏈接！");
};
socket.OnMessage = message => //接受客戶端網頁消息事件
{
string clientUrl = socket.ConnectionInfo.ClientIpAddress + ":" + socket.ConnectionInfo.ClientPort;
Console.WriteLine(DateTime.Now.ToString() + "|服務器:【收到】來客戶端網頁:" + clientUrl + "的信息：\n" + message);
};
});
Console.ReadKey();
foreach (var item in dic_Sockets.Values)
{
if (item.IsAvailable == true)
{
item.Send("服務器消息：" + DateTime.Now.ToString());
}
}
Console.ReadKey();
//關閉與客戶端的全部的鏈接
foreach (var item in dic_Sockets.Values)
{
if (item != null)
{
item.Close();
}
}
Console.ReadKey();
}
}
}