ReactVR获取当前URL及从Express路由传递变量的问题

一、为什么window.location.pathname显示UUID而非实际路径？ #

ReactVR应用默认运行在隐藏的内部iframe中，你看到的UUID路径是ReactVR框架内部的资源加载路径，并非浏览器地址栏的实际URL。直接访问window.location拿到的是iframe自身的路径，自然和期望不符。

解决路径获取问题的两种方案： #

方案1：利用ReactVR内置的urlParams

ReactVR的组件会自动接收urlParams props，用来获取URL上的查询参数。比如你把实际路径作为查询参数传递：

http://localhost:3001/vr?path=/vr

然后在组件里直接获取：

export default class view_react_vr extends React.Component {
  state = { room: this.props.urlParams.path } // 直接从props拿查询参数

  // ... 其他代码不变
}

方案2：通过宿主页面postMessage传递路径

如果需要获取浏览器地址栏的原始路径（比如/vr），可以在Express渲染的宿主页面（即嵌入ReactVR的页面）中，通过postMessage把路径传给ReactVR的iframe：

1. 宿主页面（Express渲染的HTML/模板）：

<iframe id="vr-app" src="/vr"></iframe>
<script>
  const vrIframe = document.getElementById('vr-app');
  // 等待iframe加载完成后发送消息
  vrIframe.onload = () => {
    vrIframe.contentWindow.postMessage(
      { currentPath: window.location.pathname },
      '*' // 生产环境建议替换为具体的域名
    );
  };
</script>

2. 在ReactVR组件中监听消息：

componentDidMount() {
  // 监听来自宿主页面的消息
  window.addEventListener('message', (event) => {
    if (event.data.currentPath) {
      this.setState({ room: event.data.currentPath }, () => {
        // 更新状态后再和Socket.IO通信
        const socket = io('http://localhost:3001/');
        socket.emit('updateState', this.state);
      });
    }
  });

  // ... 其他Socket.IO逻辑
}

二、Express.js向ReactVR传递变量的实用建议 #

根据你的场景，推荐三种常用方案：

方案1：URL查询参数传递 #

在Express路由中，把变量拼接成查询参数加到ReactVR的访问URL上：

// Express路由示例
const path = require('path');

app.get('/vr', (req, res) => {
  // 这里可以从数据库、请求参数或其他逻辑中获取变量
  const customRoomId = 'user-room-123';
  // 直接渲染ReactVR的入口页面，并拼接查询参数
  res.redirect(`/vr/index.html?room=${customRoomId}`);
});

然后在ReactVR组件中通过this.props.urlParams.room拿到变量。

方案2：模板引擎注入+postMessage传递 #

如果变量需要保密或者不想暴露在URL中，可以通过Express的模板引擎（比如EJS、Pug）把变量注入到宿主页面，再通过postMessage传给ReactVR：

1. Express路由：

app.get('/vr', (req, res) => {
  const secretRoomId = 'private-room-456';
  // 渲染宿主页面并传递变量
  res.render('vr-host', { roomId: secretRoomId });
});

2. 宿主页面（EJS模板）：

<iframe id="vr-app" src="/vr"></iframe>
<script>
  const roomId = '<%= roomId %>'; // 从Express模板注入变量
  const vrIframe = document.getElementById('vr-app');
  
  vrIframe.onload = () => {
    vrIframe.contentWindow.postMessage({ room: roomId }, '*');
  };
</script>

3. ReactVR组件中监听消息（同前面方案2的代码）。

方案3：Socket.IO直接推送变量 #

利用Socket.IO的握手机制，在用户连接时直接把变量推送给ReactVR客户端：

1. Express+Socket.IO服务器端：

const session = require('express-session');
const sharedsession = require('express-socket.io-session');

// 先配置Express session
const expressSession = session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true
});

app.use(expressSession);

// 让Socket.IO共享session
io.use(sharedsession(expressSession, {
  autoSave:true
}));

// Express路由中存储变量到session
app.get('/vr', (req, res) => {
  req.session.roomId = 'socket-room-789';
  res.sendFile(path.join(__dirname, 'vr-build', 'index.html'));
});

// Socket.IO连接时推送变量
io.on('connection', (socket) => {
  // 从session中获取变量并推送给客户端
  socket.emit('initRoom', { roomId: socket.request.session.roomId });
});

2. ReactVR组件中接收变量：

componentDidMount() {
  const socket = io('http://localhost:3001/');
  
  socket.on('initRoom', (data) => {
    this.setState({ room: data.roomId }, () => {
      socket.emit('updateState', this.state);
    });
  });

  // ... 其他Socket.IO逻辑
}

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