乘 io.on("连接")

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("connection") 事件在控制台中显示“send”消息，第二次页面更新后，我有“send”“send”，第三次更新 - “send”“send”“send ”等比出现内存泄漏警告。控制台日志 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。看起来您每次调用 socketGetBets 时都会添加一个新的 'get_bets' 事件处理程序。

相反，您可能希望一次注册该事件处理程序，可能在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 })
    })
  }
...