Javascript 使用Socket.io、Express和Handlebar向所有用户显示新条目

当用户向数据库添加一个条目时，我希望它立即反映在用户所有打开的页面上。我正在使用带有Socket.io的Express、MongoDB和Handlebar。当User1提交一个新条目并保存到MongoDB时，位于不同浏览器的同一页面上的User2应立即在其页面上看到新条目。我已经在添加新用户时测试了连接和am控制台日志记录。它为单一客户端窗口运行，但不是向所有客户端广播

在server.js中，我正在保存用户：

// CREATE USER
app.post("/", function(req, res) {
  var randomNumbers = [];
  var min = Math.ceil(req.body.min);
  var max = Math.floor(req.body.max);

  function getRandomInt(min, max) {
    for (var i = 0; i < req.body.howMany; i++) {
      randomNumbers.push(Math.floor(Math.random() * (max - min)) + min);
    }
  };

  getRandomInt(min, max);

  // Create a new note and pass the req.body to the entry
  var newEntry = new Entry({
    name: req.body.name,
    min: req.body.min,
    max: req.body.max,
    howMany: req.body.howMany,
    numbers: randomNumbers
  });

  // And save the new note the db
  newEntry.save(function(error, data) {
    // Log any errors
    if (error) {
      console.log(error);
    }
    else {
      // Or send the document to the browser
      res.send(data);
    }
  });    
});

在/public/app.js中进行AJAX调用，然后发送数据

    // When that's done
    .done(function(data) {  
      // Log the response
      console.log(data);
      socket.emit("newuser", data);
    });
});

套接字在my main.handlebar文件中启动，并侦听添加的

<script>
    var socket = io();
    socket.on("added", function(data) {
        console.log(data);
    });
</script>

var socket=io（）；
socket.on（“添加”，函数（数据）{
控制台日志（数据）；
});

index.handlebar显示页面

  {{#each entries}}
  <div class="item">
        <span class="name"> {{this.name}} </span> <em> {{min}} : {{max}} </em>

        {{!--Maps over each number--}}
        <ul class="children">
          {{#each numbers}}
          <li> {{this}} </li>
          {{/each}}
        </ul>

       <div class="buttons">
        <button data-id={{this.id}} type="submit" class="delete button">REMOVE</button>
        <!-- Trigger/Open The Modal -->
        <button data-id={{this.id}} class="rename button">RENAME</button>

        <button data-id={{this.id}} class="updateNums button">MIN / MAX</button>
       </div>
  </div>
  {{/each}}

{{{#每个条目}
{{this.name}{{min}}:{{max}
{{！--映射到每个数字--}}

{{{#每个数字}
{{this}}
{{/每个}}

去除
改名
最小/最大
{{/每个}}

---

流程应该是这样的：

在数据库中保存条目

使用客户端需要的数据从服务器发出套接字事件

所有客户都应该监听该事件

在事件中，使用来自服务器的数据更新DOM

---

Handlebar（据我所知）不支持数据绑定，因此需要使用JavaScript更新DOM。将新条目附加到现有条目列表中。这对于实时更新非常有效，每当用户刷新页面时，他们都会得到一个完全水合的模板。

您需要使用socket.io发出事件并处理发出，以便在用户和客户端之间传递数据。查看socket.io文档了解更多信息。一旦I socket.emit，实际推动DOM更改的功能是什么？您可以参考文档了解这一点。这真的很简单。此外，您还需要使用套接字来插入数据，而不是http调用。我已经阅读了文档，但没有看到这个具体案例，是否需要进一步澄清？谢谢您的帮助。对于步骤3，这只是一个套接字。在（事件、函数（newEntry）{…将newEntry附加到DOM…}）上，我尝试将socket.emit（“新用户添加”，函数（）{console.log（“Success”）；}）添加到.done，但没有成功。

  {{#each entries}}
  <div class="item">
        <span class="name"> {{this.name}} </span> <em> {{min}} : {{max}} </em>

        {{!--Maps over each number--}}
        <ul class="children">
          {{#each numbers}}
          <li> {{this}} </li>
          {{/each}}
        </ul>

       <div class="buttons">
        <button data-id={{this.id}} type="submit" class="delete button">REMOVE</button>
        <!-- Trigger/Open The Modal -->
        <button data-id={{this.id}} class="rename button">RENAME</button>

        <button data-id={{this.id}} class="updateNums button">MIN / MAX</button>
       </div>
  </div>
  {{/each}}