在React和Node中使用路由处理程序

Question

当有人转到我的应用程序的/videocall响应端时，我试图显示一个组件。

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

下面是如何通过单击不同组件的按钮进入该路径的方法。

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

在此之前一切都很顺利。我可以看到我的新VideoCall组件。

但是，我也希望在我的应用程序的节点/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>

Answer 1

所以，我终于成功了。

我就是这么做的。

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