WebSocket监听接口

在Vue.js中使用WebSocket来监听接口其实相对简单。WebSocket是一种在单个TCP连接上进行全双工通信的协议，通常用于需要实时数据更新的场景，比如聊天应用、实时通知等。

以下是一个在Vue.js中使用WebSocket的示例：

1. 创建Vue项目

如果你还没有Vue项目，可以通过Vue CLI创建一个新的Vue项目：

vue create my-websocket-app
cd my-websocket-app

2. 在Vue组件中使用WebSocket

你可以在Vue组件的生命周期方法中初始化和管理WebSocket连接。以下是一个简单的示例组件：

<template><div><h1>WebSocket Demo</h1><div v-if="messages.length"><ul><li v-for="(message, index) in messages" :key="index">{{ message }}</li></ul></div><div v-else>No messages yet...</div></div>
</template><script>
export default {data() {return {ws: null, // WebSocket实例messages: [] // 存储接收到的消息};},created() {this.connectWebSocket();},beforeDestroy() {this.disconnectWebSocket();},methods: {connectWebSocket() {// 替换为你的WebSocket服务器URLconst wsUrl = 'wss://example.com/your-websocket-endpoint';this.ws = new WebSocket(wsUrl);// WebSocket连接成功时的回调this.ws.onopen = () => {console.log('WebSocket connected');};// 接收到消息时的回调this.ws.onmessage = (event) => {console.log('Received message:', event.data);this.messages.push(event.data);};// WebSocket连接关闭时的回调this.ws.onclose = () => {console.log('WebSocket disconnected');};// WebSocket错误时的回调this.ws.onerror = (error) => {console.error('WebSocket error:', error);};},disconnectWebSocket() {if (this.ws) {this.ws.close();}}}
};
</script><style scoped>
/* 添加一些样式 */
</style>

3. 解释代码

‌data‌：定义了两个数据属性，ws用于存储WebSocket实例，messages用于存储接收到的消息。
‌created‌：Vue生命周期钩子，组件创建时调用connectWebSocket方法建立WebSocket连接。
‌beforeDestroy‌：Vue生命周期钩子，组件销毁前调用disconnectWebSocket方法关闭WebSocket连接。
‌methods‌：
- connectWebSocket：初始化WebSocket连接，并设置onopen、onmessage、onclose和onerror回调。
- disconnectWebSocket：关闭WebSocket连接。