时间戳

首页 > 解决方案 > 简单的 Web 开发概念我在 +update 上找不到任何信息

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

问题描述

更新 ！！！

我应该对我不知道的内容更具体。我熟悉 AJAX 请求，并且已经对后端进行了排序。

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

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

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

现在为了解决您的问题，我检查了网络套接字的东西，如果我对所有套接字运行“事件”图像更改，它似乎正在做我需要的事情。现在只给我留下两个问题：

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

2）关于这些类型的永久更改，reactJs 不是动态进行此类更改的一种方式吗？如果在该事件侦听器（对于后端事件）上，我只是忽略所有 Web 套接字内容并运行相同的代码来更改图像的 src，实际上会发生什么？

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

期待大家的解答，先谢谢大家了！！！

标签： javascripthtmlreactjsweb-applications

解决方案

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

在服务器端，您将需要在某处有一个事件队列，也许在数据库中。如果您使用的是WebSockets，那么如果通过 WebSocket 通道满足请求，您将必须为所有用户执行第二种类型的事件。如果您不使用 WebSockets，则需要从浏览器进行轮询。无论如何，您需要在服务器端设置一个计数器，以便能够确定何时满足第二种类型的事件。

编辑

是的，除非有强烈的理由不这样做，否则 WebSockets 是可行的方法，比如老板说他或她不希望服务器使用 WebSockets。使用 WebSockets，您可以在服务器和客户端浏览器之间建立一个实时通道。您可以使用此通道将 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. 所以你也必须解决这个问题。一种巧妙的方法是在src通过 WebSocket 将新内容发送到客户端之前将其存储在服务器上，并在客户端请求 HTML 时将其src用作这些标签中的那些。src因此，您的问题有两个部分，第一部分是更改已加载页面上的 src，第二部分是永久更改。

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

网络套接字

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

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

服务器通知系统

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

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

轮询

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

永远的框架

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

推荐阅读