C#版本websocket及時通信協議實現(教程示例)


 

1:Websocket有java、nodejs、python、PHP、等版本 ,我現在使用的是C3版本,服務器端是Fleck。客戶端和服務器端來使用websocket的,下面開始講解如何使用:

2:開始之前我們先來看看哪些瀏覽器支持websocket:

Websocket服務器支持:

3:接下來我們使用的是C#控制台程序來實現客戶端直接通信的實施推送第一步服務器端:

打開VS2015 創建項目Webshoufa(如下圖)

 

服務器端示例展示:

 

打開主程序入庫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));

                };

            });
View Code

以上代碼:尤為重要的注意【Fleck我們此次實例中服務端使用的是Fleck如下解釋:

Fleck是C#中的一個WebSocket服務器實現。Nugget項目分支出來 ,Fleck不需要繼承,容器或其他引用。代碼示例如下(以下是一個將回顯給客戶端的例子。,在實現之前.NET平台必須是在4.5之上才能運行,

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

 

實例代碼1如下

1 var server = new WebSocketServer("ws://localhost:7181");
2 server.Start(socket =>
3   {
4     socket.OnOpen = () => Console.WriteLine("Open!");
5     socket.OnClose = () => Console.WriteLine("Close!");
6     socket.OnMessage = message => socket.Send(message);
7   });
View Code

實例代碼2如下(安全秘鑰版)

ar  server = new  WebSocketServer(“ wss://0.0.0.0:8431 ”);
server.Certificate = new X509Certificate2(“ MyCert.pfx ”);
server.Start(socket =>
{
  // ...用法正常 
});
View Code

開始觸發server.Start業務輸出代碼,以上兩部分實例代碼輸出一樣的區別在於啟用安全連接需要兩件事情:使用該方案wss代替ws,並將Fleck指向包含公鑰和私鑰的x509證書。詳細可以參考官網API:https://github.com/statianzo/Fleck

 

接下來寫入觸發鍵盤響應代碼:如下所示

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

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

input不為空的情況下給予下一次事件發生。

在此完成服務器端示例開發。

 

客戶端頁面請求端展示(瀏覽器端)

1:新建客戶端項目,以web頁面或者webform頁面均可。

2:我的示例是以webform來創建如下圖展示:

在此,我們只實現數據實時交互展示,如需要數據存儲業務,需要在進行后台編碼。

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/>";

            // 創建新的websocket新連接端口為7181
            window.ws = new wsImpl('ws://localhost:7181/');

            // 當數據從服務器服務中心發送后,繼續向下運行過程
            ws.onmessage = function (evt) {
                inc.innerHTML += evt.data + '<br/>';
            };

            // 當鏈接對象找到服務端成功對接后,提示正常打開
            ws.onopen = function () {
                inc.innerHTML += '.. connection open<br/>';
            };

            // 當鏈接對象未找找到服務端成功對接后,提示打開失敗,別切單項關閉
            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>
View Code

 

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

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

並使用window.onload = start;函數。

 

注意:

 

一. 將腳本代碼放在網頁的底端,這樣在運行腳本代碼的時候,可以確保要操作的對象已經加載完成。
.通過window.onload來執行腳本代碼。

 

有需要了解window.onloadJS中函數中的用法詳細可參考:

http://www.softwhy.com/forum.php?mod=viewthread&tid=6191

第二段代碼:調用控件實體進行事件觸發:

<body>

    <form id="sendForm">

        <input id="sendText" placeholder="Text to send" />

    </form>

    <pre id="incomming"></pre>

</body>
View Code

以上是客戶端web頁面訪問進行實施數據推送的頁面開發完成。

好了,到了這里將兩個項目生成無誤之后逐個啟動不分順序,注意需要都啟動方可進行測試驗證:如下圖效果。

 

啟動客戶端頁面和控制台程序(然后刷新下客戶端頁面即可)

 

在客戶端和服務器端交互時輸入:你好,高峰或者XXXX信息,幾乎在零誤差時間內服務器端收到數據。然后也可在服務器端窗口輸入信息,例如:你是不是要去阿拉善出差?

成功了,呵呵,是不是很神奇,現在可以添加自己喜歡的接口業務邏輯在里面了,是不是覺得前后台通信變得簡單了?強不強大?爽不爽!!!!

Ok,到此我們就結束了這里的教程,此次重點講述了以下兩點開發組套,大家在開發過程中尤為重視:

1:.NET 4.5 添加了WebSocket
2:服務端:
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,感謝大家看完小示例,有不足之處還請大家多多指教,共同探討,以下將實例代碼程序上傳進來供大家參考,完善。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM