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

【问题标题】：Socket.io getting total clicks from all usersSocket.io 获得所有用户的总点击次数
【发布时间】：2019-02-27 03:53:51
【问题描述】：

所以目前我正在尝试实现这一点，即当用户单击按钮时，它会将 +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>

【问题讨论】：

标签： javascript socket.io

【解决方案1】：

您只是在这里将屏幕上的文本设置为初始值

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

您没有以任何方式初始化 clicks 变量，因此它将保持为零。改成

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

它会保存接收到的状态。

此代码可能仍会重置为最后一个点击者所做的任何状态，因为您将最终值发送到服务器并将其存储，而不是计算并保存在服务器中的值。

【讨论】：