Socket.IO新增数据无实时更新、transports配置关联CORS问题求助

问题场景 #

基于ReactJS、Express、Mongoose搭建的项目中，Socket.IO基础连通功能正常——页面首次加载时可正常获取并展示后端返回的房间列表数据，但通过Express路由提供的REST API完成新数据写入数据库后，前端无法实时同步更新列表，必须手动刷新页面才能看到最新数据，未达到实时更新的预期效果。
同时存在两个待解疑问：

• 为什么其他开发者的Socket.IO客户端连接无需配置transports参数，而当前项目如果不添加{ transports: ['websocket', 'polling', 'flashsocket'] }配置，就会触发CORS错误？
• 当前的代码逻辑存在什么问题，导致数据新增完成后无法自动触发Socket.IO的实时推送？

现有项目代码片段 #

前端App.js相关逻辑 #

状态变量、useEffect逻辑均位于App组件内部，已省略组件容器定义代码：

import io from "socket.io-client";
const socket = io("http://localhost:3001", { transports: ['websocket', 'polling', 'flashsocket'] });

const [rooms,setRooms] = useState([]);

useEffect(() => {
    socket.emit("rooms");

    socket.on("rooms", rooms=> {
        setRooms(rooms);
    })
},[])

后端Express服务入口app.js代码 #

const http = require('http').createServer(app);
const io = require("socket.io")(http);

const viewRooms = require("./events/rooms");

const onConnection = (socket) => {
     viewRooms(io,socket);
}

io.on("connection",onConnection);

后端events目录下的rooms.js事件处理逻辑 #

const Rooms= require("./../models/Rooms");

module.exports = (io,socket) => {
    const view = () => {
        Rooms.find()
        .then(rooms=> {
            io.emit("rooms",rooms);
        })
    }
    socket.on("rooms",view);
 }

前端新增数据的提交函数submitHandle逻辑 #

const submitHandle = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('name',addForm.name);
    addForm.description.forEach((val,key) => {
        formData.append("article[" + key + "][" + Object.keys(val) + "]",val.paragraph);
    })
    addForm.images.forEach(val => {
        formData.append("image",val);
    })
    formData.append('date',addForm.date);

    let token = "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwNDU2ZmNhNTI3ZTdhMGEwODY0NjVjNSIsImlhdCI6MTYxODI3NzIyNX0.w6eBHJC72xo-NRPtzJ3gKu_hIY70eCk_-K3-pkO4bAc";        

    fetch("http://localhost:3001/rooms/upload",{
        method : "POST",
        body : formData,
        headers : {
            "Authorization" : token
        }
    })
    .then(data => data.json())
    .then(rooms=> {
        console.log(rooms);
        alert(rooms.message);
    })
}

后端处理新增数据的Express POST路由代码 #

const router = require("express").Router();
const Rooms = require("./../models/Rooms ");
const auth = require("./../authorization");
const passport = require("passport");
const multer = require("multer");
require("./../passport-setup");

// IMAGE DESTINATION AND FILENAME
const storage = multer.diskStorage({
    destination : (req,file,cb) => {
        cb(null,"public/images")
    },
    filename : (req,file,cb) => {
        cb(null, Date.now() + "-" + file.originalname)
    }
})

// upload
const upload = multer({ storage : storage});

// upload rooms
router.post("/upload",upload.array("image",10),passport.authenticate("jwt",{session : false}),auth,(req,res,next) => {
    let allDescription = req.body.description;

    req.body.images = req.files.map(file => {
        return(
            {
                roomName : req.body.name,
                image : "/public/" + file.filename
            }
        )
    })
    Rooms .create(req.body)
    .then(rooms=> {
        res.send({
            message : "Rooms uploaded!",
            success : true,
            rooms
        })
    })
    .catch(next);
})

问题原因与修复方案 #

CORS错误的根因 #

Socket.IO v3及以上版本默认不再开放跨域连接权限，服务端如果没有显式配置CORS规则，客户端发起连接时就会被浏览器跨域策略拦截。其他开发者的项目如果没有遇到这个问题，通常是他们已经在Socket.IO服务端初始化时配置了完整的跨域规则：

// 服务端CORS配置示例
const io = require("socket.io")(http, {
  cors: {
    origin: "http://localhost:3000", // 匹配前端实际运行地址
    methods: ["GET", "POST"],
    credentials: true
  }
});

额外提示：flashsocket是已被废弃多年的传输协议，不需要加入transports配置数组，只会增加不必要的兼容负担。

实时推送失效的根因 #

当前代码的实时推送链路存在断层：后端的列表广播逻辑只绑定在前端主动emit "rooms"事件的触发场景下——也就是说只有前端主动发起请求索要列表，后端才会查询数据库并把列表推给所有客户端。当通过REST接口新增数据时，没有任何代码触发这个“查询最新列表+全局广播”的流程，自然不会触发前端列表自动更新。
代码笔误提醒：现有路由代码中引入Rooms模型的路径require("./../models/Rooms ") 末尾多了一个空格，会导致模型加载失败，需要修正为require("./../models/Rooms")。

修复步骤

1. 打通Express路由和Socket.IO实例的通信链路，在服务端初始化时把Socket.IO实例挂载到Express app上，避免模块循环依赖：

   // 后端app.js 初始化时新增配置
   app.set('io', io);
   

2. 在/upload路由的数据库写入成功回调里，主动触发列表广播逻辑：

   router.post("/upload",upload.array("image",10),passport.authenticate("jwt",{session : false}),auth,(req,res,next) => {
       // 原有业务逻辑保持不变
       let allDescription = req.body.description;
       req.body.images = req.files.map(file => {
           return(
               {
                   roomName : req.body.name,
                   image : "/public/" + file.filename
               }
           )
       })
       Rooms.create(req.body)
       .then(rooms=> {
           // 新增：拿到挂载的io实例，查询最新列表并全局广播
           const io = req.app.get('io');
           Rooms.find().then(latestRooms => {
               io.emit("rooms", latestRooms);
           })
           // 原有响应逻辑保持不变
           res.send({
               message : "Rooms uploaded!",
               success : true,
               rooms
           })
       })
       .catch(next);
   })
   

3. 优化前端事件监听逻辑，避免组件卸载后残留监听导致的内存泄漏：

   useEffect(() => {
       socket.emit("rooms");
       const handleRoomsUpdate = (roomsData) => {
           setRooms(roomsData);
       }
       socket.on("rooms", handleRoomsUpdate);
       // 组件卸载时移除事件监听
       return () => {
           socket.off("rooms", handleRoomsUpdate);
       }
   },[])
   

内容的提问来源于stack exchange，提问作者benjamin_nmn