热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

打通B/S与C/S!让HTML5WebSocket与.NETSocket公用同一个服务端!

随着HTML5WebSocket技术的日益成熟与普及,我们能够借助WebSocket来更加方便地打通BS与CS--由于BS中的WebSocket能够直接连接到CS的服务端,并进行双向通信。例如以下图所看到的:一.对SocketServer的要求我们能够尝试让SocketServer透明地支持WebSocketclient,所谓透明的意思是。服务端开发

随着HTML5 WebSocket技术的日益成熟与普及,我们能够借助WebSocket来更加方便地打通BS与CS -- 由于B/S中的WebSocket能够直接连接到C/S的服务端,并进行双向通信。例如以下图所看到的:

  打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

一.对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执行起来的效果:

      打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

  在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 页面布局

打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
<body>
    <h3>WebSocketTesth3>
    <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>
打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

(2)js方法实现

打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

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

四.源代码下载

  打通BS与CS的Demo源代码

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


推荐阅读
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • PDO MySQL
    PDOMySQL如果文章有成千上万篇,该怎样保存?数据保存有多种方式,比如单机文件、单机数据库(SQLite)、网络数据库(MySQL、MariaDB)等等。根据项目来选择,做We ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 本文介绍了计算机网络的定义和通信流程,包括客户端编译文件、二进制转换、三层路由设备等。同时,还介绍了计算机网络中常用的关键词,如MAC地址和IP地址。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • 本文介绍了在Linux下安装和配置Kafka的方法,包括安装JDK、下载和解压Kafka、配置Kafka的参数,以及配置Kafka的日志目录、服务器IP和日志存放路径等。同时还提供了单机配置部署的方法和zookeeper地址和端口的配置。通过实操成功的案例,帮助读者快速完成Kafka的安装和配置。 ... [详细]
  • 本文详细介绍了如何使用MySQL来显示SQL语句的执行时间,并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法:瓶颈分析、工作负载分析和基于比率的分析。 ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法
    本文介绍了解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法,包括检查location配置是否正确、pass_proxy是否需要加“/”等。同时,还介绍了修改nginx的error.log日志级别为debug,以便查看详细日志信息。 ... [详细]
  • 本文介绍了在iOS开发中使用UITextField实现字符限制的方法,包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法,开发者可以方便地限制UITextField的字符个数和输入规则。 ... [详细]
  • 移动端常用单位——rem的使用方法和注意事项
    本文介绍了移动端常用的单位rem的使用方法和注意事项,包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值,以适应不同设备的屏幕大小。此外,还提到了rem目前在移动端的主流地位。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
author-avatar
仰望天空TL
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有