快捷導(dǎo)航

vue2封裝webSocket的實(shí)現(xiàn)(開箱即用)

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

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

第一步：

下載 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, // 自動重連次數(shù)
    reconnectionDelay: 2000, // 重連間隔時(shí)間
});

第三步：

封裝相關(guān)的連接和斷開

相關(guān)代碼！?。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。?！

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("連接錯(cuò)誤");
    },
    getMessage(msg) {
        return new Promise((resolve, reject) => {
            this.socket.onmessage = (msg) => {
                console.log(msg.data);
                // 利用promise 返回出去結(jié)果
                if (msg.data != '連接成功' && JSON.parse(msg.data)) {
                    const data = JSON.parse(msg.data);
                    resolve(data); // 將數(shù)據(jù)傳遞給調(diào)用者
                }
                // this.scrollInstance.refresh(); // 手動刷新滾動效果
            };
        });
        // this.scrollInstance.refresh(); // 手動刷新滾動效果
    },
    send(params) {
        if (this.socket) {
            this.socket.send(params);
        }
    },
    close() {
        console.log("socket已經(jīng)關(guān)閉");
    }
};
//最后導(dǎo)出
export default socketService;

第四步：

引入使用

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

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

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

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

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

您可能感興趣的文章: