Vue+WebSocket实现客户端与服务端通讯，前端与机器人对接

 因公司突然要求做个机器人客户端，需要与机器人对接，采用了WebSocket技术实现浏览器与服务端进行联调, 前端以WebSocket协议格式发送数据到后台, 后台解析指令并将指令发送到机器人, 机器人的相关相应信息也通过后台使用WebSocket协议封装数据传输给浏览器 

 

  created() {
    this.initWebSocket()
  },
  methods: {
    // 初始化weosocket
    initWebSocket() {
      // ws地址
      const wsuri = 'ws://192.168.20.73:3002/websocket/robot'
      this.websock = new WebSocket(wsuri) // 这里面的this都指向vue
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
      this.websock.onopen = this.websocketopen
      this.websock.onerror = this.websocketerror
    },
    websocketopen() { // 连接建立之后执行send方法发送数据
      console.log('WebSocket连接成功')
      const actions = {
        'ip': this.ip,
        'port': this.port,
        'operate': this.operate
      }
      console.log('发送参数', actions)
      setTimeout(() => {
        this.websocketsend(JSON.stringify(actions))
      }, 500)
    },
    websocketonmessage(e) { // 数据接收
      const redata = JSON.parse(e.data)
      console.log('数据内容：{0}', redata)
    },
    websocketsend(param) { // 数据发送
      console.log('***数据发送**', param)
      try {
        console.log('*****************', this.websock.readyState)
        this.websock.send(param)
      } catch (err) {
        console.log('error', err)
      }
    },
    websocketclose(e) { // 关闭
      console.log('WebSocket连接关闭', e)
    },
    websocketerror() { // 失败
      console.log('WebSocket连接失败')
      this.initWebSocket() // 连接建立失败重连
    }
  }

 

 

复制粘贴即可使用

 

                

 

   欢迎扫码加群，一起讨论，共同学习成长！