如何在Nuxt/Express社区模板中集成Socket.io？

我之前在使用Nuxt社区的Express模板集成Socket.io时也踩过同样的坑，完全不用单独开新端口，直接复用现有Express实例就能搞定，下面是具体的实现步骤：

1. 安装Socket.io依赖 #

首先在项目根目录安装所需包：

npm install socket.io socket.io-client
# 或者用yarn
yarn add socket.io socket.io-client

2. 修改API入口文件（api/index.js） #

模板里的api/index.js原本导出的是Express app实例，但Socket.io需要绑定到HTTP Server上，所以我们要做一点改造：

const express = require('express')
const http = require('http')
const socketIo = require('socket.io')

// 创建Express app
const app = express()
// 基于Express app创建HTTP Server
const server = http.createServer(app)
// 初始化Socket.io，配置跨域（匹配你的Nuxt客户端地址）
const io = socketIo(server, {
  cors: {
    origin: "http://localhost:3000", // Nuxt默认运行端口，根据实际情况调整
    methods: ["GET", "POST"]
  }
})

// 监听Socket.io连接事件
io.on('connection', (socket) => {
  console.log(`用户已连接: ${socket.id}`)
  
  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log(`用户已断开连接: ${socket.id}`)
  })
  
  // 自定义消息事件示例：接收客户端消息并广播给所有用户
  socket.on('client-message', (data) => {
    console.log('收到客户端消息:', data)
    io.emit('server-message', data)
  })
})

// 保留原有的Express路由逻辑
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express!' })
})

// 注意：这里要导出HTTP Server而非Express app
module.exports = server

3. 调整Nuxt配置（nuxt.config.js） #

确保serverMiddleware指向我们修改后的API文件，让Nuxt使用这个带Socket.io的HTTP Server启动：

export default {
  // ...其他配置
  serverMiddleware: [
    { path: '/api', handler: '~/api/index.js' }
  ]
}

4. 在Nuxt客户端中使用Socket.io #

以页面pages/index.vue为例，实现简单的实时消息功能：

<template>
  <div class="chat-container">
    <input 
      v-model="inputMessage" 
      placeholder="输入消息发送"
      @keyup.enter="sendMessage"
    >
    <button @click="sendMessage">发送</button>
    <div class="message-list">
      <div v-for="(msg, index) in messages" :key="index">
        {{ msg }}
      </div>
    </div>
  </div>
</template>

<script>
import io from 'socket.io-client'

export default {
  data() {
    return {
      inputMessage: '',
      messages: [],
      socket: null
    }
  },
  mounted() {
    // 连接到Socket.io服务器（地址和Nuxt运行地址一致）
    this.socket = io('http://localhost:3000')
    
    // 监听服务器推送的消息
    this.socket.on('server-message', (data) => {
      this.messages.push(data)
    })
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) return
      // 向服务器发送消息
      this.socket.emit('client-message', this.inputMessage)
      this.inputMessage = ''
    }
  },
  beforeDestroy() {
    // 页面销毁前断开Socket连接
    this.socket.disconnect()
  }
}
</script>

关键注意点 #

• 一定要基于Express app创建HTTP Server，再把Socket.io绑定到这个Server上，直接绑定Express app会导致无法正常工作。
• 导出的必须是HTTP Server，而不是原来的Express app，这样Nuxt启动时才会用这个带Socket.io的服务。
• 跨域配置要匹配你的客户端地址，避免连接失败。

现在启动Nuxt项目（npm run dev），打开多个浏览器窗口测试，就能看到实时消息同步效果了。

内容的提问来源于stack exchange，提问作者sell