vue2 封装 webSocket 开箱即用(或 uni.connectSocket)

第一步:

   下载 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 = '';
	 
		},

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_2524963996

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值