Node.js - 在事件中添加相同代码块的正确方法

Question

我将 Node.Js 与 Express 和 Express HBS（Handlebars）一起使用。对于用户实时同步，我使用 Socket.IO。

假设我编写了一个网络聊天代码，每次有人点击发送消息按钮时，我都会从客户端向服务器发出一个事件。接下来，服务器将接收此事件并向所有其他客户端发出一个新事件，用我们的第一个用户发送的最后一条消息更新每个人。

由于我们都希望少一些杂乱无章并尽可能有条理，我想要一个包含我的新消息框架的模板文件。但在那之后我不明白我要做什么。我的第一个想法是渲染这个模板：

• 来自客户端，通过 Socket.IO 发送数据。
• 或者从服务端通过Socket.IO将呈现的html发回给客户端。

但就我的研究而言，这似乎不是可推荐的方法。

我想避免的是：

• 客户端 JS 代码中的 HTML 骨架内联从 Socket.IO 接收新消息。
• 每个人都在收到来自 Socket.IO 的信息后向服务器（例如 ajax 请求）请求相同的消息，表明它是可用的。如果我有 10,000 个用户发送和接收消息怎么办？
• 我们将代码块放在<script></script> 中，将其放入 js 中，并在需要时将其放在 DOM 中的正确位置。我目前找到的最佳方法，但是如果我需要很多这种东西怎么办？我不喜欢我可以在我的 DOM 末尾有很多块代码，以防万一我可以抓住它并使用它，可能也可能没有。
• 每次发送消息时重新加载整个页面。

实际上，我目前的项目不是聊天，但我以此为例。请记住，我想在事件中添加到 DOM 的代码块可能比聊天消息更繁重。

你对这一切有什么看法？

Answer 1

您可以做的是将模板作为字符串发送，编译并存储为模板（在某些地图中）。然后当有新消息进来时，您只需要传入数据即可获取 html 内容，然后您可以将其设置为 innerHtml 到您想要的位置的某个 div。

如果您需要我的想法，我会说堆栈可能是个问题。您希望在您的应用程序中实现一种反应性的感觉，但要以您的 api 为代价，因为它会不断编译这些模板以将其作为 html 发送给您的各种客户端。

另一个需要考虑的坏影响是那些 html 在发送到各种客户端时往往很重，而仅发送更改的数据则很轻。

最好的方法是使用最适合您需要的这种反应性的客户端框架。像 React 这样的库/框架将允许您管理事件，并使用客户端上可用的组件显示新数据。您只需要发送有关事件的数据，例如发件人信息和内容。

在车把网站上查看此页面，指定最适合车把的套装。 https://handlebarsjs.com/installation/when-to-use-handlebars.html