vue專案中 socket.io 一直報錯什麼情況?
阿新 • • 發佈:2021-12-08
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 庫)
本文實現效果
- web端使用者點選按鈕,將引數傳給server端
- server端,接收引數,將結果執行遍歷
- 遍歷的同時將每一項,返回給前端 (如果資料很多或者每一次操作很耗時,就可以把當前執行到第幾次了,計算出一個百分比,返回給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/');
});
總結
vue-socket.io
中的connection
引數 最好使用socket.io-client
傳入 (我一開始就沒用,一直報錯)- socket.io 預設是自動連線的,如果需要手動連線,可以在web端設定
autoConnect: false
- web端、server端,觸發事件都是用的
emit
方式觸發 - 多看文件,很多問題確實官方文件都寫了,但是我還是一出問題就浮躁,沒用仔細看文件,導致網上找了很多文章才解決。
- 本文例子非常簡單易懂,希望對你有幫助!