Demo源碼放送：打通B/S與C/S ！讓HTML5 WebSocket與.NET Socket公用同一個服務端！

時間 2019-11-14

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

原文原文鏈接

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

一.對Socket Server的要求

　　咱們能夠嘗試讓Socket Server透明地支持WebSocket客戶端，所謂透明的意思是，服務端開發人員不用關心客戶端到底是什麼類型，而是能夠統一的接收數據、處理數據、發送數據。爲了作到這一點，咱們能夠構建一個服務端框架，讓框架完成透明化的工做，這就要求這個框架作到如下幾點：web

（1）根據客戶端TCP鏈接請求成功後的第一個消息中是否含有「websocket」標記，來判斷其是否爲WebSocket客戶端。若是客戶端的類型是WebSocket，則自動完成如下事情。服務器

（2）自動完成Web Sokects 握手協議。websocket

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

（4）當您發送消息給WebSokect客戶端時，服務端引擎會自動將該消息封裝成WebSokect數據幀，而後再發送出去。框架

　　咱們在StriveEngine中實現了對上述WebSocket的透明化支持，至於具體如何實現的，你們能夠參考一下WebSokect的標準協議。下面咱們就來作一個Demo，讓.NET Socket客戶端和WebSocket客戶端能同時與一個StriveEngine服務端進行雙向通訊。socket

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

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

（1）雖然WebSokect能夠藉助其HTML5協議來自動完成一個消息的獨立識別，可是對於咱們的普通socket來講，必須有一個方法來識別一個完整的消息。字體

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

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

三.Demo實現

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

　　在Demo中，WebSocket客戶端和.NET Socket客戶端均可以與同一個服務端進行互通消息。

1.源碼結構說明

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

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

（2）StriveEngine.SimpleDemoClient：基於StriveEngine開發的客戶端。

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

（4）WebSocketClient.html：基於HTML5 WebSocket的客戶端。與前兩種客戶端公用同一個StriveEngine服務端。

　　接下來，咱們着重看一下WebSocket客戶端實現，其它的.NET代碼，你們直接去看Demo源碼就行了。

2.WebSocket客戶端實現

（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>