Vue3中如何全局注册Socket.IO

在Vue3中，你可以通过创建一个插件来全局注册Socket.IO。这个插件将在应用启动时自动连接到Socket.IO服务器，并在组件中通过事件系统来发送和接收消息。下面是一个简单的示例：

首先，确保你已经安装了socket.io-client。如果没有，你可以通过npm进行安装：

npm install socket.io-client

然后，创建一个名为SocketPlugin.js的文件，并添加以下代码：

```javascript
import { createApp } from ‘vue’;
import Vue from ‘vue’;
import io from ‘socket.io-client’;

const socket = io(‘http://localhost:3000‘, {
transports: [‘websocket’],
forceNew: true,
});

socket.on(‘connect’, () => {
console.log(‘Connected to the Socket.IO server.’);
});

socket.on(‘message’, (data) => {
console.log(‘Received message:’, data);
Vue.prototype.$socketMessage(data); // 发布消息到事件系统
});

socket.on(‘disconnect’, () => {
console.log(‘Disconnected from the Socket.IO server.’);
});

socket.on(‘reconnect’, () => {
console.log(‘Reconnected to the Socket.IO server.’);
});

socket.on(‘reconnect_attempt’, () => {
console.log(‘Attempting to reconnect to the Socket.IO server.’);
});

export default {
install(app) {
app.config.globalProperties.$socket = socket; // 全局注册 socket 实例
app.config.globalProperties.$socketMessage = (data) => { // 发布消息到事件系统
const event = new CustomEvent(‘socket-message’, { detail: data });