vue+websocket

Vue.js 是一个流行的 JavaScript 前端框架，而 WebSocket 是一种基于 TCP 的网络协议，可以实现实时双向通信。

要在 Vue.js 中使用 WebSocket，可以使用原生的 WebSocket API 或第三方库（如 socket.io、SockJS 等）。

使用原生的 WebSocket API，可以在 Vue.js 组件中创建 WebSocket 实例，然后通过监听事件来处理 WebSocket 的消息和状态。

示例代码：

// MyWebSocket.vue

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
      inputMessage: ''
    };
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:8080');
    this.ws.addEventListener('open', (event) => {
      console.log('WebSocket connected');
    });
    this.ws.addEventListener('message', (event) => {
      this.message = event.data;
    });
    this.ws.addEventListener('close', (event) => {
      console.log('WebSocket disconnected');
    });
  },
  methods: {
    sendMessage() {
      this.ws.send(this.inputMessage);
      this.inputMessage = '';
    }
  }
};
</script>

在上面的示例中，我们在组件的 `mounted` 钩子中创建了一个 WebSocket 实例，并监听了 `open`、`message` 和 `close` 事件。我们还定义了一个 `sendMessage` 方法，用于发送消息。

可以看到，我们使用了 `v-model` 来绑定输入框的值，并在按钮的点击事件中调用了 `sendMessage` 方法来发送消息。

当 WebSocket 收到消息时，它会触发 `message` 事件，我们在事件处理程序中更新组件的 `message` 数据，从而实现了实时更新视图的效果。

当 WebSocket 连接断开时，它会触发 `close` 事件，我们可以在事件处理程序中执行一些清理操作。

以上就是在 Vue.js 中使用 WebSocket 的基本方法，如果需要更高级的功能，可以考虑使用第三方库来简化开发。