NextJ和套接字IO未连接

c2e8gylq  于 2023-01-20  发布在  其他
关注(0)|答案(1)|浏览(167)

我尝试用NextJS创建一个SocketIO解决方案,如下所示:
文件夹:api/套接字. 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) => {
            console.log("Connected socket.io");
            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;

文件夹:api/test.js

import io from "socket.io-client";

fetch("http://localhost:3000/api/socket");

const socket = io();

console.log(socket.connection);

socket.on("connect", () => {
    console.log("connected");
});

但当我运行api/test.js时,SocketIO未连接,如下所示:

Socket {
  connected: false,
  receiveBuffer: [],
  sendBuffer: [],
  ids: 0,
  acks: {},
  flags: {},
  io: Manager {
    nsps: { '//undefined//undefined': [Circular *1] },
    subs: [
      [Function: subDestroy],
      [Function: subDestroy],
      [Function: subDestroy]
    ],
    opts: {
      path: '/socket.io',
      hostname: 'undefined',
      secure: false,
      port: '80'
    },
    setTimeoutFn: [Function: bound setTimeout],
    clearTimeoutFn: [Function: bound clearTimeout],
    _reconnection: true,
    _reconnectionAttempts: Infinity,
    _reconnectionDelay: 1000,
    _reconnectionDelayMax: 5000,
    _randomizationFactor: 0.5,
    backoff: Backoff {
      ms: 1000,
      max: 5000,
      factor: 2,
      jitter: 0.5,
      attempts: 0
    },
    _timeout: 20000,
    _readyState: 'opening',
    uri: 'undefined//undefined//undefined',
    encoder: Encoder { replacer: undefined },
    decoder: Decoder { reviver: undefined },
    _autoConnect: true,
    engine: Socket {
      setTimeoutFn: [Function: bound setTimeout],
      clearTimeoutFn: [Function: bound clearTimeout],
      secure: false,
      hostname: 'undefined',
      port: '80',
      transports: [Array],
      readyState: 'opening',
      writeBuffer: [],
      prevBufferLen: 0,
      opts: [Object],
      id: null,
      upgrades: null,
      pingInterval: null,
      pingTimeout: null,
      pingTimeoutTimer: null,
      transport: [Polling],
      _callbacks: [Object]
    },
    skipReconnect: false,
    _callbacks: {
      '$open': [Array],
      '$packet': [Array],
      '$error': [Array],
      '$close': [Array]
    }
  },
  nsp: '//undefined//undefined',
  subs: [
    [Function: subDestroy],
    [Function: subDestroy],
    [Function: subDestroy],
    [Function: subDestroy]
  ]
}

有什么建议吗?

polhcujo

polhcujo1#

根据文档套接字服务器选项,此处为socket.iov4,您需要指定与客户端路径相同的路径
就你而言

const io = new Server(res.socket.server, {path:'/api/socket'});

相关问题