標籤:minutes function socket 是什麼 通過 else 串連 rpo tns
隨著HTML5 WebSocket技術的日益成熟與普及,我們可以藉助WebSocket來更加方便地打通BS與CS -- 因為B/S中的WebSocket可以直接連接到C/S的服務端,並進行雙向通訊。如所示:
一.對Socket Server的要求
我們可以嘗試讓Socket Server透明地支援WebSocket用戶端,所謂透明的意思是,服務端開發人員不用關心用戶端究竟是什麼類型,而是可以統一的接收資料、處理資料、發送資料。為了做到這一點,我們可以構建一個服務端架構,讓架構完成透明化的工作,這就要求這個架構做到以下幾點:
(1)根據用戶端TCP串連請求成功後的第一個訊息中是否含有“websocket”標記,來判斷其是否為WebSocket用戶端。如果用戶端的類型是WebSocket,則自動完成以下事情。
(2)自動完成Web Sokects 握手協議。
(3)針對接收到的每個WebSokect資料幀,都能自動將其解析,並從中分離出真正的訊息內容。
(4)當您發送訊息給WebSokect用戶端時,服務端引擎會自動將該訊息封裝成WebSokect資料幀,然後再發送出去。
我們在StriveEngine中實現了對上述WebSocket的透明化支援,至於具體如何?的,大家可以參考一下WebSokect的標準協議。下面我們就來做一個Demo,讓.NET Socket用戶端和WebSocket用戶端能同時與一個StriveEngine服務端進行雙向通訊。
二.打通B/S與C/S的Demo 準備
基於WebSokect,我們在絕大多數情況下,使用的都是簡訊,OK,那我們就基於簡訊來構建這個Demo。
(1)雖然WebSokect可以藉助其HTML5協議來自動完成一個訊息的獨立識別,但是對於我們的普通socket來說,必須有一個方法來識別一個完整的訊息。
(2)常用的方法是使用特殊的訊息結束標識符,那在這個demo中,我們就以‘\0‘作為訊息的結束符吧。
(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>
js代碼中的重點都通過紅色字型標記出來了,要特別注意,send方法在發送訊息時,會自動在訊息的末尾添加一個我們約定好的結束符‘\0‘。
四.源碼下載
打通BS與CS的Demo源碼
如果有任何建議或問題,請留言給我。
附相關係列:文本協議通訊demo源碼及說明文檔
二進位協議通訊demo源碼及說明文檔
另附:簡單即時通訊Demo源碼及說明
Demo源碼放送:打通B/S與C/S !讓HTML5 WebSocket與.NET Socket公用同一個服務端!