websocket服务端和html客户端进行二进制数据交互

返回192.168.1.1

最后更新：2022-02-22 23:20:42 手机定位技术交流文章

一、概念和理论理解

1、HTTP

HTTP 是基于请求响应式的，即通信只能由客户端发起，服务端做出响应，无状态，无连接。

无状态：每次连接只处理一个请求，请求结束后断开连接。
无连接：对于事务处理没有记忆能力，服务器不知道客户端是什么状态。

以往实现即时通讯的手段：

轮询：客户端定时向服务器发送 Ajax 请求，服务器接到请求后马上返回响应信息并关闭连接。
长轮询：客户端向服务器发送 Ajax 请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
长连接：在页面里嵌入一个隐蔵 iframe，将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据。
Flash Socket：在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信，JavaScript 在收到服务器端传送的信息后控制页面的显示。

缺点：HTTP 协议通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。

2、WebSocket

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

Websocket使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket协议使用80端口；运行在TLS之上时，默认使用443端口。

3、HTTP和WebSocket协议的关系

相同：

都是一样基于TCP的，都是可靠性传输协议。
都是应用层协议。

不同：

WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息。HTTP是单向的。
WebSocket是需要握手进行建立连接的。

联系：

WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

4、Socket协议

Socket 是操作系统提供的对于传输层（TCP / UDP）抽象的接口，是一个编程概念；而 Websocket 与 HTTP 一样是一个成文的互联网协议。
Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。

5、WebService

WebService是一种跨编程语言和跨操作系统平台的远程调用技术。

跨编程语言和跨操作平台：就是说服务端程序采用java编写，客户端程序则可以采用其他编程语言编写，反之亦然！
跨操作系统平台：则是指服务端程序和客户端程序可以在不同的操作系统上运行。
远程调用：就是一台计算机a上的一个程序可以调用到另外一台计算机b上的一个对象的方法，譬如，银联提供给商场的pos刷卡系统，商场的POS机转账调用的转账方法的代码其实是跑在银行服务器上。再比如，amazon，天气预报系统，淘宝网，校内网，百度等把自己的系统服务以webservice服务的形式暴露出来，让第三方网站和程序可以调用这些服务功能，这样扩展了自己系统的市场占有率，往大的概念上吹，就是所谓的SOA应用。

从表面上看，WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API，把调用这个WebService的应用程序叫做客户端，而把提供这个WebService的应用程序叫做服务端。从深层次看，WebService是建立可互操作的分布式应用程序的新平台，是一个平台，是一套标准。

二、实践步骤

1、安装环境

需安装node和ws

安装过程中若报错

503 service unavailable -GET http://registry.cnpmjs.or

运行以下代码即可：

npm config set registry http://registry.npmjs.org/

2、websocket服务端和html客户端进行二进制数据交互案例

server.js

index.html

3、运行结果

在server.js目录下运行如下代码，即开启了服务：

node server.js

将index.html使用浏览器打开，就可看到结果

三、参考网站

WebSocket 教程 - 阮一峰的网络日志

本文由在线网速测试整理编辑，转载请注明出处。