Question

因此，当前我正在尝试实现以下效果：当用户单击按钮时，它会向计数器添加+1，然后当另一个用户连接时，计数器的计数不是从0开始而是从1开始。

但是现在发生的是，当我与第一个用户加入时，我单击了10次，然后与另一个用户加入并单击按钮，它再次从0开始而不是从10开始。换句话说，计数器在分开计数用户点击，但不是所有用户总数。

这是我的server.js：

var user = 0;
var totalClicksFromOneUser = 0;
io.on('connection', (socket) => {

    socket.on('buttonClicked', (data) => {
        totalClicksFromOneUser = data.totalClicks;
        io.emit('clicksCountFromUsers', {
            clicks: totalClicksFromOneUser
        });
    });

    io.emit('totalClickedTimes', {
        clicks: totalClicksFromOneUser
    });

    io.emit('totalUsers', {
        usersCount: user = user + 1
    });

    socket.on('disconnect', () => {
        io.emit('userdc', {
            usersCount: user = user - 1
        });
    });
});

index.html：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <h1 id="usersCount"></h1>
    <button id="clicker">CLICK ME</button>
    <p id="totalClicks"></p>

    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

    <script src="/socket.io/socket.io.js"></script>
    <script>

        var socket = io();
        var clicks = 0;

        socket.on('connect', function(data){
            console.log("You're connected");
        });

        socket.on('totalUsers', function(data){
            $('#usersCount').text(data.usersCount);
        });

        socket.on('userdc', function(data){
            $('#usersCount').text(data.usersCount);
        });

        $('#clicker').on('click', function(){
            socket.emit('buttonClicked', {
                totalClicks: clicks = clicks + 1
            });
        });

        socket.on('clicksCountFromUsers', function(data){
            $('#totalClicks').text(data.clicks);
        });

        socket.on('totalClickedTimes', function(data){
            $('#totalClicks').text(data.clicks);
        });

        socket.on('disconnect', function(){
            console.log("User disconnected");
        });

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

Answer 1

您仅在此处将屏幕上的文本设置为初始值

socket.on('clicksCountFromUsers', function(data){
    $('#totalClicks').text(data.clicks);
});

您不会以任何方式初始化clicks变量，因此它将保持为零。更改为

socket.on('clicksCountFromUsers', function(data){
    $('#totalClicks').text(data.clicks);
    clicks = data.clicks;
});

它会保存收到的状态。

由于您将最终值发送到服务器并存储了该值，而不是在服务器上计算并保留该值，因此该代码可能仍会重置为最后一个单击器的状态。

Socket.io获得所有用户的总点击次数

1 个答案: