WebSocket实战详解【Springboot+Vue+sockjs+webstomp】

WebScoket是什么？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。(来自百度百科) 也就是说，WebSocket使得浏览器和服务器可以主动发送给对方。

同样是基于TCP连接，与以往的HTTP的协议不同，HTTP采用请求/响应模式，三次握手建立一次连接，只能由客户端发给服务端。而WebSocket只通过一次握手，建立一个持久的连接，客户端和服务端都可以主动发消息，更实时的通讯。

一次握手建立WebSocket连接

浏览器先向服务器发送个url以ws://开头的http的GET请求，服务器根据请求头中Upgrade:websocket把客户端的请求切换到对应的协议，即websocket协议。

同时，响应头中也包含了内容Upgrade:websocket，表示升级成WebSocket协议。

响应101，握手成功，http协议切换成websocket协议了，连接建立成功，浏览器和服务器可以随时主动发送消息给对方了，并且这个连接一直持续到客户端或服务器一方主动关闭连接。

具体的WebSocket到底跟Socket、HTTP的关系与区别，请移步我的另一篇博客《常见网络协议知识集》：

https://blog.csdn.net/qq_38345296/article/details/104043710

WebSocket客户端实现 (SockJS+Stomp)

由于WebSocket是一个相对比较新的规范，在Web浏览器和应用服务器上没有得到一致的支持。所以我们需要一种WebSocket的备选方案。而这恰恰是SockJS所擅长的。

SockJS是WebSocket技术的一种模拟，在表面上，它尽可能对应WebSocket API，但是在底层非常智能。如果WebSocket技术不可用的话，就会选择另外的通信方式。

为什么使用Stomp?

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。如果只使用WebSocket的API，发送的内容可以是文本或者是二进制，但没有规范的定义，也不可以添加请求头，做连接认证。所以使用Stomp。

STOMP在WebSocket之上提供了一个基于帧的线路格式层，用来定义消息的语义。STOMP帧由命令、一个或多个头信息以及负载所组成。例如如下就是发送数据的一个STOMP帧：

>>> SEND
destination:/app/marco
content-length:20

{"message":"Maeco!"}

在这个简单的样例中，STOMP命令是SEND，表明会发送一些内容。紧接着是两个头信息：一个用来表示消息要发送到哪里的目的地，另外一个则包含了负载的大小。然后，紧接着是一个空行，STOMP帧的最后是负载内容。
STOMP帧中最有意思的是destination头信息了。它表明STOMP是一个消息协议。消息会发布到某个目的地，这个目的地实际上可能真的有消息代理作为支撑。另一方面，消息处理器也可以监听这些目的地，