本文详述了使用WebSocket进行实时通信的两次实践经验，包括在Vue项目中实现在线聊天功能，以及在Angular项目中实现实时推送图表数据。文中深入探讨了WebSocket的理论知识，如协议优势、握手过程，并对比了WebSocket与Socket的区别。同时，分享了在Vue中连接WebSocket的踩坑经历，如携带token的方式和连接问题。最后，展示了Angular项目的实时数据推送实现。
摘要：该文章记录了我使用websocket的两次实践经历，在第一次实践过程中，踩了很多坑。第二次实践，可谓得心应手，但是很多理论性还很欠缺。通过该文章，从理论到实践，一举全部拿下。
目录
一、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定义了扩展，用户可以扩展协议、实现部分自定义的子协议。如部分浏览器支持压缩等。
-
更好的压缩效果。相对于HTTP
最低0.47元/天 解锁文章
扫一扫
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
