Question

我正在从事一个项目，该项目的一部分向用户显示通知。我有一个用于存储通知的对象，以及一个用于显示通知的表。通知将以正确的格式写入JSON文件，以备后用。

按照目前的情况，对象每隔x秒就会向其发送新的通知，但是实际表仅在页面重新加载后才显示新消息。

我正在寻找：

一种以编程方式每x秒刷新表中维护的数据的方法。

或：
一种类似webhooks或socket的方法，可用于将新对象直接发送到客户端。
一种每隔x秒刷新一次网页的方法，无需使用诸如nodemon之类的模块，该模块实际上会完全杀死并重置我的服务器。

JSON文件

[
  {
    "Notification": "Limit Exceeded. Event has occurred. Action needed.",
    "Time": "19:54:34",
    "Date": "Sun Oct 28 2018 "
  },
  {
    "Notification": "Limit Exceeded. Event has occurred. Action needed.",
    "Time": "19:54:34",
    "Date": "Sun Oct 28 2018 "
  }
]

JSON文件开始为空，并且已将通知记录到该文件。通知从此处拉出，并存储在一个空的通知对象中。

车把视图。

<h2 class="page-header">Notifications</h2>
<h2>{{log}}</h2>
<p>Your Latest Notifications can be Found Below.</p>

{{#if notifications}}
    <table style="width:100%" border="1">
      <tr>
        <th>Notification:</th>
        <th>Time:</th>
        <th>Date:</th>
      </tr>
        {{#each notifications}}
            <tr>
                <td>{{[Notification]}}</td>
                <td>{{Time}}</td>
                <td>{{Date}}</td>


            </tr>
        {{/each}}
    </table>
{{else}}
    <h3>No Current Notifications</h3>
{{/if}}

<form method="post" action="/test/notify" id="removeuserform">
  <button type="submit" class="btn btn-default">Reload page.</button>
</form>

当然，页面是使用以下行呈现的。

    res.render('home', {notifications: notifications});

解决方案？

我在这里研究了很多方法，也很想听听您的意见。我见过人们使用webhook，我见过人们初始化按钮单击，该按钮重定向到同一页面。我无法使用window.reload函数。我见过人们在EJS视图中放置标签，但是我正在使用把手。

当我将新项目推入该对象时，是否可以简单地刷新此通知对象中的数据？您的任何想法都将不胜感激。预先谢谢你。

Answer 1

我认为您需要关心2个部分：

1，通过套接字实时从服务器获取数据。这里有3个选项：

SocketIO或类似的Node.js包
一种服务，例如Pusher，Firebase ...
支持数据同步的数据库，例如PouchDB，Gun等

2，将数据从JavaScript对象同步到视图。这称为数据绑定。基本上，您有一个包含通知的JS对象。然后，您将该数据呈现为HTML，并将其显示给最终用户。当该JS对象更改时，您的HTML应该会自动更新。从JS对象到DOM（从模型到视图）的单向绑定。许多UI框架或库都可以在这里为您提供帮助。您可以选择一个小型工具，例如HyperApp，AppRun，Mithrill等。

如何在车把视图中刷新数据？

我正在寻找：

或：

JSON文件

车把视图。

解决方案？

1 个答案: