vue websocket 使用

基于webSocket通信的库主要有 socket.io，SockJS
关于SockJS的使用
先安装 sockjs-client 和 stompjs

npm install sockjs-client
npm install stompjs

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

export default {
    data () {
        return {
            
        }
    },
    methods: {
        // ws连接
        initWebsockt () {
          this.connection()
          // 断开重连，尝试发送消息
          this.socketTimer = setInterval(() => {
            try {
              this.stompClient.send('msg')
            } catch (err) {
              console.log('websocket 请求断开了:', err)
              this.connection()
            }
          }, 5000)
        },
        connection () {
          // 建立连接
          let socket = new SockJS('http://172.16.40.154:9000/messageWarning-websocket')
          // 获取stomp子协议的客户端对象
          this.stompClient = Stomp.over(socket)
          let headers = { Authorization:'' }
          // 发送websocket连接
          this.stompClient.connect(headers,(frame) => {
            console.log('frame is:', frame)
            // 订阅服务
            this.stompClient.subscribe('/topic/messageWarning', (msg) => {
              console.log('广播成功')
              console.log(msg);  // msg.body存放的是服务端发送给我们的信息
            },headers)
          }, (err) => {
              // 连接发生错误时的处理函数
              console.log('失败')
              console.log(err);
          });
        },
        disconnect () {
          if (this.stompClient) {
            this.stompClient.disconnect()
          }
        }
    }
    beforeDestroy () {
        this.disconnect()
        clearInterval(this.socketTimer)
    }
}

sockjs-client

    sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟,全双工,跨域通信通道. 你可能会问,我为什么不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺少对WebSocket的支持,因此，回退选项是必要的，而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket,SockJS会自动降级为轮询.

stomjs

    STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议;
WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义.
与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此，可以在 WebSocket 之上使用STOMP协议，来为浏览器 和 server间的 通信增加适当的消息语义。

STOMP与WebSocket 的关系:

    HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.

碰到的问题

    stomp.js:463 WebSocket connection to 'wss://${backend}/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

    解决方案：修改nginx配置
    部分参考 https://blog.csdn.net/hefeng_aspnet/article/details/142206508

    websocket Whoops! Lost connection to 'schema://${backend}/websocket'
    
    解决方案：后端添加jar包
    https://blog.csdn.net/AaronChen01/article/details/80019294