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

Node.js - Proper way to add same block of code on event

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

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

由于我们都希望尽可能少地凌乱和组织，我想要一个包含我的新消息框架的模板文件。但在那之后我不明白我必须做什么。我的第一个想法是渲染此模板：

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

我想避免的是：

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

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

你对这一切有什么看法？

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

如果您需要我的想法，我会说堆栈可能是个问题。您想在您的应用程序中实现一种反应式的感觉，但要以 api 为代价，因为它会不断编译这些模板以作为 html.

发送给您的各种客户端

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

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