前面有篇文章講了 springboot整合websocket 推送 ，所以有了websocket介面，但前端如何接入這種長連線介面呢，這裡簡單的說下在vue中的用法。

可以把整個websocket放在一個方法中，在created的時候去呼叫該方法，具體程式碼如下：

webSocket () {
      let ws = new WebSocket('ws://localhost:8080/webSocket')
      ws.onopen = () => {
        // Web Socket 已連線上，使用 send() 方法傳送資料
        // ws.send('Holle')
        console.log('socket連線中...')
        this.ws = ws //這裡將socket物件存在data中，以便在其他function中呼叫傳送資料
      }
      ws.onmessage = evt => {
        console.log(evt.data)
      }
      ws.onclose = function () {
        // 關閉 websocket
        console.log('連線已關閉...')
      }
      // 路由跳轉時結束websocket連結
      this.$router.afterEach(function () {
        ws.close()
      })
    }
 

以上方法即可使用websocket，注意 this.ws = ws 

如果要在其他方法使用socket傳送資料，就需要在onopen的時候把初始化好的物件存起來。如何通過 this.ws.send() 即可傳送資料到服務端