打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
随着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'。
四.源码下载
如果有任何建议或问题,请留言给我。
引用地址:http://blog.csdn.net/zhuweisky/article/details/39003815
打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!的更多相关文章
- Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- html5 WebSocket 与 PHP socket 聊天室原理
html js <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 【HTML5 WebSocket】WebSocket对象特性和方法
<HTML5 WebSocket权威指南>学习笔记&3 WebSocket方法的对象特性 1. WebSocket方法 a. send方法 send方法用于在WebSocket连接 ...
- 让ie6 7 8 9支持原生html5 websocket
让ie6 7 8 9支持原生html5 websocket 从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...
- HTML5 WebSocket 技术介绍
WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...
- php +html5 websocket 聊天室
针对内容比较长出错,修改后的解码函数 和 加码函数 原文请看上一篇 http://yixun.yxsss.com/yw3104.html function uncode($str,$key){ $ma ...
- C# WebSocket 服务端示例代码 + HTML5客户端示例代码
WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System.Linq; using System. ...
- 使用 HTML5 webSocket API实现即时通讯的功能
project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSock ...
- HTML5 WebSocket和后端C#通信
1.使用 HTML5 开发离线应用 http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ 2.利用html 5 websocket ...
随机推荐
- MySQL基础(二)——DDL语句
MySQL基础(二)--DDL语句 1.什么是DDL语句,以及DDL语句的作用 DDL语句时操作数据库对象的语句,这些操作包括create.drop.alter(创建.删除.修改)数据库对象. 2.基 ...
- activiti学习总结
Activiti界面元素的使用总结 一.图形设计中元素的使用 1.SequenceFlow:连接线,可以连接两个任务,来管理流程实例的流向 -----General -----id:流程的id,用与程 ...
- 2.建立exception包,建立Bank类,类中有变量double balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数,抛出NagativeFundsException,
public class Bank { Double qian=0.0; double newBank(double a) { qian=qian+a; return qian; } double w ...
- HDU 3213 Box Relations(拓扑排序构造)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3231 题意:有n个长方体,四种限制条件.(1)I x y x和y有相交:(2)X/Y/Z x y x ...
- 05_IOC容器装配Bean(注解方式)
IOC容器装配Bean(注解方式) 1.使用注解方式进行Bean注册 xml 方式: <bean id="" class=""> spring2.5 ...
- [SAP ABAP开发技术总结]初始值、空、NULL、INITIAL等问题
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]几个小问题
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Android开发面试经——5.常见面试官提问Android题①
版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客: http://blog.csdn.net/f ...
- hdu5787(数位dp)
基础的数位dp,才发现今天才终于彻底搞懂了数位dp... // // main.cpp // hdu5787.1 // // Created by New_Life on 16/8/10. // Co ...
- 工作流学习——Activiti流程定义管理三步曲 (zhuan)
http://blog.csdn.net/zwk626542417/article/details/46602419 ***************************************** ...