当前位置：首页 > article >正文

WebSocket监听接口

article 2025/1/11 3:27:18

在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服务器URL
      const 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连接。