如何在var变量中使用app.listen实现Forge多端Viewer视图同步？

问题根源 #

你把socket.io的初始化逻辑嵌套在了app.listen的回调里，这会导致服务器启动回调触发时才加载socket.io，很容易出现实例化异常，是错误的写法。正确姿势是先拿到服务器实例，再单独初始化socket.io，别搞嵌套。

正确代码结构 #

先确保已经安装依赖：npm install express socket.io，然后用下面的代码替换你的核心片段：

// 先引入所有需要的依赖
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const PORT = process.env.PORT || 3000;

// 创建HTTP服务器实例，把express的app传进去
var server = http.createServer(app);

// 初始化socket.io并关联到服务器，解决跨域问题
var io = new Server(server, {
  cors: {
    origin: "*", // 开发阶段放开所有跨域，上线要改成你的前端域名
    methods: ["GET", "POST"]
  }
});

// 处理socket连接逻辑
io.on('connection', function (socket) {
  console.log('有客户端连进来了:', socket.id);

  socket.on('disconnect', function () {
    console.log('客户端断开连接:', socket.id);
  });

  socket.on('join', function (data) {
    socket.join(data.modelView);
    console.log(`客户端 ${socket.id} 加入房间: ${data.modelView}`);
  });

  socket.on('leave', function (data) {
    socket.leave(data.modelView);
    console.log(`客户端 ${socket.id} 离开房间: ${data.modelView}`);
  });

  socket.on('statechanged', function (data) {
    // 把视图状态推送给同房间里除自己之外的所有客户端
    socket.to(data.modelView).emit('newstate', data.state);
  });
});

// 最后启动服务器
server.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

关键修改说明 #

• 改用http.createServer(app)创建服务器实例，这是socket.io官方推荐的标准写法，彻底避免嵌套回调的坑。
• 提前引入socket.io，确保服务器启动前就完成初始化。
• 加了CORS配置，解决前后端跨域问题，开发阶段用通配符就行，上线记得改成你实际的前端域名。
• 补了连接/断开的日志，方便调试的时候看状态。

Forge前端配合要点 #

要实现视图同步，两端的前端代码得这么改：

1. 引入socket.io客户端：直接用CDN就行，在页面里加 <script src="/socket.io/socket.io.js"></script>，或者npm安装后导入。
2. 连接到你的Node.js服务器：const socket = io('http://localhost:3000');
3. 加入同一个房间（建议用模型ID当房间名，确保只有同模型的客户端同步）：socket.emit('join', { modelView: '你的模型ID' });
4. 演示端监听相机变化，把状态发给服务器：

   viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, () => {
     const state = viewer.getState();
     socket.emit('statechanged', { modelView: '你的模型ID', state: state });
   });
   

5. VR端接收服务器推送的状态，更新自己的Viewer：

   socket.on('newstate', (state) => {
     viewer.restoreState(state);
   });
   

测试步骤 #

1. 跑npm install express socket.io装依赖
2. 启动Node.js服务
3. 分别打开演示端和VR端页面，加载同一个模型
4. 在演示端拖动相机，看VR端是不是同步跟着变

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