websocket使用（vue）

joshinrai發表於2019-07-17
WebVue

基於webSocket通訊的庫主要有 socket.io，SockJS

關於SockJS的使用

先安裝 sockjs-client 和 stompjs

npm install sockjs-client
npm install stompjs

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';

export default {
    data () {
        return {
            
        }
    },
    methods: {
        // ws連線
        initWebsockt () {
          this.connection()
          // 斷開重連，嘗試傳送訊息
          this.socketTimer = setInterval(() => {
            try {
              this.stompClient.send('msg')
            } catch (err) {
              console.log('websocket 請求斷開了:', err)
              this.connection()
            }
          }, 5000)
        },
        connection () {
          // 建立連線
          let socket = new SockJS('http://172.16.40.154:9000/messageWarning-websocket')
          // 獲取stomp子協議的客戶端物件
          this.stompClient = Stomp.over(socket)
          let headers = { Authorization:'' }
          // 傳送websocket連線
          this.stompClient.connect(headers,(frame) => {
            console.log('frame is:', frame)
            // 訂閱服務
            this.stompClient.subscribe('/topic/messageWarning', (msg) => {
              console.log('廣播成功')
              console.log(msg);  // msg.body存放的是服務端傳送給我們的資訊
            },headers)
          }, (err) => {
              // 連線發生錯誤時的處理函式
              console.log('失敗')
              console.log(err);
          });
        },
        disconnect () {
          if (this.stompClient) {
            this.stompClient.disconnect()
          }
        }
    }
    beforeDestroy () {
        this.disconnect()
        clearInterval(this.socketTimer)
    }
}
複製程式碼

sockjs-client

sockjs-client是從SockJS中分離出來的用於客戶端使用的通訊模組.所以我們就直接來看看SockJS. SockJS是一個瀏覽器的JavaScript庫,它提供了一個類似於網路的物件,SockJS提供了一個連貫的,跨瀏覽器的JavaScriptAPI,它在瀏覽器和Web伺服器之間建立了一個低延遲,全雙工,跨域通訊通道. 你可能會問,我為什麼不直接用原生的WebSocket而要使用SockJS呢?這得益於SockJS的一大特性,一些瀏覽器中缺少對WebSocket的支援,因此，回退選項是必要的，而Spring框架提供了基於SockJS協議的透明的回退選項。SockJS提供了瀏覽器相容性,優先使用原生的WebSocket,如果某個瀏覽器不支援WebSocket,SockJS會自動降級為輪詢.
複製程式碼

stomjs

STOMP(Simple Text-Orientated Messaging Protocol) 面向訊息的簡單文字協議;
WebSocket是一個訊息架構,不強制使用任何特定的訊息協議,它依賴於應用層解釋訊息的含義.
與HTTP不同,WebSocket是處在TCP上非常薄的一層,會將位元組流轉化為文字/二進位制訊息,因此,對於實際應用來說,WebSocket的通訊形式層級過低,因此，可以在 WebSocket 之上使用STOMP協議，來為瀏覽器 和 server間的 通訊增加適當的訊息語義。
複製程式碼

STOMP與WebSocket 的關係:

HTTP協議解決了web瀏覽器發起請求以及web伺服器響應請求的細節,假設HTTP協議不存在,只能使用TCP套接字來編寫web應用,你可能認為這是一件瘋狂的事情;
直接使用WebSocket(SockJS)就很類似於使用TCP套接字來編寫web應用,因為沒有高層協議,就需要我們定義應用間傳送訊息的語義,還需要確保連線的兩端都能遵循這些語義;
同HTTP在TCP套接字上新增請求-響應模型層一樣,STOMP在WebSocket之上提供了一個基於幀的線路格式層,用來定義訊息語義.
複製程式碼

碰到的問題

  • stomp.js:463 WebSocket connection to 'wss://${backend}/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

    解決方案：修改nginx配置
部分參考 https://segmentfault.com/a/1190000018712908
複製程式碼

  • websocket Whoops! Lost connection to 'schema://${backend}/websocket'

    後端新增jar包
https://blog.csdn.net/AaronChen01/article/details/80019294
複製程式碼

相關文章