websocket断线重连(vue)

·  阅读 1621

最近工作上面刚好遇到大屏数据需要实时展示,研究了下websocket,在这边备份记录下,通过SockJS实现实时通信功能,以方便下次直接ctrl+c、ctrl+v哈哈

  • 第一步就是项目中先安装websocket吧 怎么安装就不用教了吧 键盘直接梭哈

    npm install sockjs-client

    npm install stompjs

    关于为啥是sockjs-client、stompjs,我下面会给你解释,别急。

  • 梭哈完了就是在用的地方导入下,继续梭哈

    import SockJS from 'sockjs-client'

    import Stomp from 'stompjs'

    initWebSocket () {
      this.personList = []
      // 建立连接对象
      let socket = new SockJS('xxxxxx地址xxxxxx')
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket)
      this.stompClient.debug = null //    去掉websocket日志
      // 向服务器发起websocket连接
      this.stompClient.connect(this.headers, () => {
        // // console.log(new Date())
        this.stompClient.subscribe('/user/topic/news', (res) => { // 订阅服务端提供的某个topic
          // // console.log(new Date())
          let response = JSON.parse(res.body)
          if (response.code === 200) {
            if (response.data && response.data.actionName === 'home.getData') { // 获取统计数据
              this.getSum = response.data
          } else {
            // console.log('获取失败')
            console.log(response.msg)
          }
        }, this.headers)
        this.stompClient.send('/app/home.getData', this.headers)
      }, (err) => {
        // 连接发生错误时的处理函数
        // console.log('失败')
        console.log(err)
        this.initWebSocket() // 重新连接
      })
    },
    disconnect () { // 断开连接
      if (this.stompClient) {
        // console.log('断开连接')
        this.stompClient.disconnect()
      }
    }
复制代码

知识小课堂

sockjs-client、stompjs是做啥的

  • sockjs-client

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

  • stompjs

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之上提供了一个基于帧的线路格式层,用来定义消息语义。

终于写完了,写技术文档比敲代码难多了。。。。。

看着这里的盆友们,还能帮我点个赞鼓励一下,以后多多为技术博客添砖加瓦

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改