vue2封裝webSocket的實現(開箱即用)

更新時間：2023年08月09日 10:47:05 作者：qq_2524963996

在Vue2中,可以使用WebSocket實時通信,本文主要介紹了vue2封裝webSocket的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

第一步：

下載 webSocket

npm install vue-native-websocket --save

第二步：

需要在 main.js 中引入

import websocket from 'vue-native-websocket';
Vue.use(websocket, '', {
    connectManually: true, // 手動連接
    format: 'json', // json格式
    reconnection: true, // 是否自動重連
    reconnectionAttempts: 5, // 自動重連次數
    reconnectionDelay: 2000, // 重連間隔時間
});

第三步：

封裝相關的連接和斷開

相關代碼！?。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。?！

const socketService = {
    socket: null,
    init(username) {
        if (typeof WebSocket === "undefined") {
            alert("您的瀏覽器不支持socket");
        } else {
// ws://10.244.11.117:8089/dashboard/websocket/
            let path = "你的ws WebSocket 地址" + username; // 請求路徑
            this.socket = new WebSocket(path);
            this.socket.onopen = this.open.bind(this);
            this.socket.onerror = this.error.bind(this);
            this.socket.onmessage = this.getMessage.bind(this);
        }
    },
    open() {
        console.log("socket連接成功");
    },
    error() {
        console.log("連接錯誤");
    },
    getMessage(msg) {
        return new Promise((resolve, reject) => {
            this.socket.onmessage = (msg) => {
                console.log(msg.data);
                // 利用promise 返回出去結果
                if (msg.data != '連接成功' && JSON.parse(msg.data)) {
                    const data = JSON.parse(msg.data);
                    resolve(data); // 將數據傳遞給調用者
                }
                // this.scrollInstance.refresh(); // 手動刷新滾動效果
            };
        });
        // this.scrollInstance.refresh(); // 手動刷新滾動效果
    },
    send(params) {
        if (this.socket) {
            this.socket.send(params);
        }
    },
    close() {
        console.log("socket已經關閉");
    }
};
//最后導出
export default socketService;

第四步：

引入使用

//路徑是自己的啊
import socketService from "../sokect/index";

 mounted() {
      // 調用
     this.startSocket();
  },
 methods: {
    async startSocket() {
      // 這里是 username  
      socketService.init("warning-all");
      try {
        const msg = await socketService.getMessage();
          //打印出來 服務器給我的信息
         console.error(JSON.parse(msg.data) );
      } catch (error) {
        console.error("Error receiving message:", error);
      }
    },
  }

到這步接收信息已經OK了（記得和后端配合）

后續(xù)還有給服務器發(fā)送信息等.......正在開發(fā)中....... 謝謝

到此這篇關于vue2封裝webSocket的實現(開箱即用)的文章就介紹到這了,更多相關vue封裝webSocket內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: