Question

假设我们有一个仅包含一个元素的网络应用，例如图像 IMG1 ，如果用户单击它，它将更改为另一图像 IMG2 （此更改仅对单击并触发事件的用户可见。）

然后，我有另一个事件，当共有100个用户单击该图像时触发该事件（或任何其他与后端相关的事件），这次我想将图像动态更改为 IMG1 （但现在我希望更改能够进行并且对网站的所有用户可见）。当我意识到这两个事件的功能都相同（更改该HTML img元素的src）但我希望它产生不同的效果时，混乱就开始了：

在用户单击的情况下，仅对该用户进行更改。

在不涉及特定用户的外部事件上，更改所有用户以查看同一图像。这是如何运作的？是什么造成了HTML更改（仅影响本地用户（在其操作上））与具有全局影响（对所有用户）的更改之间的区别？

更新!!!

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

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

现在，发生这种情况时，我想做的是进行一些更改，主要是将所有用户的图像IMG1更改为IMG2（因为这是对该网站），而且：

我需要使更改永久化，因此，在用户重新加载页面或有新用户进入的情况下，他们所有人仍然应该看到IMG2。（并且唯一会更改图像的时间是，例如，前端脚本上的事件侦听器将在同一后端事件上再次触发，以再次更改图像（至IMG3）。例如是的，在此示例中，用户没有“点击”请求来更改图像，因此在更新之前，请忽略我的示例。

现在要解决您的问题，我检查了Web套接字的内容，如果我对所有套接字运行“事件”图像更改，它似乎正在执行我需要的工作。现在只剩下两个问题：

1）这种在所有套接字上发生的用于更改图像的更改是否将是永久的，因此在用户重新加载页面或新用户进入的情况下，他们都会看到新图像（ IMG2）作为对网页的永久更改？

2）关于这些永久性更改类型，reactJs是否是动态进行此类更改的方法？如果在那个事件侦听器（用于后端事件的）上，我将简单地忽略所有Web套接字内容并运行相同的代码来更改图像的src，那会发生什么呢？

2.5）因为从我的角度来看，后端事件在没有任何特定用户输入的情况下触发，因此未与任何用户链接。因此，如果我只是在没有websockets的情况下在该事件上运行代码，则它要么完全不执行任何操作（所以对任何人都没有更改） 或 为所有用户执行更改（仅作为网页的动态更新）。如何运作？

我期待着您的答复，并在此先谢谢大家！！

Answer 1

每个用户的前端（在浏览器或移动应用程序中运行）（本地）和后端（可以在其中在所有用户之间共享数据）之间可能有所不同。

例如，可以通过firebase来实现。这是一个示例：Firebase - Multiple users simultaneously updating same object using its old value

显然，这并不意味着后端数据总是共享的。在许多情况下，每个用户都访问自己的后端数据副本，该副本存储在数据库中。

Answer 2

click事件需要由AJAX请求处理，向服务器发送消息，服务器将处理该事件并做出响应。响应后，将为用户执行第一种事件。

在服务器端，您需要在某个位置（可能在数据库中）有一个事件队列。如果您使用的是WebSockets，那么如果通过WebSocket通道满足了请求，则必须为所有用户执行第二种事件。如果您不使用WebSockets，则需要从浏览器执行polling。无论如何，您将需要在服务器端使用一个计数器来确定何时遇到第二种事件。

编辑

是的，除非有充分的理由不这样做，否则WebSockets是必经之路，就像老板说他或她不希望服务器使用WebSockets。使用WebSocket，您可以在服务器和客户端浏览器之间建立实时频道。您可以使用此通道将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用作这些标记的src时使用客户端请求HTML。因此，您的问题有两个部分，第一部分是更改已加载页面上的src，第二部分是使更改永久生效。

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

WebSocket

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

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

服务器通知系统

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

服务器通知系统通常是单程票道。服务器可以发送通知，但是客户端没有这种可能性。

投票

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

永远帧

您可以永久使用不可见的<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom" style="margin-bottom : 0px;"> <div class="container-fluid" ng-controller = "NavController">  <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <span ng-show="userCart.cart_size>0" style="color:orange">({{userCart.cart_size}}) </span><i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="#page-top">XYZ IoT</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="hidden"> <a href="#/main#page-top"></a> </li> <li class="page-scroll"> <a href="#/main#portfolio">Products</a> </li> <li class="page-scroll"> <a href="#/main#about">About</a> </li> <li class="page-scroll"> <a href="#/main#contact">Contact</a> </li>  <li ng-if="!userInfo.authorization"> <a href="#/login">Login</a> </li> <li ng-if="userInfo.authorization"> <a href="#/mydevices">My Devices</a> </li> <li ng-if="userInfo.authorization"> <a href="#/main" ng-click = "logout()">Logout</a> </li> </ul> </div> </div>  </nav>进行加载，这将使您有可能将实时消息从服务器发送到客户端，但这非常不便。

简单的Web开发概念，我找不到+ update

2 个答案:

WebSocket

服务器通知系统

投票

永远帧