javascript - NodeJS socket.io 应用程序在按下按钮时卡住-6ren

javascript - NodeJS socket.io 应用程序在按下按钮时卡住

转载作者：行者123 更新时间：2023-12-01 01:15:00

24

4

我正在尝试创建一个简单的 NodeJS 排行榜，并使用 socket.io 进行客户端和服务器之间的实时连接。一切都很顺利，但是按下“增加”按钮后，页面崩溃，我必须关闭它。在页面崩溃之前，我在浏览器控制台中看不到任何错误，并且命令提示符(我运行应用程序的位置)中也没有错误。

我试图使用socket.on('increase')实现的目标是确定作为参数给出的名称是否已在表中。如果是，则替换表中另一列中的分数值，但如果不是，则向表中添加一个新行，其中包含用户名和分数。

但我不知道为什么页面崩溃了。但是，我非常确定这与 usernameForm 有关，因为当我删除它时，问题就不再出现。

index.html

<!doctype html>
<html>
  <body>
    <form id="usernameForm">
      <input type="text" id="usernameFormInput" name="usernameFormInput">
      <input type="submit" value="Submit">
    </form>
    <div id="users"></div>
    <button id="increase">Increase</button><br>
    <span id="score">0</span><br>
    <table id="leaderboard">
      <tr>
        <th>Name</th>
        <th>Score</th>
      </tr>
    </table>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();

      var playerName = "Jeff";
      var playerScore = 0;

      document.getElementById("increase").onclick = function() {
        playerScore += 1;
        document.getElementById("score").innerHTML = playerScore;
        socket.emit('increase', playerName, playerScore);
      };

      document.getElementById("usernameForm").onsubmit = function(e) {
        var newUsername = document.getElementById("usernameFormInput").value;
        socket.emit('newUser', newUsername);
        console.log("new user client");
        e.preventDefault();
      }

      socket.on('increase', function(user, score) {
        for (i = 0; i < document.getElementById("leaderboard").rows.length; i++) {
          if (document.getElementById("leaderboard").rows[i].cells[0].innerHTML == user) {
            document.getElementById("leaderboard").rows[i].cells[1].innerHTML = score;
          }
          else {
            var table = document.getElementById("leaderboard");
            var row = table.insertRow(0);
            var userCell = row.insertCell(0);
            var scoreCell = row.insertCell(0);
            userCell.innerHTML = user;
            scoreCell.innerHTML = score;
          }
        }
      });

      socket.on('newUser', function(name) {
        playerName = name;
        console.log("new user client cb");
      });

      socket.on('updateUsers', function(usernames) {
        document.getElementById('users').innerHTML = Object.values(usernames);
      });
    </script>
  </body>
</html>

app.js

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

var usernames = [];
var userScore = {};

var isUsernameTaken = function(data) {
    for (var i = 0; i <= Object.keys(usernames).length; i++) {
        console.log("loop entered");
        if(data == usernames[i]) {
          console.log("Username '" + data + "' is taken.")
          return true;
        } else {
          console.log("Username '" + data + "' is not taken.");
          usernames.push(data);
          updateUsers();
          return false;
        }
    }
}

var updateUsers = function() {
    io.emit('updateUsers', usernames);
    console.log(usernames);
};

io.on('connection', function(socket) {
  socket.on('increase', function(user, score) {
    userScore[user] = score;
    io.emit('increase', user, score);
  });

  socket.on('newUser', function(name) {
    console.log("new user server");
    if ( isUsernameTaken(name) ) {
      console.log("username taken");
    }
    else {
      console.log("new user server loop");
      usernames.push(name);
      io.emit('newUser', name);
    }
  });
});

http.listen(4000, function(){
  console.log('listening on *:4000');
});

我对冗长的代码表示歉意，但是当我尝试维护 MCVE 时，我还需要包含所有相关的代码以找到问题的根源。

最佳答案

事件发射器是同步的。看起来 .emit('increase' 同步触发 socket.on('increase') ，因此创建了一个导致网页崩溃的无限循环。尝试执行 socket .once(如果受支持)，或者在第一次触发后删除 socket.on('increase' 事件监听器，如果这修复了页面，那么您就知道这就是原因.

关于javascript - NodeJS socket.io 应用程序在按下按钮时卡住，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54846214/

24

4

0

文章推荐： python - 双向搜索

文章推荐： rpm - 如何检测 RPM 是源 rpm 还是二进制 rpm？

文章推荐： jquery - 单击按钮时添加和删除 css 类

文章推荐： python - 使用不在 pandas 中的向量化逻辑来过滤帧

node.js - socket.io - socket.emit, socket.on, socket.send
基于 socket.io 的官方网站 http://socket.io/#how-to-use , 我找不到任何术语。socket.emit 、 socket.on 和 socket.send 之间有
sockets - lua-socket : unix domain sockets?
我正在使用 lua-socket 3.0rc1.3(Ubuntu Trusty 附带)和 lua 5.1。我正在尝试监听 unix 域套接字，我能找到的唯一示例代码是 this -- send std
sockets - socket.emit() 与 socket.send()
这两者有什么区别？我注意到如果我在一个工作程序中从 socket.emit 更改为 socket.send ，服务器无法接收到消息，虽然我不明白为什么。我还注意到，在我的程序中，如果我从 sock
sockets - socket 可靠吗？
使用套接字在两台服务器之间发送数据是个好主意，还是应该使用 MQ 之类的东西来移动数据。我的问题:套接字是否可靠，如果我只需要一次/有保证的数据传输？还有其他解决方案吗？谢谢。最佳答案套接字
sockets - 被动和主动 socket
引自 this socket tutorial : Sockets come in two primary flavors. An active socket is connected to a
sockets - 如何绕过 socket ？
我已经安装了在端口81上运行的流服务器“Lighttpd”(light-tpd)。我有一个C程序，它使用套接字api创建的服务器套接字在端口80上监听http请求。我希望从客户端收到端口80上的请
sockets - socket 未正确关闭的原因？
这是我正在尝试做的事情: 当有新消息可用时，服务器会将消息发送给已连接的客户端。另一方面，客户端在连接时尝试使用send()向服务器发送消息，然后使用recv()接收消息，此后，客户端调用close(
sockets - socket.io动态发送和接收消息
如何将消息发送到动态 session 室，以及当服务器收到该消息时，如何将该消息发送到其他成员所在的同一个 session 室？ table_id是房间，它将动态设置。客户: var table_i
sockets - 如何使用NodeJS将监听一个端口的WebSocket连接到监听另一个端口的Net socket？
这是我尝试但不起作用的方法。我可以将传入的消息从WebSocket连接转发到NetSocket，但是只有NetSocket收到的第一个消息才到达WebSocket后面的客户端。 const WebSo
sockets - 如何使用升压冲洗 socket
我正在实现使用boost将xml发送到客户端的服务器。我面临的问题是缓冲区不会立即发送并累积到一个点，然后发送整个内容。这在我的客户端造成了一个问题，当它解析xml时，它可能具有不完整的xml标记(不
sockets - Nginx权限被拒绝连接到.socket
尝试使用Nginx代理Gunicorn套接字。 /etc/systemd/system/gunicorn.service文件 [Unit] Description=gunicorn daemon Af
sockets - 多个连接Lua socket
我正在使用Lua套接字和TCP制作像聊天客户端和服务器这样的IRC。我要弄清楚的主要事情是如何使客户端和服务器监听消息并同时发送它们。由于在服务器上执行socket:accept()时，它将暂停程序，
sockets - 具有自定义负载平衡功能的ZMQ socket
我看了一下ZMQ PUSH/PULL套接字，尽管我非常喜欢简单性(特别是与我现在正在通过UDP套接字在系统中实现的自定义碎片/ack相比)，但我还是希望有自定义负载平衡功能，而不是幼稚的回合-robi
javascript - Socket.io socket.emit/socket.on 不工作
我正在编写一个应用程序，其中有多个 socket.io 自定义事件，并且所有工作正常，除了这个: socket.on("incomingImg", function(data) {
sockets - socket recv() 是否强制刷新 socket send() 缓冲区？
在我的应用程序中，我向服务器发送了两条小消息(类似 memcached 的服务)。在类似 Python 的伪代码中，这看起来像: sock.send("add some-key 0") ignored
javascript - socket.io 重新连接 socket.socket.connect 不起作用
很抱歉再次发布此问题，但大多数相关帖子都没有回答我的问题。我在使用 socket.io 的多个连接时遇到问题我没有使用“socket.socket.connect”方法，但我从第一次连接中得到了反馈。
sockets - 带有非 socket.io 服务器的 Socket.io 客户端
我尝试使用 socket.io 客户端连接到非 socket.io websocket 服务器。但我做不到。我正在尝试像这样连接到套接字服务器: var socket = io.connect('ws
javascript - 已定义 Socket.io，但未定义 socket.io.sockets
我遇到了一个奇怪的问题。在我非常基本的服务器中，我有: server.listen(8001); io.listen(server); var sockets = io.sockets; 不幸的是，套
socket.io - 在sails js socket.io中使用io.socket.get
我正在使用带套接字 io 的sailsjs。帆的版本是 0.10.5。我有以下套接字客户端进行测试: var socketIOClient = require('socket.io-client');
sockets - TCP sockets 和 web sockets 的区别，再来一次
这个问题在这里已经有了答案: What is the fundamental difference between WebSockets and pure TCP? (4 个答案) 关闭 4 年前。

首页

博学

6Ren·AI

商城

javascript - NodeJS socket.io 应用程序在按下按钮时卡住