第一步：
下载 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
第一步：按照我上面的步骤走完之后，发送信息的结果（也就是参数-和后端商量好需要哪些）文章来源：https://www.toymoban.com/news/detail-634611.html
第二步： 上代码 文章来源地址https://www.toymoban.com/news/detail-634611.html
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 = '';
},到了这里，关于vue2 封装 webSocket 开箱即用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
