我正在尝试创建一个下一个应用程序,它也可以通过套接字与其后端实时通信,并且我正在使用
socket.io
来实现这一点。它在本地运行得很好(即使是在构建时),但是当部署到 vercel 时,我收到 WebSocket connection to '<URL>' failed: WebSocket is closed before the connection is established.
类型的错误
首先我创建了一个自定义 Nextjs 服务器:
import { createServer } from "http";
import { parse } from "url";
import { Server as SocketIOServer, Socket } from "socket.io";
import next from "next";
const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
console.log("hello");
app.prepare().then(() => {
const server = createServer((req, res) => {
const parsedUrl = parse(req.url!, true);
handle(req, res, parsedUrl);
}).listen(port);
// tslint:disable-next-line:no-console
console.log(
`> Server listening at http://localhost:${port} as ${
dev ? "development" : process.env.NODE_ENV
}`
);
const socketIO = new SocketIOServer(server, { transports: ["websocket"] });
socketIO.on("connection", (socket: Socket) => {
console.log("connected", socket.id);
});
});
然后在前端:
import { io } from "socket.io-client";
useEffect(() => {
const socket = io(window?.location?.hostname || "http://localhost:3000", {
reconnectionDelay: 1000,
reconnection: true,
reconnectionAttempts: 10,
transports: ["websocket"],
agent: false,
upgrade: false,
rejectUnauthorized: false
});
socket.on("connect", () => {
console.log("someone connected: ", socket?.id);
});
}, []);
这段代码在本地运行得很好,没有任何问题,无论是在
dev
模式还是build && start
模式下,都运行得很好。
一旦部署到 vercel,问题就开始了。
如果我不将
":3000"
添加到 window.location.hostname
,我会收到错误:
WebSocket connection to 'wss://xxxxxx.vercel.app/socket.io/?EIO=4&transport=websocket' failed: doOpen
如果我添加它,那么它就变成:
WebSocket connection to 'wss://xxxxxx.vercel.app:3000/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established.
答案是:
这是不可能的。 Vercel 不支持 Nextjs 具有的自定义服务器功能。耻辱。
问题不在于套接字本身,问题在于Vercel,并且由于上述原因而不起作用。
无论谁遇到类似的问题,我发现的最简单的解决方法就是简单地迁移到 Heroku,它们很容易设置(我本来打算使用 DO、GCP、AWS 等,但设置它们都更耗时)对于非 DevOps 人员来说更复杂)。因此,我在几分钟内就启动并运行了 Heroku,自定义服务器现在正在工作。
经过大量搜索后,我在 vercel 上部署此应用程序时也遇到此错误,我得到了一些 vercel 文章,这些文章告诉我:: 套接字工作正常,但问题是由 vercel 生成的,因为 vercel 不支持套接字或自定义服务器连接,我只想给您概述,请阅读文章,如果您真的想使用 nextjs 和 vercel 聊天socket.io 然后 vercel 允许一个第三方 api 可以执行这种类型的套接字连接,即 Pusher ok 如果你喜欢我的建议,请在推特上关注我 https://twitter.com/Saiyam02079791