2. 程式人生 > >vue-socket.io使用教程與踩坑記錄

vue-socket.io使用教程與踩坑記錄

阿新 • • 發佈：2019-12-10

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/12018866.html，多謝，=。=~
（如果對你有幫助的話請幫我點個贊啦）

請先允許我狠狠吐個槽：vue-socket.io相關中文部落格實在太少太少，來來去去就那麼幾篇，教程也比較零散，版本也比較老，就算我有暴風式搜尋還是找不到解決問題的方案，然後我怒了，開始看原始碼、寫測試demo、幾乎把相關的issues都看了一遍，折騰1天后終於。。。搞定了，下面總結一下~

前言

vue-socket.io其實是在socket.io-client基礎上做了一層封裝，將$socket掛載到vue例項上，同時你可以使用sockets物件

輕鬆實現元件化的事件監聽，讓你在vue專案中使用起來更方便。我目前用的vue-socket.io:3.0.7，可以在其package.json中看到它依賴於socket.io-client:2.1.1。

我遇到的問題

websocket連線地址是從後端動態獲取，所以導致頁面載入時VueSocketIO例項還未建立，頁面中通過this.$socket.emit發起訂閱報錯，同時無法找到vue例項的sockets物件（寫在內部的事件將無法監聽到，就算後面已經連線成功）

如果你的websocket連線地址是靜態的（寫死的），可以只看使用教程，如果你跟我遇到了同樣的問題，那就跳躍到解決方案

console報錯如下：

使用教程

先拋開可能遇到的問題，按照官網的教程我們走一遍：

安裝

npm install vue-socket.io --save

引入（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({
    debug: true,
    connection: 'http://metinseylan.com:1992',
    vuex: {
        store,
        actionPrefix: 'SOCKET_',
        mutationPrefix: 'SOCKET_'
    },
    options: { path: "/my-app/" } //Optional options
}))

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

  • debug：生產環境建議關閉，開發環境可以開啟，這樣你就可以在控制檯看到socket連線和事件監聽的一些資訊，例如下面這樣：

  • connection：連線地址字首，注意！這裡只有字首，我之前被坑過，因為明明後端有給我返回上下文，但莫名其妙的被去除了，vue-socket.io這裡用到的是socket.io-client的Manager api，關鍵原始碼如下（只看我寫中文備註的部分就好）：

vue-socket.io（index.js）

import SocketIO from "socket.io-client";
export default class VueSocketIO {

    /**
     * lets take all resource
     * @param io
     * @param vuex
     * @param debug
     * @param options
     */
    constructor({connection, vuex, debug, options}){

        Logger.debug = debug;
        this.io = this.connect(connection, options); // 獲取到你設定的引數後就呼叫了connect方法
        this.useConnectionNamespace = (options && options.useConnectionNamespace);
        this.namespaceName = (options && options.namespaceName);
        this.emitter = new Emitter(vuex);
        this.listener = new Listener(this.io, this.emitter);
    }
    /**
   * registering SocketIO instance
   * @param connection
   * @param options
   */
  connect(connection, options) {
    if (connection && typeof connection === "object") {
      Logger.info(`Received socket.io-client instance`);
      return connection;
    } else if (typeof connection === "string") {
      const io = SocketIO(connection, options);// 其實用的是socket.io-client的Manager API
      Logger.info(`Received connection string`);
      return (this.io = io);
    } else {
      throw new Error("Unsupported connection type");
    }
  }

socket.io-client（index.js）

var url = require('./url');
function lookup (uri, opts) {
  if (typeof uri === 'object') {
    opts = uri;
    uri = undefined;
  }

  opts = opts || {};

  var parsed = url(uri); // 通過url.js對connection字首進行擷取
  var source = parsed.source;
  var id = parsed.id;
  var path = parsed.path;
  var sameNamespace = cache[id] && path in cache[id].nsps;
  var newConnection = opts.forceNew || opts['force new connection'] ||
                      false === opts.multiplex || sameNamespace;

  var io;

  if (newConnection) {
    debug('ignoring socket cache for %s', source);
    io = Manager(source, opts);
  } else {
    if (!cache[id]) {
      debug('new io instance for %s', source);
      cache[id] = Manager(source, opts);
    }
    io = cache[id];
  }
  if (parsed.query && !opts.query) {
    opts.query = parsed.query;
  }
  return io.socket(parsed.path, opts);// 實際呼叫的是解析後的字首地址
}
  • options.path： 這裡就可以填websocket連線地址的字尾，如果不填會被預設新增/socket.io，關鍵原始碼如下（只看我寫中文備註的部分就好）：
    其他的options配置可以參見https://socket.io/docs/client-api/#Manager

socket.io-client（manager.js）

function Manager (uri, opts) {
  if (!(this instanceof Manager)) return new Manager(uri, opts);
  if (uri && ('object' === typeof uri)) {
    opts = uri;
    uri = undefined;
  }
  opts = opts || {};

  opts.path = opts.path || '/socket.io'; // 看到沒有，如果你不傳遞options.path引數的話會被預設安一個尾巴"/socket.io"
  this.nsps = {};
  this.subs = [];
  this.opts = opts;
  this.reconnection(opts.reconnection !== false);
  this.reconnectionAttempts(opts.reconnectionAttempts || Infinity);
  this.reconnectionDelay(opts.reconnectionDelay || 1000);
  this.reconnectionDelayMax(opts.reconnectionDelayMax || 5000);
  this.randomizationFactor(opts.randomizationFactor || 0.5);
  this.backoff = new Backoff({
    min: this.reconnectionDelay(),
    max: this.reconnectionDelayMax(),
    jitter: this.randomizationFactor()
  });
  this.timeout(null == opts.timeout ? 20000 : opts.timeout);
  this.readyState = 'closed';
  this.uri = uri;
  this.connecting = [];
  this.lastPing = null;
  this.encoding = false;
  this.packetBuffer = [];
  var _parser = opts.parser || parser;
  this.encoder = new _parser.Encoder();
  this.decoder = new _parser.Decoder();
  this.autoConnect = opts.autoConnect !== false;
  if (this.autoConnect) this.open();
}

  • vuex： 配置後可以在store.js的mutations或者actions監聽到Vue-Socket.io事件（例如：connect、disconnect、reconnect等），這部分目前用得比較少，也挺簡單，如果有疑問可以給我留言我再單獨提供教程。

    使用（Page.vue）

    注意：熟悉socket.io-client的應該知道，預設情況下，websocket在建立例項的時候就會自動發起連線了，所以切記不要在元件中重複發起連線。如果你想自己控制發起連線的時機可以將options.autoConnect設定為false。
export default {
    name: 'Page',
    sockets: {// 通過vue例項物件sockets實現元件中的事件監聽
      connect: function () {// socket的connect事件
        console.log('socket connected from Page')
      },
      STREAM_STATUS(data) {// 後端按主題名推送的訊息資料
          console.log('Page：' + data)
      }
    },
    mounted() {
      console.log('page mounted')
      this.$socket.emit('STREAM_STATUS', { subscribe: true })// 在頁面載入時發起訂閱，“STREAM_STATUS”是你跟後端約定好的主題名
    }
  }

事件除了在sockets物件中預設監聽，你還可以在外部單獨註冊事件監聽或取消註冊：

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');

但這種方式從原始碼上看是不支援引數傳遞的，只支援傳遞事件名及回撥函式（部分原始碼如下）：

vue-Socket.io（mixin.js）

beforeCreate(){
        if(!this.sockets) this.sockets = {};

        if (typeof this.$vueSocketIo === 'object') {
            for (const namespace of Object.keys(this.$vueSocketIo)) {
                this.sockets[namespace] = {
                    subscribe: (event, callback) => {
                        this.$vueSocketIo[namespace].emitter.addListener(event, callback, this);
                    },
                    unsubscribe: (event) => {
                        this.$vueSocketIo[namespace].emitter.removeListener(event, this);
                    }
                }
            }
        } else {
            this.$vueSocketIo.emitter.addListener(event, callback, this);
            this.$vueSocketIo.emitter.removeListener(event, this);
        }
    }

解決方案

針對我上面描述的問題，最大原因就在於獲取socket連線地址是非同步請求，如文章開頭的截圖，page mounted列印時，this.$socket還是undefined。所以我們要做的就是怎麼樣讓頁面載入在VueSocketIO例項建立之後。
我提供兩種解決方案，具體怎麼選擇看你們的需求~

保證拿到socket連線地址後再將vue例項掛載到app

缺點：如果你獲取socket地址的請求失敗了，整個專案的頁面都載入不出來（一般伺服器出現問題才會有這種情況產生）
優點：實現簡單，一小段程式碼挪個位置就好

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ParentApi from '@/api/Parent'
import VueSocketIO from 'vue-socket.io'

/* 使用vue-socket.io */
ParentApi.getSocketUrl().then((res) => {
    Vue.use(new VueSocketIO({
        debug: false,
        connection: res.data.path,
        options: { path: '/my-project/socket.io' }
    }))
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
})

控制檯列印如下圖：


結合connect事件+store+路由守衛實現攔截

原理：非同步請求回撥中建立VueSocketIO例項並監聽connect事件，監聽回撥中修改isSuccessConnect引數的值，在Page頁面路由中增加beforeEnter守衛，利用setInterval週期性判斷isSuccessConnect的值，滿足條件則取消定時執行並路由跳轉。
缺點：實現起來稍微複雜一點
優點：不會影響其他頁面的載入

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ParentApi from '@/api/Parent'
import VueSocketIO from 'vue-socket.io'

ParentApi.getSocketUrl().then((res) => {
  let vueSocketIo = new VueSocketIO({
    debug: false,
    connection: res.data.path,
    options: { path: '/my-project/socket.io' }
  })
  // 監聽connect事件，設定isSuccessConnect為true
  vueSocketIo.io.on('connect', () => {
    console.log('socket connect from main.js')
    store.commit('newIsSuccessConnect', true)
  })
  Vue.use(vueSocketIo)
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // socket連線狀態
    isSuccessConnect: false
  },
  mutations: {
    newIsSuccessConnect(state, value) {
      state.isSuccessConnect = value
    }
  },
  getters: {
    getIsSuccessConnect: state => {
      return state.isSuccessConnect
    }
  },
  actions: {
  }
})
router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/page',
      name: 'Page',
      component: () => import(/* webpackChunkName: "Page" */ './pages/Page.vue'),
      beforeEnter: (to, from, next) => {
        let intervalId = setInterval(() => {
         // 直到store中isSuccessConnect為true時才能進入/page
          if (store.getters.getIsSuccessConnect) {
            clearInterval(intervalId)
            next()
          }
        }, 500)
      }
    }
  ]
})

控制檯列印如下圖：

參考資料：

1、vue-socket.io：https://github.com/MetinSeylan/Vue-Socket.io
2、socket.io-client：https://github.com/socketio/socket.io-client
3、vue-router守衛：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D

相關推薦

vue-socket.io使用教程與踩坑記錄

全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/12018866.html，多謝，=。=~ （如果對你有幫助的話請幫我點個贊啦） 請先允許我狠狠吐個槽：vue-socket.io相關中文部落格實在太少太少，來來去去就那麼幾篇，教程也比較零散，版本也比較老，

vue使用socket.io聊天室踩坑

此專案的原作者地址連結：https://github.com/Yaer23/vue-chatroom 然後我照著這個在本地寫發現一直在出問題，現在記錄一下出現的問題和解決方法，也是各種試才終於成功 先看專案目錄： 1.安裝socket.io，發現很順利

多頁應用 Webpack4 配置優化與踩坑記錄

前言 最近新起了一個多頁專案，之前都未使用 webpack4，於是準備上手實踐一下。這篇文章主要就是一些配置介紹，對於正準備使用 webpack4 的同學，可以做一些參考。 webpack4 相比之前的 2 與 3，改變很大。最主要的一點是很多配置已經內建，使得 webp

vue-cli3.0的使用踩坑記錄

又有一段時間沒寫過部落格了。 上家公司做了一個多月，沒學到什麼東西。跳槽了之後，因為自研專案原本是做的多頁vue專案，每次都要單獨引進，所以從鍛鍊經驗以及完成任務的角度開始了重構。 之前用的是vue-cli2.x的版本，現在使用vue-cli3.0進行搭建。 專案結構安

小白的踩坑記錄——socket.io-解決多程序

需求： 利用socket.io實現多程序長連線，實時獲取kafka資料 問題重現： 啟動單個程序的時候，socket.io可以正常的獲取到長連線進行實時資料，但是利用多個執行緒的時候就會報長連線404，並且下圖已經清晰的顯示了socket.io握手的

回顧vue開發spa（踩坑記錄）

url 如果 after 本質 {} spa 不能 cnblogs 所有 　　　　使用vueJS開發前端頁面差不多也有大半多年了。由於項目後臺管理頁面最早都是使用JQ進行開發的，剛開始使用vue的時候，只能是直接在頁面裏面引入vueJS框架進行開發，期間把項目後臺的編輯頁面

axios踩坑記錄+攔截器使用+vue cli代理跨域proxy

dex ios文檔 exports 地址 必須 主頁 mon 空白 space 1、小小的提一下vue cli腳手架前端調後端數據接口時候的本地代理跨域問題，如我在本地localhost訪問接口http://40.00.100.100:3002/是要跨域的，相當於瀏覽器設置

vue cli+axios踩坑記錄+攔截器使用，代理跨域proxy（更新）

1、首先axios不支援vue.use()方式宣告使用，看了所有近乎相同的axios文件都沒有提到這一點  建議方式 在main.js中如下宣告使用 import axios from 'axios'; Vue.prototype.$axios=axios; 那麼在其他vue元件中就可

vue cli+axios踩坑記錄+攔截器使用，代理跨域proxy

1、首先axios不支援vue.use()方式宣告使用，看了所有近乎相同的axios文件都沒有提到這一點 建議方式 2.小小的提一下vue cli腳手架前端調後端資料介面時候的本地代理跨域問題，如我在本地localhost訪問介面http://40.00.100.100:3002/是要跨域的，

Cygwin踩坑記錄（四）-openSSH與openSSL的安裝及配置

一、安裝openSSH與openSS 因為工作關係我需要在Cygwin執行 curl -s "https://get.sdkman.io" | bash 命令將Sdkman下載到本地。 在剛開始的時候我沒有配置openSSH和openSSL，執行curl命令的時候一直提示以下錯誤資

kafka安裝與使用遠端程式碼進行訪問 --附踩坑記錄

# kafka安裝和使用java連線遠端伺服器進行訊息的生成與消費 ###    首先要使用kafka，要有jdk和zookeeper的環境 ###    本文在阿里雲的centos7環境上進行   ###    jdk版本選擇的是1.8.0_181 ###    zook

Webpack 4.x搭建Vue腳手架踩坑記錄

博主最近在自己搭建一個vue的腳手架，因為感覺之前直接使用官方vue-cli之後，對於Webpack的使用不太熟悉，加上vue-cli3.0版本把webpack.config.js配置檔案置換成自己的配置檔案了之後，對於Webpack的使用就更加不熟練了。這裡總

踩坑記錄之vue點選事件

這周遇到了一個小問題，這裡簡單的總結一下。避免遇到同樣的問題。 問題：簡單來說就是，點選（父元素）的時候觸發事件，而點選（子元素）的時候會觸發（父元素）的事件。 itemClick方法 1 itemClick(e) { 2 let $form = e.currentTarget.

nuxt + vue-i18n 踩坑記錄

最近在用nuxt開發官網，同時支援多語言切換，所以又用到了 vue-i18n。 根據 nuxt 官網的demo，配置了 middleware 和 plugins   程式碼如下： // plugins/i18n.js import Vue from 'vue' import Vu

renren-fast-vue踩坑記錄

前言： 公司要開發新零售產品的專案，決定採用更為流弊的renren-fast（人人開源）框架，官方文件地址：https://www.renren.io/guide 個人之前也沒有了解過，網上文件更是少的可憐，不管是谷歌還是論壇上都找不到多少相關資訊，廢話不多說，先來看看我

vue原始碼除錯踩坑記錄

目的: 可以斷點除錯vue的原始碼, 研究一個new vue({...})以及data的更新在vue原始碼內部是如何執行的 目前做到了, 其實比較簡單, 也不知道為什麼會弄了一天… 遇到的問題有2個, 其中一個是坑 一: 其實git clone re

AWS雲建立EC2與使用注意事項-踩坑記錄

目錄 AWS 一 建立 EC2(雲伺服器) 二、AWS 注意事項 AWS 文章 GitHub 地址： 點我 AWS雲伺服器價格計算器 AWS WEB 價格計算器網址 https

Java ArrayList 踩坑記錄

至少 最後一個元素 get arraycopy add data his out pan 　　做編程的一個常識：不要在循環過程中刪除元素本身（至少是我個人的原則）。否則將發生不可預料的問題。 　　而最近，看到一個以前的同學寫的一段代碼就是在循環過程中刪除元素，我很是納悶啊。

react-踩坑記錄——頁面底部多出一倍高度的空白

idm 方法 left ++ dex code lock 高度 blog 掛載slider組件後頁面底部多出一倍高度的空白，如下： slider組件內容??： class Slider extends Component{ constructor(){ su

kibana 5.5 源碼編譯踩坑記錄

version echo regress ase https 記錄 arch 開發 iba 由於項目需要定制開發kibana，因此需要編譯kibana，在開發環境下運行。 註意：必須下載kibana 5.5的源碼才能正常編譯，下載release或者snapsho