随着HTML5 WebSocket技術的日益成熟與普及，我們能夠借助WebSocket來更加友善地打通BS與CS -- 由于B/S中的WebSocket能夠直接連接配接到C/S的服務端，并進行雙向通信。例如以下圖所看到的：
一.對Socket Server的要求
我們能夠嘗試讓Socket Server透明地支援WebSocketclient，所謂透明的意思是。服務端開發者不用關心client到底是什麼類型。而是能夠統一的接收資料、處理資料、發送資料。
為了做到這一點，我們能夠建構一個服務端架構，讓架構完畢透明化的工作，這就要求這個架構做到下面幾點：
（1）依據clientTCP連接配接請求成功後的第一個消息中是否含有“websocket”标記，來推斷其是否為WebSocketclient。假設client的類型是WebSocket，則自己主動完畢下面事情。
（2）自己主動完畢Web Sokects 握手協定。
（3）針對接收到的每一個WebSokect資料幀，都能自己主動将其解析，并從中分離出真正的消息内容。
（4）當您發送消息給WebSokectclient時，服務端引擎會自己主動将該消息封裝成WebSokect資料幀。然後再發送出去。
我們在 StriveEngine 中實作了對上述WebSocket的透明化支援，至于詳細怎樣實作的。大家能夠參考一下WebSokect的标準協定。
下面我們就來做一個Demo，讓.NET Socketclient和WebSocketclient能同一時候與一個StriveEngine服務端進行雙向通信。
二.打通B/S與C/S的Demo 準備
基于WebSokect，我們在絕大多數情況下，使用的都是文本消息，OK，那我們就基于文本消息來建構這個Demo。
（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> js代碼中的重點都通過紅色字型标記出來了，要特别注意。send方法在發送消息時，會自己主動在消息的末尾加入一個我們約定好的結束符'\0'。