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

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

<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'));
});

而且工作正常。当我从URL转到/videocall时，将路由到我的VideoCall组件。

但是，仅当我进入/api/videocall时，客户端才连接到套接字服务器，而当我进入/videocall时，客户端才连接到套接字服务器。

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

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

最佳答案

因此，我终于设法使它起作用。

这是我的方法。

我将套接字代码写在了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生命周期方法中编写了connect方法。所以现在我只有在走/videocall路线时才连接。

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

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