前端vue项目 socket 使用

使用 Vue.js 开发前端项目时，可以使用 Socket.io 库实现即时通信功能。下面是一个简单的示例：

1. 安装 Socket.io：在项目根目录下执行以下命令：

npm install socket.io-client --save

2. 在 Vue 组件中引入 Socket.io：

import io from 'socket.io-client'

3. 在组件中初始化 Socket.io：

export default {
    data() {
        return {
            socket: null
        }
    },
    mounted() {
        this.socket = io('http://localhost:3000') // 连接到服务器
        this.socket.on('connect', () => {
            console.log('connected')
        })
    },
    beforeDestroy() {
        this.socket.disconnect() // 断开连接
    }
}

4. 在组件中使用 Socket.io：

this.socket.emit('eventName', data) // 发送事件和数据
this.socket.on('eventName', data => {
    // 接收事件和数据
})

这样就可以在 Vue 组件中使用 Socket.io 实现即时通信功能了。注意在实际项目中，需要根据具体的需求和情况来进行配置和使用。