vue中的websocket使用

一、WebSocket 簡介

http請求是前端和後端的最常見的互動模式：前端發資料請求，從後端拿到資料後展示到頁面中。http協定也有一個最大的缺陷，就是後端沒有主動權，不能主動向前端推送資料。 ​ 一種新的通信協定應運而生 WebSocket，它最大的特點就是服務端可以主動向用戶端推送消息，用戶端也可以主動向服務端發送消息，實作了真正的平等。

WebSocket 的其他特點：

​ 1.建立在 TCP 協定之上，伺服器端的實作比較容易； ​ 2.與 HTTP 協定有着良好的相容性； ​ 3.預設端口也是80和443，并且握手階段采用 HTTP 協定，是以握手時不容易屏蔽，能通過各種 HTTP 代理伺服器。 ​ 4,。資料格式比較輕量，性能開銷小，通信高效； ​ 5.可以發送文本，也可以發送二進制資料； ​ 6.沒有同源限制，用戶端可以與任意伺服器通信； ​ 7.協定辨別符是ws（如果加密，則為wss），伺服器網址就是 URL；

二、vue中的websocket使用

2.1 vue中使用 WebSocket 注意項

1. 判斷浏覽器是否支援 WebSocket的協定和通路；
2. 建立連接配接和斷開連接配接的控制，在元件加載的時候 連接配接websocket，在元件銷毀的時候 斷開websocket；
3. 伺服器後端支援，後端接口需要引入 socket 子產品，否則不能實作連接配接；

2.2 vue-socket.io安裝和使用

簡介

​ 我在vue中使用的vue-socket.io庫，vue-socket.io 其實是在 socket.io-client 基礎上做了一層封裝，将 $socket 挂載到 vue 執行個體上，同時可使用 sockets 對象輕松實作元件化的事件監聽，在 vue 項目中使用起來更友善。

安裝：

npm i vue-socket.io           

引入：

// main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(
  new VueSocketIO({
    // 生産環境建議關閉，開發環境打開(在控制台看到socket連接配接和事件監聽的資訊)
    debug: true, 
    connection:'http://metinseylan.com:1992',
    options:{
      // 建立時是否自動連接配接 我們這裡設定為false,在指定頁面再開啟
      autoConnect: false,
      // 路徑(預設值：/socket.io/) 
      path: "/my-app/",
      // 目前有兩種傳輸方式：HTTP long-polling（可簡稱：polling）、WebSocket
      transports: ['polling'],
      // 附加請求頭（在伺服器端的 socket.handshake.headers 對象中找到）
      extraHeaders:{},
    },
    vuex: {
      store,
      actionPrefix: 'SOCKET_',// vuex action 字首
      mutationPrefix: 'SOCKET_', // vuex mutation 字首
    },
  })
)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')           

常見參數	類型	預設值	是否必選	描述
debug	Boolean	false	可選擇	為調試啟用日志記錄
connection	String / Socket.io-client	null	必要	Websocket 伺服器 url 或 socket.io-client 執行個體
vuex.store	Vuex	null	可選擇	Vuex store 執行個體
vuex.actionPrefix	String	null	可選擇	發出伺服器端 vuex 操作的字首
vuex.mutationPrefix	String	null	可選擇	發出伺服器端 vuex 突變的字首

元件内使用

<template>
  <div class="wrap">
    <button @click="socketEmit">連接配接Socket</button>
    <button @click="socketSendmsg">發送資料</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      randomId:null,
    }
  },
  methods:{
    //連接配接socket伺服器
    socketEmit(){
      // 打開socket連接配接
      this.$socket.open();
      // 訂閱事件，testCall 是與後端約定好的名稱
      this.sockets.subscribe('demoCall', (res) => {
        if(res.code == 200 && res.randomId === this.randomId){
          console.log('召喚成功')

        }
      })
    },
    // 發送測試消息
    socketSendmsg(){
      this.userid = Math.random();
      // testCall 是與後端約定好的名稱
      this.$socket.emit('demoCall', { 
        "userid": this.userid,
        "deviceId": "123456"
      });
    },
  },
  sockets: {
    connect: function () {
      console.log('連接配接成功')
    },
    disconnect: function () {
      console.log('斷開連接配接')
    },
    reconnect: function () {
      console.log('重新連接配接')
    },
  },
  beforeDestroy(){
    // 關閉 Socket
    this.sockets.unsubscribe('demoCall'); 
    this.$socket.close();
  },
}
</script>           

簡單記錄vue的vue-socket.io使用過程，希望對需要的各位有所幫助。