简体   繁体   English

在express.js路由文件中使用socket.io时出现重复

[英]Duplicates when I use socket.io in express.js route files

I have a problem with Node.JS/Socket.IO/Express.JS and i didn't find any solution. 我的Node.JS / Socket.IO / Express.JS有问题,我没有找到任何解决方案。

I use: 我用:

"express": "~4.10.6"
"socket.io": "1.2.1"

on Ubuntu Linux Ubuntu Linux上

My problem is that when I run the server and access localhost:3000/chat at the first run all works great but after a refresh/2/3/4 the messages inserted in chat duplicates. 我的问题是,当我运行服务器并在首次运行时访问localhost:3000 / chat时,所有工作都很好,但是在刷新/ 2/3/4之后,插入聊天记录中的消息重复了。 For one refresh, i have to identical message on one submit. 对于一次刷新,我必须一次提交相同的消息。 For two refreshes, I have 3 identical message and so on. 对于两次刷新,我有3条相同的消息,依此类推。 This behaviour began when i put the socket functionality in express.js routes folder. 当我将套接字功能放在express.js的路由文件夹中时,此行为开始。

PS I'm new to node.js/socket.io/express.js PS我是node.js / socket.io / express.js的新手

app.js app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var chat = require('./routes/chat');

var app = express();

// Socket IO Things

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

// END - Socket IO Things

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/chat', chat.random_function(io));



// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


 module.exports = app;


server.listen('3000');

/routes/chat.js /routes/chat.js

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

module.exports = {

    router: router,
    random_function: function(io) {

        return function(req, res){

            res.sendFile(__dirname + '/index.html');

            io.sockets.on('connection', function (socket) {

                socket.on('send message', function (data) {

                    io.sockets.emit('new message', data);

                });

            });
        }
    }


};

Client side sockets (routes/index.html) 客户端套接字 (routes / index.html)

<html>
<head>
    <title>Chat with socket.io and node.js</title>
    <style>
        #chat {
            height: 500px;
        }
    </style>
</head>

<body>
<div id="chat"></div>
<form id="chat-message" action="">
    <input size="35" id="message"></input>
    <input type="submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>

        var socket = io.connect();
        var $messageForm = $('#chat-message');
        var $messageBox = $('#message');
        var $chat = $('#chat');

        $messageForm.submit(function(e){

            e.preventDefault();
            socket.emit('send message', $messageBox.val());
            $messageBox.val("");

        });

        socket.on('new message', function(data){

            $chat.append(data + "<br>");

        });


</script>

</body>

</html>

How can I handle this problem? 我该如何解决这个问题? Thanks in advance! 提前致谢! I also checked the debugger and on server come 1/2/3/4/5 different packages each time. 我还检查了调试器,并且每次在服务器上使用1/2/3/4/5个不同的软件包。

You're creating & attaching new connection listener on each /chat request. 您将在每个/chat请求上创建并附加新的connection侦听器。 Try moving it outside of random_function and perhaps creating separate socket instance for each connection/client. 尝试将其random_function之外,并可能为每个连接/客户端创建单独的socket实例。


(Edit) code added: (编辑)代码已添加:

Try this (should work, but I didn't test it) 试试这个(应该可以,但是我没有测试)

app.js app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');
var chat = require('./routes/chat');

var app = express();

// Socket IO Things

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {

    socket.on('send message', function (data) {

        io.sockets.emit('new message', data);

    });

});

// END - Socket IO Things

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/chat', chat.random_function);

routes/chat.js 路线/ chat.js

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

module.exports = {

    router: router,
    random_function: function(req, res){
          res.sendFile(__dirname + '/index.html');
    }

};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM