在src目录下新建文件夹 在文件夹中新建websocket.js
// websocket.js
const WebSocketPlugin = {
install(Vue, options) {
const socket = new WebSocket(options.url);
Vue.prototype.$socket = socket;
socket.addEventListener('open', () => {
console.log('WebSocket连接成功');
});
socket.addEventListener('message', (event) => {
console.log('Received message:', event.data);
Vue.prototype.$emit('websocket-message', event.data);
});
socket.addEventListener('close', (event) => {
console.log('WebSocket连接关闭', event);
Vue.prototype.$emit('websocket-close', event);
});
socket.addEventListener('error', (error) => {
console.error('WebSocket连接错误', error);
Vue.prototype.$emit('websocket-error', error);
});
},
};
export default WebSocketPlugin;
在main.js中配置
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import dataV from '@jiaminghi/data-view';
import router from "./router";
import store from "./store";
import api from "@/APi/index.js";
//配置websocket
import sockets from "@/APi/websocket.js";
Vue.prototype.$api = api;
//配置weibsocket
Vue.prototype.$sockets = sockets;
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(dataV)
new Vue({
router,
store,
render: (h) => h(App),
components: { App },
}).$mount("#app");
在页面中的使用
// 建立 web socket 连接
this.$sockets = new WebSocket('ws://127.0.0.1:6001/');
this.$sockets.onopen = () => {
console.log('WebSocket 连接已打开');
};
this.$sockets.onmessage = (event) => {
console.log('收到消息:', event.data);
};
this.$sockets.onclose = () => {
console.log('WebSocket 连接已关闭');
};
this.$sockets.onerror = (error) => {
console.error('WebSocket 发生错误:', error);
};
setInterval(() => {
//发送消息
this.$sockets.send('123');
//关闭连接
this.$sockets.close();
this.$sockets.onclose();