第一步：

? ?下載 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, // 重連間隔時間
});

?第三步：

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

?

?相關(guān)代碼?。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。?/p>

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("連接錯誤");
    },
  //這里我判斷了 是不是  JSON  （要和后端定一下結(jié)構(gòu)類型） (二選一)
    getMessage() {
        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(); // 手動刷新滾動效果
    },
  // 也可以這樣寫 start (二選一)
	getMessage() {
		if (this.messageCallback) {
			this.socket.onmessage = (msg) => {
				this.messageCallback(msg.data); // 調(diào)用回調(diào)函數(shù)，并傳遞消息數(shù)據(jù)
			};
		}
	},
  // 也可以這樣寫 end
  
    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: {

// 針對性用啊  和上方一一對應(yīng)的
    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);
      }
    },

  }

// 針對性用啊    和上方一一對應(yīng)的 感覺都差不多
 async startSocket() {
			socketService.init('warning-all');
			try {
				const msg = await new Promise((resolve) => {
					socketService.messageCallback = resolve; // 設(shè)置回調(diào)函數(shù)，以便獲取消息數(shù)據(jù)
				});
				console.log('推送消息：', msg);
				// 在這里處理你的推送消息
			} catch (error) {
				console.error('Error receiving message:', error);
			}
		}

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

?

?使用?uni.connectSocket 進行連接

	data() {
		return {
			title: [],
			reconnectInterval: 5000
		};
	},

startSocket() {
			this.socket = uni.connectSocket({
				url: 'ws://yapi.care-bay.com/websocket/12584',
				success: () => {
					console.log('WebSocket連接已打開');
				},
				fail: (error) => {
					console.log('WebSocket連接出錯', error);
					setTimeout(() => {
						console.log('嘗試重新連接');
						this.startSocket();
					}, this.reconnectInterval);
				}
			});

			this.socket.onMessage((event) => {
				this.title.push(event.data);
				console.log('Received message:', event.data);
				// 在這里處理收到的消息
			});

			this.socket.onClose(() => {
				console.log('WebSocket連接已關(guān)閉');
				setTimeout(() => {
					console.log('嘗試重新連接');
					this.startSocket();
				}, this.reconnectInterval);
			});
		}

?發(fā)送消息?vue-native-websocket

?第一步：按照我上面的步驟走完之后，發(fā)送信息的結(jié)果（也就是參數(shù)-和后端商量好需要哪些）

?第二步：?上代碼?文章來源地址http://www.zghlxwxcb.cn/news/detail-634611.html

import socketService from '../../../sokect/index'; //（自己的路徑?。?huoqu() {
			if (!this.textarea) {
				this.$message({
					message: '請?zhí)顚懟貜?fù)的內(nèi)容，謝謝',
					type: 'warning'
				});
				return;
			}
			// 構(gòu)建包含所需數(shù)據(jù)的 JSON 對象 --后端商量好的參數(shù) 需要發(fā)送的 我這邊根據(jù)自己的需要                      
            //定是 JSON形式的 
			const messageData = {
				nurseId: this.nurseIds,
				conversationId: this.conversationIds
			};
			if (this.stauts) {
				messageData['keyword'] = this.textarea;
			} else {
				messageData['linkUrl'] = this.textarea;
			}
			// 將 JSON 對象轉(zhuǎn)換為字符串
			const messageString = JSON.stringify(messageData);
			console.log('messageData', messageString);
			// 發(fā)送消息---這邊是發(fā)送信息的主要動作----OK
			socketService.send(messageString);
			// 發(fā)送成功之后 刪除
			this.textarea = '';
	 
		},

到了這里，關(guān)于vue2 封裝 webSocket 開箱即用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！