Question

我已经按如下所示设置了本地主机套接字：-

var http = require('http');
var server = http.createServer();
var socket_io = require('socket.io');

server.listen(4000);

var io = socket_io();

io.attach(server);

io.on('connection', function(socket){
    console.log("Socket connected: " + socket.id);
    socket.on('action', (action) => {
        console.log('Got data!', action.message);
        socket.emit('action', {type:'self', content:action.message});
    });
});

在react组件中，我这样做：-

import io from '../socket/connect';

class Hello extends Component {
    constructor(props){

        super(props);

        io.on('action', (data) => {
            console.log(data);
        });
    }
}

如果此路由加载1次，那么一切都非常完美：套接字提供1个控制台日志，而react页面也提供1个控制台日志。

但是，在react应用程序中，当我更改为另一条路由并返回时，现在套接字给出了1个控制台日志，而react页面给出了2条关于套接字相同消息的控制台日志...

当我更改为另一条路线并再次返回时，现在套接字给出了1个控制台日志，而react页面给出了与套接字相同消息的3个控制台日志...

我想，每当我访问此反应页面时，它都会连接到套接字+1时间，因此，即使套接字仅发出1条消息，反应页面也会执行多次。

我该如何改善？

P.S。：我还使用react-router-redux进行路线更改

带React路由器的socket.io

0 个答案: