Question

每次更新页面后，我都有+1套接字连接..

module.exports = function(io, client) {
var GameController = {
   gamePage: function(req, res) {
       client.hget('games', 'game.' + req.params.id, function (err, result) {
           if (err) return result(err);
           var game = JSON.parse(result);

           io.on('connection', function (socket) {
               console.log('send');
               console.log(socket.id);
               io.emit('get_bets', game.players);
           });

           res.render('pages/game', {
               title: 'Game - ' + req.params.id,
               user: req.user,
               game: game
           });
       });
   };
return GameController;
});

路线档案：

module.exports = function(io, client) {
   var express = require('express');
   var router = express.Router();
   var GameController = require('controllers/GameController')(io, client); 
   router.get('/:id', GameController.gamePage);
   ...
   return router;
};

客户方面的反应：

var Game = React.createClass({
   getInitialState: function() {
     this.socket = io();

     return {
         bets: null
     }
   },
 socketGetBets: function() {
   var that = this;
   this.socket.on('get_bets', function(data) {
       console.log('get bets');
       that.setState({ bets: data });
   });
   this.socket.on('rand', function(data) {
       console.log(data);
   });
 },
...

但是在调试之后我发现客户端没有什么问题。

app.js文件：

var socket_io = require('socket.io');

var io = socket_io();
app.io = io;
//route
var game = require('./routes/games')(io, client);

bin / www文件：

var server = http.createServer(app);

var io     = app.io;
io.attach( server );

页面更新后，io.on（“连接”）事件在控制台显示“发送”消息，第二页更新后，我有“发送”“发送”，第三次更新 - “发送”“发送”“发送“等等。出现内存泄漏警告。控制台日志socked.id多次显示相同的值。

Answer 1

每当您致电on时，无论是io.on还是socket.on，您都会注册一个事件处理程序。在这种情况下，您可能不希望在路由中调用io.on('connection')，因为每次访问该路由时都会注册一个新的连接处理程序。这就是您在控制台中看到累积消息的原因。

事实上，您可能根本不想将快速路由与套接字功能混合在一起，因为它们是不同的协议，并且彼此独立工作。

// server side

// this should only be called once per connection.
io.on('connection', function (socket) {
  // handle socket protocol stuff.. fetching server data, sending data
  socket.on('fetch bets', function() {
    // get game.players from server       

    // updating other sockets
    io.emit('get_bets', game.players);
  })
})

app.get('/route', function (req, res) {
  // handle http protocol stuff.. fetching server data, sending data

  // send data back to caller
  res.json(data)
})

这同样适用于您客户端的socket.on。每次拨打'get_bets'时，您似乎都在添加新的socketGetBets事件处理程序。

相反，您可能希望一次注册该事件处理程序，可能在componentDidMount或componentWillMount。此外，由于套接字连接可以被视为应用程序的全局连接，因此您可以在应用程序上方创建连接。

// client side

var socket = io()

var Game = React.createClass({
  getInitialState: function() {
    return {
      bets: null
    }
  },
  componentWillMount: function() {
    var that = this
    socket.on('get_bets', function(data) {
      that.setState({ bets: data })
    })
  }
...

乘以io.on（“连接”）

1 个答案: