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() // 連接建立失敗重連
    }
  }

 

 

復制粘貼即可使用

 

                

 

   歡迎掃碼加群，一起討論，共同學習成長！