一、概念和理论理解

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

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
let yuv =[1,2,3,4,5,6,7,8];
let yuvBuffer = new Uint8Array(yuv);
wss.on('connection', function (ws) {console.log('client connected');ws.on('message', function (message) {console.log( "server Received Message: " + message);ws.send(yuvBuffer);   });
});

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head><script>var ws = new WebSocket("ws://localhost:8181");ws.binaryType = "arraybuffer";//arraybufferws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!");//"Hello WebSockets!"};ws.onmessage = function(evt) {console.log( "Received Data: " + new Uint8Array(evt.data));//ws.close();};ws.onclose = function(evt) {console.log("Connection closed.");};      function sendMessage() {var txt = document.getElementById("message").value;ws.send(txt);}function writeObj(obj){ var description = ""; for(var i in obj){ var property=obj[i]; description+=i+" = "+property+"\n"; } console.log(description); }</script>
</head><body ><div class="vertical-center"><div class="container"><p>&nbsp;</p><form role="form" id="chat_form" onsubmit="sendMessage(); return false;"><div class="form-group"><input class="form-control" type="text" name="message" id="message"placeholder="Type text to echo in here" value="" /></div><button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">Send!</button></form></div></div>
</body>
</html>

3、运行结果

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

node server.js

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

三、参考网站

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

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

springboot实现SSE服务端主动向客户端推送数据，java服务端向客户端推送数据，kotlin模拟客户端向服务端推送数据
SSE服务端推送服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE).本文介绍它的用法. 在很多业务场景中,会涉及到服务端向客户端 ...
ssm配置socket_ssm框架中集成websocket实现服务端主动向客户端发送消息
找了很多配置文档及实例说明,也还是没能成功,最终在csdn博客中发现了基于stomp的消息推送的文章, 下面整理自csdn博客,https://blog.csdn.net/u013627689/art ...
android java websocket client_websocket服务端，android客户端示例
服务端库依赖详见章末 #####spring websocket服务端代码(会话过程) public class HandshakeInterceptor extends HttpSessionHan ...
基于springboot的websocket服务端和客户端demo（简单易上手）
jdk 1.8 1.导入maven依赖  <dependency><groupId>org.springframewo ...
java服务端与Android客户端使用 websocket 通信
最近因为项目需要所以得使用 websocket 来进行服务器与客户端的通信.使用java 来实现服务端,Android 实现客户端. 刚开始服务端使用 @ServerEndPoint 注解来实现 We ...
Qt WebSocket服务端的简单Demo
WebSocket服务端:QWebSocketServer 目录 WebSocket服务端:QWebSocketServer **背景**: **QWebSocketServer 简单使用介绍:** ...
python 3.5.2页面_Python 3.5.2实现websocket服务端
最近由于一个项目需要,写了一个简易的websocket服务端程序,其间也参考了网上的很多资料,我将用接下来的几个篇幅说明是怎么实现的,及遇到的一系列埂. 参考 (包括且不限于如下地址) 涉及到的模块 ...
Qt文档阅读笔记-构造WebSocket服务端
目录基本概念代码与实例程序打包下载基本概念因为周末搞了个Spring Boot的,但是想想,这个websocket只是一个协议而已,C++应该也能搞,在此就搞了这篇博文,这里主要是用Qt,写 ...
python websocket server模块_Python 3.5.2实现websocket服务端（四）： WebSocketServer类实现...
#删除连接,从集合中删除连接对象item def deleteconnection(item): global connectionlist del connectionlist['connectio ...

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