Nextjs使用socket.io创建连接

文章目录

• ​​ts支持​​
• ​​服务端创建socket实例​​
• ​​客户端连接​​

• ​​总结​​

ts支持

如果使用typescript使用新的类型将socket添加
​​​pages/types/next.ts​​

/*
 * @Author: hongbin
 * @Date: 2022-11-01 21:32:16
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-01 21:32:16
 * @Description: 添加socket类型
 */
import { Server as NetServer, Socket } from "net";
import { NextApiResponse } from "next";
import { Server as SocketIOServer } from "socket.io";

export type NextApiResponseServerIO = NextApiResponse & {
    socket: Socket & {
        server: NetServer & {
            io: SocketIOServer;
        };
    };
};

服务端创建socket实例

在请求时创建socket连接
​​​pages/api/socketio.ts​​

import { NextApiRequest } from "next";
import { Server as ServerIO } from "socket.io";
import { Server as NetServer } from "http";
import { NextApiResponseServerIO } from "../../src/types/next";

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

const handle = async (req: NextApiRequest, res: NextApiResponseServerIO) => {
    console.log("接受到请求");

    if (!res.socket.server.io) {
        console.log("创建服务");
        const httpServer: NetServer = res.socket.server as any;
        const io = new ServerIO(httpServer, {
            path: "/api/socketio",
        });
        //将io挂在到res上
        res.socket.server.io = io;
    }
    res.end();
};

export default handle;

客户端连接

import { io } from "socket.io-client";

const socketClient = io("http://localhost:3000/", {
 path: "/api/socketio",
    // transports: ["websocket"],
});
console.log(socketClient);
socketClient.onAny((...args) => {
    console.log(args);
});
socketClient.on("connect", () => {
    console.log("socket 连接成功");
});
socketClient.on("connect_error", (err) => {
    console.log("socket 连接err", err);
});

因为是服务端被动的创建socket连接所以第一次socket连接会失败这时服务端会创建socket连接，客户端经过短暂时间后下次轮询就会连接成功

此情况只会在项目不部署后第一位访问的用户的客户端出现之后的用户访问socket已经创建完毕，想要避免可以在请求之前手动触发服务,例如发送一个请求 ​​fetch('http://localhost:3000/api.socketio')​​之后就不会在socket连接中失败(正常能够连接的情况下)

总结

不要用next api写socket 非常难受 热更新还有大欠缺