javascript - 简单的 Web 开发概念我找不到关于 +update 的任何信息

Question

• 假设我们有一个只有一个元素的网络应用程序，例如一张图片 IMG1，如果用户点击它，它将变为另一张图片 IMG2 (此更改应仅对点击并触发事件的用户可见)。
• 然后，我有另一个事件在总共 100 个用户点击图像时触发(或任何其他后端相关事件)，这次我想将图像动态更改为 IMG1(但现在我希望更改发生并且对网站的所有用户可见)。 当我意识到对于这两个事件，函数是相同的(更改该 HTML img 元素的 src)但我希望它具有不同的效果时，困惑就开始了:
  • 在用户点击事件时仅为该用户更改它。
  • 在不涉及特定用户的外部事件中，将其更改为让所有用户看到相同的图像。 这是如何运作的？是什么使得仅影响本地用户(对他们的操作)的 HTML 更改和具有全局影响(对所有用户)的更改之间存在差异。

更新!!!

我应该更具体地说明我不知道的事情。 我熟悉 AJAX 请求并且我已经对后端进行了排序。

在前端脚本中，我有一个来自后端的事件监听器，我所有的问题实际上都是关于在事件监听器被触发之后“做什么以及如何做”。

现在，当发生这种情况时，我想做的是进行一些更改，主要的更改是为所有用户将图像 IMG1 更改为 IMG2(因为这将动态更新到网站)还有:

我需要该更改是永久性的，因此在用户重新加载页面或新用户进入的情况下，他们都应该仍能看到 IMG2。 (图像唯一会改变的时候是前端脚本上的事件监听器将在同一后端事件上再次触发以再次更改图像(例如 IMG3)。并且是的，在这个例子中没有用户更改图像的“点击”请求，所以请忽略我在更新之前的例子。

现在为了回答您的问题，我检查了网络套接字的内容，如果我对所有套接字运行图像的“事件发生”更改，它似乎正在做我需要的事情。现在只剩下 2 个问题:

1) 这个发生在所有socket上的改变图片的改变是不是永久的，所以在用户重新加载页面或者新用户进来的情况下，他们都会看到新的图片( IMG2) 作为对网页的永久更改？

2) 关于这些类型的永久更改，reactJs 不是一种动态进行此类更改的方法吗？ 如果在那个事件监听器(用于后端事件)上我只是简单地忽略所有网络套接字并运行相同的更改图像 src 的代码，实际会发生什么？

2.5) 因为从我的 Angular 来看，后端中的事件在没有任何特定用户输入的情况下触发，因此不与任何用户相关联。因此，如果我只是在没有 websockets 的情况下在该事件上运行代码它应该完全不做任何事情(所以对任何人都没有改变) 或 为所有用户做改变(仅作为网页的动态更新)。这是如何工作的？

我期待着您的回答，在此先感谢您!!!

Answer 1

点击事件需要通过 AJAX 请求处理，向服务器发送消息，服务器将处理并响应。根据响应，为用户执行第一类事件。

在服务器端你需要在某个地方有一个事件队列，也许在数据库中。如果您使用 WebSockets ，那么如果通过 WebSocket channel 满足请求，您将必须为所有用户执行第二种类型的事件。如果您不使用 WebSockets，则需要执行 polling从浏览器。无论如何，您将需要服务器端的计数器来确定何时满足第二种类型的事件。

编辑

是的，WebSockets 是可行的方法，除非有充分的理由不这样做，比如老板说他或她不希望服务器使用 WebSockets。使用 WebSockets，您可以在服务器和客户端浏览器之间建立一个实时 channel 。您可以使用此 channel 将 URL 更改发送到客户端。另一方面，客户端必须使用 Javascript 处理更改，收集要更改 src 的标签并更改它们。如果您碰巧为所有此类标签设置了一个 changable 类，则可以使用这样的 function 来执行更改:

function changeSources(newSrc) {
    var items = document.getElementsByClassName("changable");
    for (var index = 0; index < items.length; index++)
        items[index].src = newSrc;
}

但是，此更改将仅对最初加载的加载页面和新加载的加载页面生效，这本身不会使用新的 src。所以你也必须解决这个问题。一种简洁的方法是在通过 WebSocket 将新的 src 发送到客户端之前将其存储在服务器上，并将此存储的 src 用作 src 当客户端请求 HTML 时这些标签的。因此，您的问题有两部分，第一部分是更改已加载页面上的 src，第二部分是使更改永久化。

ReactJS 是一个框架。此时我们需要定义技术背景，因为 ReactJS 将使用这些可能的解决方案。

网络套接字

https://www.npmjs.com/package/react-websocket

这是一个 WebSocket 实现。这里最好的技术背景是使用 WebSockets，除非有充分的理由不这样做。

服务器通知系统

https://www.npmjs.com/package/react-notifications

服务器通知系统一般都是单程票路。服务器可能会发送通知，但客户端没有这种可能性。

轮询

浏览器可能会定期向服务器发送 HTTP 请求，这样它就可以接收到 src 更改响应。如果 WebSockets 和服务器通知系统不是一个选项，这是一个很好的解决方案。

永久帧

您可以使用一个不可见的 iframe 永远加载，这将为您提供从服务器向客户端发送实时消息的可能性，但这是非常 hacky 的。