时间戳

首页 > 解决方案 > 推送到vercel后无法连接到websocket服务器

node.js - 推送到vercel后无法连接到websocket服务器

问题描述

每当我在本地运行我的服务器时，它都能完美运行但是一旦我将它上传到 vercel，我就会收到诸如 polling-xhr.js:202 GET https://giphy-chat-server.vercel.app/socket.io/?EIO=之类的错误4&transport=polling&t=NQ03j3c&sid=H_PHDh9-4UKRVGTVAAAC 400 和 WebSocket 连接到 'wss://giphy-chat-server.vercel.app/socket.io/?EIO=4&transport=websocket&sid=k-Sex1ZKmrQQFoSKAAAA' 失败：WebSocket 握手期间出错：意外的响应代码：400 我尝试了很多解决方案，但没有一个有效......我不能只是找出问题所在。如果它回答我会很高兴。谢谢

const express = require("express");

const app = express();
const http = require("http");
const path = require("path");
var server = http.createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: "*",
    credentials: true,
    methods: ["GET", "POST"],
  },
});
const { MONGODB_URI } = require("./config");
const port = process.env.PORT || 8000;
const Message = require("./message_model");
const mongoose = require("mongoose");
mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then((result) => {
    server.listen(port, () => {
      console.log(`Listening on port ${port}...`);
    });
  })
  .catch((err) => {
    console.log(err);
  });
app.use(express.static(path.join(__dirname, "..", "client", "build")));
const users = [];
io.on("connection", (socket) => {
  users.push({ id: socket.id });
  io.emit("users", { users: users });
  Message.find()
    .sort({ createdAt: -1 })
    .limit(10)
    .exec((err, messages) => {
      if (err) return console.error(err);
      socket.emit("init", messages);
    });
  socket.on("message", (msg) => {
    const message = new Message({
      content: msg.content,
      name: msg.name,
    });
    message.save((err) => {
      if (err) return console.error(err);
    });
    socket.broadcast.emit("push", msg);
  });
  socket.on("disconnect", (reason) => {
    let index = -1;
    for (let i = 0; i < users.length; i++) {
      const user = users[i];
      if (user.id === socket.id) {
        index = i;
      }
    }
    if (index !== -1) {
      users.splice(index, 1);
    }
    io.emit("users", { users: users });
  });
});
app.get("/", (req, res) => {
  res.send("Giphy Chat Server is running successfully");
});
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});

标签： node.jsreactjswebsocketsocket.io

解决方案

我认为这将是由于 Vercel 的无服务器函数具有最大执行超时，因此它们无法维护 websocket 连接。为了将 Websockets 与 Vercel 一起使用，您需要使用第三方服务来为您处理 Websocket 连接。像 Ably 或 Pusher 或 PubNub 之类的东西。

如果有帮助，我刚刚写了一个 next + abil 的演示 - https://github.com/ably-labs/NextJS-chat-app

推荐阅读