使用 websocket 发送请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用 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页面刷新会断开连接吗文章来源地址https://www.toymoban.com/news/detail-511178.html

到了这里，关于使用 websocket 发送请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！