Socket.IO一旦功能不正常

时间:2014-08-04 09:02:22

标签: javascript node.js socket.io

我的目的是使用Node.js + Socket.IO制作聊天应用程序,但我遇到了一个困难。 问题是minus事件无法正常工作(结果:64 - 12 = 65),但plus事件正常(结果:42 + 23 = 65)。 也许问题的原因与socket.once()功能有关......但我不清楚答案。

以下是我简化的Node.js应用程序的源代码。

app.js:

var http = require('http');
var fs = require('fs');
var socketio = require('socket.io');

var app = http.createServer(function (req, res) {
    if (req.url === '/') {
        fs.readFile(__dirname + '/index.html', function (err, result) {
            if (err)
                throw err;

            res.writeHead(200, {
                'Content-Type': 'text/html'
            });
            res.end(result);
        });
    } else {
        res.writeHead(404);
        res.end();
    }
});

app.listen(3000, function () {
    console.log('The server running on port 3000.');
});

var io = socketio(app);
io.on('connection', function (socket) {
    socket.on('plus', function (param) {
        socket.emit('result', param.a + param.b);
    });

    socket.on('minus', function (param) {
        socket.emit('result', param.a - param.b);
    });
});

的index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="http://cdn.socket.io/socket.io-1.0.6.js"></script>
        <script>
            var socket = io();

            socket.emit('plus', {
                a: 42,
                b: 23
            });

            socket.once('result', function (result) {
                var div = document.createElement('div');
                div.innerText = '42 + 23 = ' + result;
                document.body.appendChild(div);
            });

            socket.emit('minus', {
                a: 64,
                b: 12
            });

            socket.once('result', function (result) {
                var div = document.createElement('div');
                div.innerText = '64 - 12 = ' + result;
                document.body.appendChild(div);
            });
        </script>
    </head>
    <body>
    </body>
</html>

结果:

42 + 23 = 65
64 - 12 = 65

感谢。

2 个答案:

答案 0 :(得分:2)

因为你在'result'同时绑定了两个事件回调。

<script>
    var socket = io();

    socket.emit('plus', {
        a: 42,
        b: 23
    });

    socket.once('result', function (result,obj) {
        var div = document.createElement('div');
        div.innerText = '42 + 23 = ' + result;
        document.body.appendChild(div);

        socket.emit('minus', {
            a: 64,
            b: 12
        });
        socket.once('result', function (result,obj) {
            var div = document.createElement('div');
            div.innerText = '64 - 12 = ' + result;
            document.body.appendChild(div);
        });
    });
</script>

答案 1 :(得分:1)

你不能像这样重载“一次”结果 - 它们都是立即被绑定而不是同步。正确的方法是对不同类型的结果使用两个单独的事件。

这是一个经过修改的app.js

var http = require('http');
var fs = require('fs');
var socketio = require('socket.io');

var app = http.createServer(function (req, res) {
    if (req.url === '/') {
        fs.readFile(__dirname + '/index.html', function (err, result) {
            if (err)
                throw err;

            res.writeHead(200, {
                'Content-Type': 'text/html'
            });
            res.end(result);
        });
    } else {
        res.writeHead(404);
        res.end();
    }
});

app.listen(3000, function () {
    console.log('The server running on port 3000.');
});

var io = socketio(app);
io.on('connection', function (socket) {
    socket.on('plus', function (param) {
        socket.emit('plus result', param.a + param.b);
    });

    socket.on('minus', function (param) {
        socket.emit('minus result', param.a - param.b);
    });
});

和相应的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="http://cdn.socket.io/socket.io-1.0.6.js"></script>
        <script>
            var socket = io();

            socket.on('plus result', function (result) {
                var div = document.createElement('div');
                div.innerText = '42 + 23 = ' + result;
                document.body.appendChild(div);
            });

            socket.once('minus result', function (result) {
                var div = document.createElement('div');
                div.innerText = '64 - 12 = ' + result;
                document.body.appendChild(div);
            });

            socket.emit('plus', {
                a: 42,
                b: 23
            });

            socket.emit('minus', {
                a: 64,
                b: 12
            });

        </script>
    </head>
    <body>
    </body>
</html>