使用 vue-3-socket.io 插件以及node.js实现实时聊天

// 安装vue-3-socket.io插件
// npm install vue-3-socket.io
 
// 在Vue应用中使用
import { createApp } from 'vue';
import App from './App.vue';
import { socket } from 'vue-3-socket.io';
 
// 假设你的Node.js服务器运行在 http://localhost:5000
const SOCKET_URL = 'http://localhost:5000';
 
const app = createApp(App);
 
app.use(socket, SOCKET_URL);
 
app.mount('#app');
 
// 在组件中使用socket发送和接收消息
<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="输入消息">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.socket.emit('new_message', this.message);
        this.message = '';
      }
    }
  },
  mounted() {
    this.socket.on('new_message', (data) => {
      console.log(data); // 处理接收到的消息
    });
  }
};
</script>

在这个代码实例中，我们首先导入了必要的插件并创建了一个新的Vue应用实例。然后，我们配置了插件以连接到我们的Node.js服务器。在组件中，我们定义了一个输入框用于输入消息，并在按下回车时通过socket.emit发送消息。同时，我们监听了new_message事件以接收并处理其他用户发送的消息。这个简单的例子展示了如何使用vue-3-socket.io插件在Vue 3应用中实现实时通信。