vue項目中 socket.io 一直報錯什么情況？

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. 本文例子非常簡單易懂，希望對你有幫助！