打通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>

　　js代码中的重点都经过红色字体标记出来了，要特别注意。send方法在发送消息时，会本身主动在消息的末尾加入一个咱们约定好的结束符'\0'。

四.源代码下载

　　打通BS与CS的Demo源代码

　假设有不论什么建议或问题。请留言给我。