vue3中使用websocket写个简易自动回复对话

在Vue 3中使用WebSocket实现简易的自动回复对话可以按照以下步骤进行：

1. 首先，安装 `vue-native-websocket` 插件，它提供了WebSocket的封装和Vue的全局 mixin。

npm install vue-native-websocket

2. 在你的Vue应用的入口文件（通常是 main.js）中导入并使用插件：

import VueNativeSock from 'vue-native-websocket';
import Vue from 'vue';

Vue.use(VueNativeSock, 'ws://localhost:8080', {
  format: 'json',
});

这里的 `'ws://localhost:8080'` 是WebSocket服务器的地址，你需要根据实际情况进行修改。

3. 创建一个WebSocket组件，用于处理WebSocket连接和消息收发：

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      <strong>{{ message.from }}:</strong> {{ message.content }}
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: '',
    };
  },
  methods: {
    sendMessage() {
      this.$socket.send(
        JSON.stringify({
          from: 'User',
          content: this.inputMessage,
        })
      );
      this.messages.push({
        id: Date.now(),
        from: 'User',
        content: this.inputMessage,
      });
      this.inputMessage = '';
    },
  },
  created() {
    this.$options.sockets.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };
  },
};
</script>

上述代码中，我们使用了 Vue 3 的 Composition API，并在 `created()` 生命周期钩子中监听 WebSocket 消息的到达，并将其添加到消息列表中。同时，我们通过 `sendMessage()` 方法将用户输入的消息发送给 WebSocket 服务器。

4. 在你的Vue组件中使用WebSocket组件：

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

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

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

这样，你就可以在浏览器中访问你的Vue应用，并通过输入框发送消息，并实时接收到来自WebSocket服务器的自动回复。

当然，这只是一个简单的示例，你还可以根据需求进行更复杂的处理和逻辑编写。