Socket.IO's一旦功能不能正常工作

Socket.IO's once function not working correctly

本文关键字：常工作能不能工作功能 IO Socket 更新时间：2023-09-26

我的目的是使用Node.js + Socket制作一个聊天应用程序。但是我遇到了一个困难。问题是，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

谢谢。

因为你在'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>

你不能像那样重载"once"结果——它们都是立即绑定的，而不是同步绑定的。正确的做法是为不同类型的结果使用两个单独的事件。

这是修改后的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>