使用 websocket 发送请求

一、

data() {
    return {
        path: 'ws://localhost:7771',
        ws: {}
    }
}，
created() {
    this.init()
},
destroyed() {
    // 离开路由之后断开 websocket 连接
    this.ws.close()
},
methods: {
    //init函数可在页面加载的时候就进行初始化或者根据自己的业务需求在需要打开通讯的时候在进行初始化
    init() {
    // 实例化socket，这里的实例化直接赋值给this.ws是为了后面可以在其它的函数中也能调用websocket方法，例如：this.ws.close(); 完成通信后关闭WebSocket连接
      this.ws = new WebSocket(this.path)
      // 监听是否连接成功
      this.ws.onopen = () => {
        console.log('ws连接状态：' + this.ws.readyState, '连接成功!')
        // 连接成功则发送一个数据
        this.ws.send('连接成功')
      }
      // 接听服务器发回的信息并处理展示
      this.ws.onmessage = (data) => {
        console.log('接收到来自服务器的消息：', data)
      }
      // 监听连接关闭事件
      this.ws.onclose = () => {
        // 监听整个过程中websocket的状态
        console.log('ws连接状态：' + this.ws.readyState, '关闭!')
      }
      // 监听并处理error事件
      this.ws.onerror = function(error) {
        console.log(error, '错误!')
      }
    }
}

二、

data() {
    return {
        websock: null
    }
}，
beforeMount() {
    this.initWebSocket()
},
destroyed() {
    // 离开路由之后断开 websocket 连接
    this.websock.close()
},
methods: {
    // 初始化weosocket
    initWebSocket() {
      if (typeof (WebSocket) === 'undefined') {
        console.log('您的浏览器不支持WebSocket')
      } else {
        const wsurl = 'ws://localhost:7771'
        // 实例化 WebSocket
        this.websock = new WebSocket(wsurl)
        // 监听 WebSocket 连接
        this.websock.onopen = this.websocketonopen
        // 监听 WebSocket 错误信息
        this.websock.onerror = this.websocketonerror
        // 监听 WebSocket 消息
        this.websock.onmessage = this.websocketonmessage
        this.websock.onclose = this.websocketclose
      }
    },
    // 连接建立之后执行send方法发送数据
    websocketonopen() {
      console.log('socket连接成功')
      const actions = { test: '12345' }
      this.websocketsend(JSON.stringify(actions))
    },
    // 连接建立失败重连
    websocketonerror() {
      console.log('连接错误')
      this.initWebSocket()
    },
    // 数据接收
    websocketonmessage(e) {
      const resdata = JSON.parse(e.data)
      console.log(resdata)
    },
    // 数据发送
    websocketsend(Data) {
      this.websock.send(Data)
    },
    // 关闭
    websocketclose(e) {
      console.log('WebSocket 断开连接', e)
    }
}

三、

data() {
    return {
        paths: 'ws://localhost:7771',
        socket: ''
    }
},
mounted() {
    // 初始化
    this.inits()
},
methods: {
    inits() {
      if (typeof (WebSocket) === 'undefined') {
        alert('3ws您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.paths)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function() {
      console.log('3ws socket连接成功')
    },
    error: function() {
      console.log('3ws 连接错误')
    },
    getMessage: function(msg) {
      console.log(msg.data)
    },
    send: function(params) {
      console.log('send ws3')
      this.socket.send(params)
    },
    close: function() {
      console.log('3ws socket已经关闭')
    }
}

WebSocket刷新断开原因、设计心跳机制防止自动断开连接问题请访问以下链接:

WebSocket刷新断开原因、设计心跳机制防止自动断开连接_秦岭熊猫的博客-CSDN博客_websocket页面刷新会断开连接吗