乘以 io.on("connection")

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);
   });
 },
...

但是debug之后发现客户端没有什么问题

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 })
    })
  }
...

乘以 io.on("connection")

Multiply io.on("connection")

node.js

express

socket.io

reactjs