vue2使用websocket实时展示一个数据

在Vue2中使用WebSocket实时展示数据，你可以按照以下步骤进行操作：

1. 安装WebSocket库：使用npm或yarn安装`vue-native-websocket`库，它是Vue的WebSocket插件。

npm install vue-native-websocket

2. 在Vue项目中引入WebSocket插件：在`main.js`或者你希望使用WebSocket的组件中引入WebSocket插件。

import VueNativeSock from 'vue-native-websocket';

3. 配置WebSocket连接：在`main.js`中配置WebSocket连接，可以设置WebSocket的URL和选项。

Vue.use(VueNativeSock, 'ws://your-websocket-url', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000,
});

4. 创建Vue组件：创建一个Vue组件，用于展示WebSocket实时获取的数据。

<template>
  <div>
    <ul>
      <li v-for="data in websocketData" :key="data.id">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      websocketData: [],
    };
  },
  created() {
    // 监听websocket消息
    this.$options.sockets.onmessage = (message) => {
      // 处理接收到的消息
      this.websocketData.push(JSON.parse(message.data));
    };
  },
};
</script>

在这个例子中，Vue组件会通过`this.websocketData`数组来保存WebSocket实时获取的数据。当收到WebSocket消息时，会将数据解析为JSON格式，并添加到`this.websocketData`数组中。

5. 使用WebSocket组件：在需要展示实时数据的页面中，使用上面创建的Vue组件。

<template>
  <div>
    <WebSocketComponent />
  </div>
</template>

<script>
import WebSocketComponent from './WebSocketComponent.vue';

export default {
  components: {
    WebSocketComponent,
  },
};
</script>

通过将WebSocket组件引入到页面中，就可以实时展示从服务器获取的数据。

以上就是在Vue2中使用WebSocket实时展示数据的基本步骤。你可以根据实际需求进行进一步的定制和优化。