vue前端后端实现WebScoket 即时通讯和主动断开链接

vue前端后端实现WebScoket 即时通讯和主动断开链接

前端

code.vue

<template>
  <div>
    <div>about2</div>
  </div>
</template>

<script>
export default {
  name: 'About2',
  components: {},
  data() {
    return {
      lockReconnect: false, // 是否允许重新连接
      timeout: 2000, // 心跳间隔
      reTimeout: 1000 * 10, // 重连间隔
      timeoutTimer: null, // 心跳定时器
      reTimeoutTimer: null, // 重连定时器
      webSocket: null
    }
  },
  mounted() {
    this.createWebSocket()
  },
  methods: {
    // 检查心跳包的开始
    heartCheckStart() {
      // 防止定时器重复定义，先清除再定义
      if (this.timeoutTimer) {
        clearTimeout(this.timeoutTimer)
        this.timeoutTimer = null
      }
      this.timeoutTimer = setTimeout(() => {
        try {
          this.webSocket.send('heartBeat')
        } catch {
          if (this.timeoutTimer) {
            clearTimeout(this.timeoutTimer)
            this.timeoutTimer = null
          }
        }
      }, this.timeout)
    },
    // 重置心跳包
    heartCheckReset() {
      clearTimeout(this.timeoutTimer)
      this.timeoutTimer = null
      this.heartCheckStart()
    },
    // 创建WebSocket
    createWebSocket() {
      // 建立webSoctket通道
      if (window && 'WebSocket' in window) {
        this.webSocket = new WebSocket('ws://localhost:5002')
        // this.webSocket = new WebSocket(`ws://${url}`);
      }
      // 链接成功 - 发送心跳包
      this.webSocket.onopen = () => {
        this.heartCheckStart()
      }
      // 链接失败的时候 重新链接
      this.webSocket.onerror = () => {
        this.reConnect()
      }
      // 链接成功后 - 拿到相应数据
      this.webSocket.onmessage = (event) => {
        console.log('响应数据-event', event.data)
        // // 数据加载进度条 100 主动断开webscoket
        if (JSON.parse(event.data) instanceof Object && JSON.parse(event.data).code === 0) {
          // console.log('关闭webscoket')
          this.webSocket.close()
          this.lockReconnect = false // 设置不可重连
          return
        } else {
          this.heartCheckReset()
        }
      }
      this.webSocket.onclose = (event) => {
        // console.log('连接已关闭...', event, 'event.code', event.code)
        if (event.code === 1005) return // code为1005时，主动断开连接，不再重连
        this.reConnect()
      }
    },
    // 重连
    reConnect() {
      if (this.lockReconnect) {
        return
      }
      this.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      this.reTimeoutTimer && clearTimeout(this.reTimeoutTimer)
      this.reTimeoutTimer = setTimeout(() => {
        this.createWebSocket()
        this.lockReconnect = false
      }, this.reTimeout)
    }
  }
}
</script>
<style lang="scss" scoped></style>

效果

后端

• 创建一个 demo文件夹
  • npm init
  • yarn ad ws
• 运行脚本
  • node index.js

index.js

const WebScoket = require("ws");

const ws = new WebScoket.Server({
  port: 5002,
});
ws.on('connection',ws=>{
  console.log("server-connection");
  let progress = 0;
  let code = 200
  ws.on("message",msg=>{
    console.log("服务器接受的消息：",msg);
    setTimeout(()=>{
      progress += 20
    },500)
    console.log("progress", progress);
    if ( progress > 100 ) {
      code = 0 
    }
    let data = {
      code : code,
      data:[1,2,3],
      progress: progress,
    }
    // ws.send('HeartBeat--111')
    ws.send(JSON.stringify(data))
  })
  ws.send('链接已建立')
})