如何将 Socket.io 与 Next.js API 路由一起使用

Question

Next.js 提供serverless API routes。通过在./pages/api下创建一个文件，你可以让你的服务运行起来，我想通过这个机制来拥有一个Socket.io服务。

我已经创建了一个客户端：

./pages/client.js

import { useEffect } from 'react';
import io from 'socket.io-client';

export default () => {

  useEffect(() => {
    io('http://localhost:3000', { path: '/api/filename' });
  }, []);

  return <h1>Socket.io</h1>;
}

还有一个 API 路由：

./pages/api/filename.js

const io = require('socket.io')({ path: '/api/filename' });

io.onconnection = () => {
  console.log('onconnection');
}

io.on('connect', () => {
  console.log('connect');
})

io.on('connection', () => {
  console.log('connection');
})

export default (req, res) => {
  console.log('endpoint');
}

但我无法让客户端连接到 Socket.io 服务器并成功看到：'onconnection'、'connect' 或 'connection' 打印。

Answer 1

诀窍是只将“socket.io”插入 http 服务器一次，因此检查对 api 的每次访问。 试试这样的：

./pages/api/socketio.js

import { Server } from 'socket.io'

const ioHandler = (req, res) => {
  if (!res.socket.server.io) {
    console.log('*First use, starting socket.io')

    const io = new Server(res.socket.server)

    io.on('connection', socket => {
      socket.broadcast.emit('a user connected')
      socket.on('hello', msg => {
        socket.emit('hello', 'world!')
      })
    })

    res.socket.server.io = io
  } else {
    console.log('socket.io already running')
  }
  res.end()
}

export const config = {
  api: {
    bodyParser: false
  }
}

export default ioHandler

./pages/socketio.jsx

import { useEffect } from 'react'
import io from 'socket.io-client'

export default () => {
  useEffect(() => {
    fetch('/api/socketio').finally(() => {
      const socket = io()

      socket.on('connect', () => {
        console.log('connect')
        socket.emit('hello')
      })

      socket.on('hello', data => {
        console.log('hello', data)
      })

      socket.on('a user connected', () => {
        console.log('a user connected')
      })

      socket.on('disconnect', () => {
        console.log('disconnect')
      })
    })
  }, []) // Added [] as useEffect filter so it will be executed only once, when component is mounted

  return <h1>Socket.io</h1>
}

Answer 2

您必须拥有/api/pusher/auth 才能通过前端推送器进行身份验证。然后，您使用从中获得的密钥与推送者进行通信。这是出于安全目的。您可以通过前端完成所有操作，但取决于您的应用，如果您要保存数据（例如消息或聊天），那么可能应该进行身份验证。

Answer 3

您将需要创建一个单独的 express 服务器，然后在 IO 对象上，您必须配置 cors 以及配置要在 app 变量上使用的 cors。我有我在这里制作的示例套接字服务器作为与 Next.js 一起使用的答案。

const express = require("express");
const socket = require("socket.io");
const cors = require("cors");

const app = express();

app.use(cors());

const server = app.listen(process.env.PORT || 8080, () =>
  console.log("Port 8080")
);

// socket setup
const io = socket(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

io.on("connection", (socket) => {
  console.log("User connected");
  // socket event example send the specific data to the client
  socket.on("chat", (data) => {
    console.log(data);
    io.sockets.emit("chat", data);
  });
});

你可以看到我在哪里添加了 app.use(cors()) 和

const io = socket(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PATCH", "DELETE"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

您可以在这里找到更多信息https://socket.io/docs/v3/handling-cors