vue專案中 socket.io 一直報錯什麼情況？

今天做專案的時候有個網站的常見功能就是下載進度條，之前做過這方面的需求，就想看看怎麼實現。起初我是想讓讓後臺給一個介面，前端每隔一段時間就請求一下，但是這種方式也太常見了吧？後來問過其它人後，大佬說HTML5都出了websocket了，還在用Ajax去不斷請求low不？然後我就學習了一下相關的webscoket的知識。

本文環境

web端：

• "vue": "^2.6.11"
• "vue-socket.io": "^3.0.10" (vue中socket.io外掛)
• "socket.io-client": "^4.4.0" (socket.io-client端檔案)

node server端：

• "koa": "^2.13.1"
• "socket.io": "^4.4.0" (socket.io 庫)

本文實現效果

1. web端使用者點選按鈕，將引數傳給server端
2. server端，接收引數，將結果執行遍歷
3. 遍歷的同時將每一項，返回給前端 (如果資料很多或者每一次操作很耗時，就可以把當前執行到第幾次了，計算出一個百分比，返回給web端，這就類似下載進度條的效果)

程式碼實現 （下面基本只展示socket相關的程式碼！！！）

vue-socket.io 和 socket.io 的使用請自行檢視官方文件，本文就不CV了，vue 和 koa 快速搭建專案也不廢話了，直接上socket程式碼。

web端：
main.js 檔案

import VueSocketIO from "vue-socket.io"
import SocketIO from 'socket.io-client'


Vue.use(new VueSocketIO({
  // debug: true,
  connection: SocketIO('ws://localhost:3003', {   //需要連線socket的地址
    autoConnect: false  //禁止自動連線socket，由於不需要一直連socket服務，所以這裡設定關閉
  }),  //可以連線socket
  options: {
    transports: ['websocket', 'polling']   //socket.io的引數請看文件
  }
}));


 

index.vue 檔案（我還引入了elementUI，所以可以直接使用元件）:

<template>
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="24">
                    <div></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div :id="uid" @click="start">點選連線webscokte服務</div>
                </el-col>
            </el-row>

        </el-main>
    </el-container>
</template>
<script>


export default {
    name: 'Index',
    data() {
        return {
            id:'',
            uid:2,
            num:0
        };
    },
    mounted() {},
    sockets: {
      connect() {
        this.id = this.$socket.id;
        console.log('connect---監聽socket連線狀態', this.id);
      },
      disconnect(reason) {
        console.log('disconnect--socket斷開服務的原因：',reason);
      },
      message(data) { //監聽message事件，方法是後臺定義和提供的
        console.log('message 接收到服務端傳回的引數：',data );
        this.num = data;
      }
    },
    methods: {
        // 執行socket服務
        start(){
          console.log('socket start Fn', this.$socket);
          // 連線socket服務
          this.$socket.connect();
          // 觸發server端的start事件
          this.$socket.emit('start', this.uid);
        }
    }
};
</script>
<style lang="scss" scope>
</style>

node server端：
app.js 檔案

// koa模組
const Koa = require('koa');
// http協議模組
const { createServer } = require("http");

// 例項化Koa模組
const app = new Koa();

const httpServer = createServer(app.callback());

// socket模組
const { Server } = require("socket.io");


// 為socket新起個埠
const io = new Server(3003, {
  allowEIO3: true, //是否啟用與 Socket.IO v2 客戶端的相容性。
  transports: ['websocket', 'polling'],
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});


io.on("connection", (socket) => {
  console.log('connection socket連線成功');

  socket.on('start', async (data)=>{ //監聽start事件，web端會觸發這個函式
    let percentage = data*10;
    console.log('server-client start fn', data, percentage);

    for (let index = 0; index < percentage; index++) {
      socket.emit('message', index);  //觸發web端的message事件
      if (index==percentage) {
        socket.disconnect(true);  //執行完遍歷，端開socket服務
        console.log('socket.disconnect  關閉');
      }
    }
  });
});


httpServer.listen(3000, () => {
  console.log('starting at port 3000, http://localhost:3000/');
});

總結

1. vue-socket.io 中的 connection 引數 最好使用 socket.io-client 傳入 (我一開始就沒用，一直報錯)
2. socket.io 預設是自動連線的，如果需要手動連線，可以在web端設定 autoConnect: false
3. web端、server端，觸發事件都是用的emit方式觸發
4. 多看文件，很多問題確實官方文件都寫了，但是我還是一出問題就浮躁，沒用仔細看文件，導致網上找了很多文章才解決。
5. 本文例子非常簡單易懂，希望對你有幫助！