打通B/S與C/S ！讓HTML5 WebSocket與.NET Socket公用同一個服務端！

時間 2019-12-01

標籤打通 html5 html websocket socket 公用同一個服務欄目 C&C++ 简体版

原文原文鏈接

隨着HTML5 WebSocket技術的日益成熟與普及，咱們可以藉助WebSocket來更加方便地打通BS與CS -- 因爲B/S中的WebSocket可以直接鏈接到C/S的服務端，並進行雙向通訊。例如如下圖所看到的：html

一.對Socket Server的要求

　　咱們可以嘗試讓Socket Server透明地支持WebSocketclient，所謂透明的意思是。服務端開發者不用關心client究竟是什麼類型。而是可以統一的接收數據、處理數據、發送數據。web

爲了作到這一點，咱們可以構建一個服務端框架，讓框架完畢透明化的工做，這就要求這個框架作到下面幾點：服務器

（1）依據clientTCP鏈接請求成功後的第一個消息中是否含有「websocket」標記，來推斷其是否爲WebSocketclient。假設client的類型是WebSocket，則本身主動完畢下面事情。websocket

（2）本身主動完畢Web Sokects 握手協議。框架

（3）針對接收到的每個WebSokect數據幀，都能本身主動將其解析，並從中分離出真正的消息內容。socket

（4）當您發送消息給WebSokectclient時，服務端引擎會本身主動將該消息封裝成WebSokect數據幀。而後再發送出去。佈局

　　咱們在 StriveEngine 中實現了對上述WebSocket的透明化支持，至於詳細怎樣實現的。你們可以參考一下WebSokect的標準協議。post

下面咱們就來作一個Demo，讓.NET Socketclient和WebSocketclient能同一時候與一個StriveEngine服務端進行雙向通訊。字體

二.打通B/S與C/S的Demo 準備

　　基於WebSokect，咱們在絕大多數狀況下，使用的都是文本消息，OK，那咱們就基於文本消息來構建這個Demo。this

（1）儘管WebSokect可以藉助其HTML5協議來本身主動完畢一個消息的獨立識別，但是對於咱們的普通socket來講。必須有一個方法來識別一個完整的消息。

（2）常常使用的方法是使用特殊的消息結束標識符，那在這個demo中。咱們就以'\0'做爲消息的結束符吧。

（3）基於（2），那麼WebSokect在發送消息給服務端時。也必須在消息結尾加上'\0'。

三.Demo實現

　　咱們先看看Demo執行起來的效果：

　　在Demo中。WebSocketclient和.NET Socketclient都可以與同一個服務端進行互通消息。

1.源代碼結構說明

　　該Demo源代碼總共包含三個項目和一個HTML文件：

（1）StriveEngine.SimpleDemoServer：基於StriveEngine開發的服務端。

（2）StriveEngine.SimpleDemoClient：基於StriveEngine開發的client。

（3）StriveEngine.SimpleDemo：直接基於.NET的Socket開發的client。

（4）WebSocketClient.html：基於HTML5 WebSocket的client。

與前兩種client公用同一個StriveEngine服務端。

　　接下來，咱們着重看一下WebSocketclient實現，其餘的.NET代碼。你們直接去看Demo源代碼就行了。

2.WebSocketclient實現

（1）HTML 頁面佈局

<body>
    <h3>WebSocketTest</h3>
    <div id="login">
        <div>
            <input id="serverIP" type="text" placeholder="服務器IP" value="127.0.0.1" autofocus="autofocus" />
            <input id="serverPort" type="text" placeholder="服務器端口" value="9000" />
            <input id="btnConnect" type="button" value="鏈接" onclick="connect()" />
        </div>
        <div>
            <input id="sendText" type="text" placeholder="發送文本" value="I'm WebSocket Client!" />
            <input id="btnSend" type="button" value="發送" onclick="send()" />
        </div>
        <div>
            <div> 來自服務端的消息 </div>
            <textarea id="txtContent" cols="50" rows="10" readonly="readonly"></textarea>
        </div>
    </div>
</body>

（2）js方法實現

<script>
        var socket; function connect() { var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/" socket = new WebSocket(host); try { socket.onopen = function (msg) { $("btnConnect").disabled = true; alert("鏈接成功！
"); }; socket.onmessage = function (msg) { if (typeof msg.data == "string") { displayContent(msg.data); } else { alert("非文本消息"); } }; socket.onclose = function (msg) { alert("socket closed!") }; } catch (ex) { log(ex); } } function send() { var msg = $("sendText").value + '\0' socket.send(msg); } window.onbeforeunload = function () { try { socket.close(); socket = null; } catch (ex) { } }; function $(id) { return document.getElementById(id); } Date.prototype.Format = function (fmt) { //author: meizz  var o = { "M+": this.getMonth() + 1, //月份  "d+": this.getDate(), //日  "h+": this.getHours(), //小時  "m+": this.getMinutes(), //分  "s+": this.getSeconds(), //秒  "q+": Math.floor((this.getMonth() + 3) / 3), //季度  "S": this.getMilliseconds() //毫秒   }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
 (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } function displayContent(msg) { $("txtContent").value += "\r\n" +new Date().Format("yyyy/MM/dd hh:mm:ss")+ ": " + msg; } function onkey(event) { if (event.keyCode == 13) { send(); } } </script>