vue2封装webSocket的实现(开箱即用)
作者：qq_2524963996
在Vue2中,可以使用WebSocket实时通信,本文主要介绍了vue2封装webSocket的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
第一步：
下载 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("连接错误");
},
getMessage(msg) {
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(); // 手动刷新滚动效果
},
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);
}
},
}
到这步接收信息已经OK了（记得和后端配合）
后续还有 给服务器发送信息 等.......正在开发中....... 谢谢
到此这篇关于vue2封装webSocket的实现(开箱即用)的文章就介绍到这了,更多相关vue封装webSocket内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！