WebSocket 筆記 - WebSocketSharp

有時候Server 需要與Client 建立長連線，例如廣播機制，這時websocket 可以嘗試看看。

websocket 它是一個全雙工的機制，且建立一次連線就會一直存在，除非 server 斷掉；

當然我們也可以手動刻畫這個機制，網路上也有相關參考，但我們還是借用第三方套件比較省時。

打算實作的情境呢，先建置一個 websocket server(先console 方便檢視)，搭配一個簡易的網頁頁面，當作廣播中心，

主要是輸入一些文字，丟給 server 後幫我們廣播出去，其中被廣播的對象就是已經建立連線的使用者。

首先建立一個console 應用程式，使用WebSocketSharp-netstandard 這個套件，官網介紹的滿詳細的，除了基本設定，其中包含 ssl/tls、proxy、驗證都有，作者挺用心的，就決定是你了。

開始撰寫程式，先 using 一下相關命名空間

接著就是一串程式碼，後面分幾個步驟說明

Step1：

建立WebsocketServer 物件，並且指定13333 port 號(實務上local 端防火牆以及相關應用管道都需要知會開通)

Step2：

這邊等等後面再相關篇幅說明，可先看成加入相關自訂的動作或是行為到 Server

Step3：

啟動 server

Step4：

若已經有相關監聽時進入判斷式，印出監聽的port 號，以及對應的path 

Step5：

印出告知使用者，若要停止服務只需要按一下鍵盤，後面就會呼叫 stop 函式停止。

接著來說明 Step2：

前面說到這是我們自訂的動作，也就是說，大部分訊息流通時都從這邊觸發，來看一下程式碼(其實這邊也是從官網來的)

我們建立 Laputa Class，並且繼承 WebSocketBehavior，記得要using WebSocketSharp 與WebSocketSharp.Server

其中我們 override OnMessage 方法，裡面設計當訊息成功傳到Server 的時候，

應該要作那些事情，這邊很簡單，若是成功建立第一次連線，console 會印出對應文字，

之後只要有文字進來只會單獨的印出；其中覆寫的方法還有一些，後續也會用到其中一個。

其中，e 物件，除了有Data 屬性之外，還提供 RawData 屬性是為二進制的值。

以上，到這邊Server 算是階段完成初版，先 Run 一下。

接下來建置一支網頁，只要是方便我們輸入一些文字，以下是介面設計

前端搭配vue 來協助介面操作，先來看個全貌，html 的部分我就不說明了

在 javascript 方面，最上面先宣告 websocket 變數，當頁面上點擊後會呼叫 _fnConnect 方法並進行相關設定。

Step1：

• 建立 websocket 物件，並且傳入uri

Step2：

• 設定 binaryType

Step3：

• 設定 onopen callback 事件，當建立連線時，使用 send 傳出訊息

Step4：

• 設計 opclose callback 事件

Step5：

• 設計 onerror callback 事件

Step6：

• 當畫面點選關閉時，websocket 呼叫 close 方法

跟來看一下實際操作，啟動 WebSocket Server(Console)，再把網頁拉起來

接著調整一下Server 程式，模擬當訊息量稍微多一點化，可能需要搭配訊息(任務)佇列，這邊使用 .net 內建的ConcurrentQueue 類別以及獨體模式，讓應用程式只會有一個 Queue。

先建置任務物件 MessageQueueSingleton

接著調整Laputa 類別，override OnOpen，OnMessage 方法下將訊息加入 Queue

最後多加入一個頁面，一起來接收廣播的訊息

以上打好收工，程式碼參考連結