傳統(tǒng)“長(zhǎng)輪詢”實(shí)現(xiàn)Web端即時(shí)通訊的問(wèn)題

WebSocket出現(xiàn)之前，Web端為了實(shí)現(xiàn)即時(shí)通訊，所用的技術(shù)都是Ajax輪詢(polling)。輪詢是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客服端的瀏覽器。這種傳統(tǒng)的HTTP request 的模式帶來(lái)很明顯的缺點(diǎn) – 瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，然而HTTP request 的header是非常長(zhǎng)的，里面包含的數(shù)據(jù)可能只是一個(gè)很小的值，這樣會(huì)占用很多的帶寬。

而比較新的技術(shù)去做輪詢的效果是Comet , 但這種技術(shù)雖然可達(dá)到全雙工通信，依然需要發(fā)出請(qǐng)求。

WebSocket 技術(shù)概覽

在 WebSocket API，瀏覽器和服務(wù)器只需要要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送，改變了原有的B/S模式。

WebSocket技術(shù)應(yīng)用的典型架構(gòu)：

#c67cbc1670aeb3fdd55d76e76c52be8c#

WebSocket的技術(shù)原理：

介紹了基礎(chǔ)知識(shí)，下面開始本文的正文內(nèi)容：

C# websocket及時(shí)通信協(xié)議的實(shí)現(xiàn)

1：Websocket有java、nodejs、python、PHP、等版本 ，我現(xiàn)在使用的是C3版本，服務(wù)器端是Fleck。客戶端和服務(wù)器端來(lái)使用websocket的，下面開始講解如何使用：

2：在開始之前我們先來(lái)看看哪些瀏覽器支持websocket:

Websocket服務(wù)器支持：

3：接下來(lái)我們使用的是C#控制臺(tái)程序來(lái)實(shí)現(xiàn)客戶端直接通信的實(shí)施推送第一步服務(wù)器端：

打開VS2015 創(chuàng)建項(xiàng)目Webshoufa（如下圖）

服務(wù)器端示例展示：

打開主程序入庫(kù)Program.CS

寫入主要鏈接推送代碼如下展示

FleckLog.Level = LogLevel.Debug; var allSockets = new List<IWebSocketConnection>(); var server = new WebSocketServer("ws://0.0.0.0:7181"); server.Start(socket => { socket.OnOpen = () => {  Console.WriteLine("Open!");  allSockets.Add(socket); }; socket.OnClose = () => {  Console.WriteLine("Close!");  allSockets.Remove(socket); }; socket.OnMessage = message => {  Console.WriteLine(message);  allSockets.ToList().ForEach(s => s.Send("Echo: " + message)); }; });

以上代碼：尤為重要的注意【Fleck】我們此次實(shí)例中服務(wù)端使用的是Fleck如下解釋：

Fleck是C＃中的一個(gè)WebSocket服務(wù)器實(shí)現(xiàn)。從Nugget項(xiàng)目分支出來(lái)，F(xiàn)leck不需要繼承，容器或其他引用。代碼示例如下（以下是一個(gè)將回顯給客戶端的例子。），在實(shí)現(xiàn)之前.NET平臺(tái)必須是在4.5之上才能運(yùn)行，

上面開始已經(jīng)提到。例子中定義引用WebSocketServer服務(wù)寫入端口路勁，格式方法是固定的。參照寫入即可。

實(shí)例代碼1如下

var server = new WebSocketServer("ws://localhost:7181");server.Start(socket => { socket.OnOpen = () => Console.WriteLine("Open!"); socket.OnClose = () => Console.WriteLine("Close!"); socket.OnMessage = message => socket.Send(message); });

實(shí)例代碼2如下（安全秘鑰版）

ar server = new WebSocketServer（“ wss：//0.0.0.0：8431 ”）;server.Certificate = new X509Certificate2（“ MyCert.pfx ”）;server.Start（socket =>{ // ...用法正常 }）;

開始觸發(fā)server.Start業(yè)務(wù)輸出代碼，以上兩部分實(shí)例代碼輸出一樣的區(qū)別在于啟用安全連接需要兩件事情：使用該方案wss代替ws，并將Fleck指向包含公鑰和私鑰的x509證書。

細(xì)可以參考官網(wǎng)API：https://github.com/statianzo/Fleck

接下來(lái)寫入觸發(fā)鍵盤響應(yīng)代碼:如下所示

var input = Console.ReadLine(); while (input != "exit") { foreach (var socket in allSockets.ToList()) {  socket.Send(input); } input = Console.ReadLine(); }

代碼解析：上述定義input =Console.ReadLine();由第一段輸出參數(shù)

在input不為空的情況下給予下一次事件發(fā)生。

在此完成服務(wù)器端示例開發(fā)。

客戶端頁(yè)面請(qǐng)求端展示（瀏覽器端）

1：新建客戶端項(xiàng)目，以web頁(yè)面或者webform頁(yè)面均可。

2：我的示例是以webform來(lái)創(chuàng)建如下圖展示：

在此，我們只實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)交互展示，如需要數(shù)據(jù)存儲(chǔ)業(yè)務(wù)，需要在進(jìn)行后臺(tái)編碼。

3：前段代碼展示：

JS詳解部分

<script type="text/javascript"> var start = function () { var inc = document.getElementById('incomming'); var wsImpl = window.WebSocket || window.MozWebSocket; var form = document.getElementById('sendForm'); var input = document.getElementById('sendText'); inc.innerHTML += "connecting to server ..<br/>"; // 創(chuàng)建新的websocket新連接端口為7181 window.ws = new wsImpl('ws://localhost:7181/'); // 當(dāng)數(shù)據(jù)從服務(wù)器服務(wù)中心發(fā)送后，繼續(xù)向下運(yùn)行過(guò)程 ws.onmessage = function (evt) { inc.innerHTML += evt.data + '<br/>'; }; // 當(dāng)鏈接對(duì)象找到服務(wù)端成功對(duì)接后，提示正常打開 ws.onopen = function () { inc.innerHTML += '.. connection open<br/>'; }; // 當(dāng)鏈接對(duì)象未找找到服務(wù)端成功對(duì)接后，提示打開失敗，別切單項(xiàng)關(guān)閉 ws.onclose = function () { inc.innerHTML += '.. connection closed<br/>'; } form.addEventListener('submit', function (e) { e.preventDefault(); var val = input.value; ws.send(val); input.value = ""; }); } window.onload = start;</script>

注意：以上示例代碼片段中window.ws = new wsImpl('ws://localhost:7181/');中ws關(guān)鍵定義。

啟用安全連接需要兩件事情：使用該方案wss代替ws，并將Fleck指向包含公鑰和私鑰的x509證書。

并使用window.onload = start;函數(shù)。

注意：

一.將腳本代碼放在網(wǎng)頁(yè)的底端，這樣在運(yùn)行腳本代碼的時(shí)候，可以確保要操作的對(duì)象已經(jīng)加載完成。

二.通過(guò)window.onload來(lái)執(zhí)行腳本代碼。

第二段代碼：調(diào)用控件實(shí)體進(jìn)行事件觸發(fā)：

<body> <form id="sendForm"> <input id="sendText" placeholder="Text to send" /> </form> <pre id="incomming"></pre></body>

以上是客戶端web頁(yè)面訪問(wèn)進(jìn)行實(shí)施數(shù)據(jù)推送的頁(yè)面開發(fā)完成。

好了，到了這里將兩個(gè)項(xiàng)目生成無(wú)誤之后逐個(gè)啟動(dòng)不分順序，注意需要都啟動(dòng)方可進(jìn)行測(cè)試驗(yàn)證：如下圖效果。

啟動(dòng)客戶端頁(yè)面和控制臺(tái)程序（然后刷新下客戶端頁(yè)面即可）

在客戶端和服務(wù)器端交互時(shí)輸入：你好，高峰或者XXXX信息，幾乎在零誤差時(shí)間內(nèi)服務(wù)器端收到數(shù)據(jù)。然后也可在服務(wù)器端窗口輸入信息，例如：你是不是要去阿拉善出差？

成功了，呵呵，是不是很神奇，現(xiàn)在可以添加自己喜歡的接口業(yè)務(wù)邏輯在里面了，是不是覺得前后臺(tái)通信變得簡(jiǎn)單了？強(qiáng)不強(qiáng)大？爽不爽！！！！

Ok，到此我們就結(jié)束了這里的教程，此次重點(diǎn)講述了以下兩點(diǎn)開發(fā)組套，大家在開發(fā)過(guò)程中尤為重視：

1：.NET 4.5 添加了WebSocket

2：服務(wù)端：

var listener = new HttpListener();listener.Prefixes.Add("http://*:8080/");listener.Start();var context = await listener.GetContextAsync();var wsContext = await context.AcceptWebSocketAsync(null);var ws = wsContext.WebSocket;

3：客戶端：

var ws = new ClientWebSocket();await ws.ConnectAsync(new Uri("ws://127.0.0.1:8080"),CancellationToken.None);

Ok，感謝大家看完小示例，有不足之處還請(qǐng)大家多多指教，共同探討，以下將實(shí)例代碼程序上傳進(jìn)來(lái)供大家參考，完善。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)VEVB武林網(wǎng)的支持。