Question

有人在我的应用程序的反应端上访问/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>

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

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

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

在React和Node中都使用Route Handler

1 个答案: