关于Websocket的两次实践（Vue项目实现在线聊天&Angular项目首页实时推送图表数据）

摘要：该文章记录了我使用websocket的两次实践经历，在第一次实践过程中，踩了很多坑。第二次实践，可谓得心应手，但是很多理论性还很欠缺。通过该文章，从理论到实践，一举全部拿下。

目录

一、Websocket理论

（1）Websocket是什么？

（2）Websocket出现的背景？

（3）采用该协议的优势？

（4）握手协议

（5）Websocket和Socket的区别？

（6）关于socket.io

二、Vue实现在线聊天（实践与踩坑）

三、Angular项目首页实时推送图表数据

---

一、Websocket理论

https://juejin.cn/post/6844903478045704200这篇文章介绍的很详细。

（1）Websocket是什么？

Websocket是一种网络通信协议，是一种在单个TCP连接上的全双工通信协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

全双工通信：又称为双向同时通信，即通信的双方可以同时发送和接收信息的信息交互方式。

关于通信协议的分类，该文章图文并茂，介绍很详细：https://blog.csdn.net/Dingjiawang6/article/details/81093518

（2）Websocket出现的背景？

很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

（3）采用该协议的优势？

• 较少的控制开销。在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小。在不包含扩展的情况下，对于服务器到客户端的内容，此头部大小只有2至10字节（和数据包长度有关）；对于客户端到服务器的内容，此头部还需要加上额外的4字节的掩码。相对于HTTP请求每次都要携带完整的头部，此项开销显著减少了。

• 更强的实时性。由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少；即使是和Comet等类似的长轮询比较，其也能在短时间内更多次地传递数据。

• 保持连接状态。与HTTP不同的是，Websocket需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息。而HTTP请求可能需要在每个请求都携带状态信息（如身份认证等）。

• 更好的二进制支持。Websocket定义了二进制帧，相对HTTP，可以更轻松地处理二进制内容。

• 可以支持扩展。Websocket定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持