[C#]WebSocket客户端+服务端轻松实现
[C#] WebSocket 客户端+服务端轻松实现
l
　随着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数据帧，然后再发送出去。
  我们在中实现了对上述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() {
function connect() {
var host = "ws://" + $("serverIP").value + ":" + $("serverPort").value + "/"
socket = new WebSocket(host);
try {
$("btnConnect").disabled = true;
alert("连接成功！");
};
websocket和socket
if (typeof msg.data == "string") {
displayContent(msg.data);
}
else {
alert("⾮⽂本消息");
}
};
}
catch (ex) {
log(ex);
}
}
function send() {
var msg = $("sendText").value + '\0'
socket.send(msg);
}
try {
socket.close();
socket = null;
}
catch (ex) {
}
};
function $(id) { ElementById(id); }
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": Month() + 1, //⽉份
"d+": Date(), //⽇
"h+": Hours(), //⼩时
"m+": Minutes(), //分
"s+": Seconds(), //秒
"q+": Math.floor((Month() + 3) / 3), //季度
"S": Milliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = place(RegExp.$1, (FullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = place(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'。
四.源码下载
  如果有任何建议或问题，请留⾔给我。
附相关系列：
另附：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。