WebSocket、SockJS、Stomp 实现消息实时通讯功能

WebSocket、SockJS、Stomp 实现消息实时通讯功能

WebSocket

WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议，解决了客户端和服务端之间实时通信问题。客户端和服务器只需完成一次握手，两者之间就可以建立一个持久性的TCP连接，服务端和客户端通过此TCP连接进行双向实时通信。

WebSocket属性

1. Socket.readyState：只读属性readyState表示连接状态
   0： 表示尚未建立连接
   1：表示连接已建立，可以进行通信
   2： 表示连接正在进行关闭
   3：表示连接已经关闭或者连接不能打开

2. Socket.bufferedAmount：只读属性bufferedAmount 已被send()放入队列中，正在等待传输，但是还没有发出的UTF-8文本字节数。

WebSocket方法

1. Socket.send()：使用连接发送数据
2. Socket.close()：关闭连接

WebSocket实例

function webSocket(){
  //判断浏览器是否支持WebSocket
  if("WebSocket" in window){
     //创建WebSocket连接
     const ws = new WebSocket("ws://localhost:8080");
  }
}

WebSocket事件

客户端支持WebSocket的浏览器中，在创建socket后，可以通过onopen、onmessage、onclose和onerror四个事件对socket进行响应。WebSocket的所有操作都是采用事件的方式触发的，这样不会阻塞UI，是的UI有更快的响应时间，有更好的用户体验

   //创建一个WebSocket对象，参数是服务地址
   const ws = new WebSocket("ws://localhost:8080");
   ws.onopen = function(){
　　   //当WebSocket创建成功时，触发onopen事件
       console.log("open");
　　   ws.send("hello"); //将消息发送到服务端
   }
   ws.onmessage = function(e){
　　  //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
　　  console.log(e.data);
   }
    ws.onclose = function(e){
　　   //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
　　   console.log("close");
    }
    ws.onerror = function(e){
　　//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
　　   console.log(error);
    }

SockJS

SockJS是一个JavaScript库，为了应对许多浏览器不支持WebSocket协议的问题，设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API，但如果WebSocket技术不可用的话，会自动降为轮询的方式。
SockJS会优先选择WebSocket进行连接，但是当服务器或客户端不支持WebSocket时，会自动在 XHR流、XDR流、iFrame事件源、iFrame HTML文件、XHR轮询、XDR轮询、iFrame XHR轮询、JSONP轮询 这几个方案中择优进行连接

Stomp(Simple Text/Streaming Orientated Messaging Protocol)

简单(流)文本定向消息协议，提供了一个可互操作的连接格式。允许Stomp客户端与任意stomp消息代理（broker）进行交互。

WebSocket 、SocketJS、Stomp三者之间的关系

WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是底层协议，而 STOMP 是基于
WebSocket（SockJS）的上层协议

直接使用 WebSocket（SockJS） 就很类似于 使用 TCP 套接字来编写 web 应用，因为没有高层协议，就需要我们定义应用间所发送消息的语义，还需要确保连接的两端都能遵循这些语义。
同HTTP在TCP 套接字上添加请求-响应模型层一样，STOMP在WebSocket 之上提供了一个基于帧的线路格式层，用来定义消息语义。