node.js - 在 React 和 Node 中使用 Route Handler

问题描述

/videocall当有人在我的应用程序的React 端访问时，我试图显示一个组件。

<BrowserRouter>
  <Route path="/videocall" component={VideoCall} />
</BrowserRouter>

这是某人如何通过从不同组件单击按钮来到达该路线的方法。

<Link to='/videocall'>
  Go to Video Call
</Link>

直到这里它工作正常。我可以看到我的新VideoCall组件。

但我还希望在我的应用程序的Node/Express端使用这个路由处理程序，这样我就可以启动一个Socket.io服务器。

由于 React 和 Express 渲染不同，所以 express 不知道如何处理/videocall.

我正在使用它，如下所示。

const socketIO = require('socket.io');

module.exports = (app, server) => {
  app.get('/api/videocall', (req, res) => {
    const io = socketIO(server);
    io.on('connection', (socket) => {
      console.log('User connected');

      socket.on('message', (msg) => {
        console.log(msg);
      });

      socket.on('disconnect', () => {
        console.log('User disconnected');
      });
    });
  });
}

我正在使用通配符路由匹配，它将index.html像这样呈现默认文件：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

它工作正常。/videocall当我从URL转到时，我会被路由到我的VideoCall组件。

但是客户端只有在我去的时候才连接到套接字服务器，/api/videocall而不是在我去的时候/videocall。

我该如何解决这个问题，因为我希望客户端在VideoCall从前端的不同组件转到组件时连接到套接字服务器，如下所示：

<Link to='/videocall'>
  Go to Video Call
</Link>

标签： node.jsreactjsexpresssocket.io

所以，我终于设法让它工作了。

这就是我的做法。

index.js我在我的文件中而不是在任何路由处理程序中编写了我的套接字代码。

const socket = require('socket.io');

const PORT = process.env.PORT || 5000;
const server = app.listen(PORT);

const io = socket(server);

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('message', (msg) => {
    console.log(msg);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

在我的 VideoCall 组件中，我在componentDidMount生命周期方法中编写了我的连接方法。所以现在我只有在走那条/videocall路线时才连接。

import io from 'socket.io-client';
var socket;

class VideoCall extends Component {
  componentDidMount() {
    socket = io('http://localhost:5000');
  }
}

node.js - 在 React 和 Node 中使用 Route Handler

问题描述

解决方案

推荐阅读