vue2 封装 webSocket 开箱即用（或 uni.connectSocket）_原生websocket 封装 vue

第一步：

   下载 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("连接错误");
    },
  //这里我判断了 是不是  JSON  （要和后端定一下结构类型） (二选一)
    getMessage() {
        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(); // 手动刷新滚动效果
    },
  // 也可以这样写 start (二选一)
	getMessage() {
		if (this.messageCallback) {
			this.socket.onmessage = (msg) => {
				this.messageCallback(msg.data); // 调用回调函数，并传递消息数据
			};
		}
	},
  // 也可以这样写 end
  
    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);
      }
    },
 
  }
 
// 针对性用啊    和上方一一对应的 感觉都差不多
 async startSocket() {
			socketService.init('warning-all');
			try {
				const msg = await new Promise((resolve) => {
					socketService.messageCallback = resolve; // 设置回调函数，以便获取消息数据
				});
				console.log('推送消息：', msg);
				// 在这里处理你的推送消息
			} catch (error) {
				console.error('Error receiving message:', error);
			}
		}

到这步接收信息已经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连接已关闭');
				setTimeout(() => {
					console.log('尝试重新连接');
					this.startSocket();
				}, this.reconnectInterval);
			});
		}

 发送消息 vue-native-websocket

 第一步：按照我上面的步骤走完之后，发送信息的结果（也就是参数-和后端商量好需要哪些）

 第二步： 上代码 

import socketService from '../../../sokect/index'; //（自己的路径啊）
huoqu() {
			if (!this.textarea) {
				this.$message({
					message: '请填写回复的内容，谢谢',
					type: 'warning'
				});
				return;
			}
			// 构建包含所需数据的 JSON 对象 --后端商量好的参数 需要发送的 我这边根据自己的需要                      
            //定是 JSON形式的 
			const messageData = {
				nurseId: this.nurseIds,
				conversationId: this.conversationIds
			};
			if (this.stauts) {
				messageData['keyword'] = this.textarea;
			} else {
				messageData['linkUrl'] = this.textarea;
			}
			// 将 JSON 对象转换为字符串
			const messageString = JSON.stringify(messageData);
			console.log('messageData', messageString);
			// 发送消息---这边是发送信息的主要动作----OK
			socketService.send(messageString);
			// 发送成功之后 删除
			this.textarea = '';
	 
		},