- 假设我们有一个web应用程序只有一个元素,例如图像IMG1,如果用户单击它,它将更改为另一个图像IMG2(只有单击并触发事件的用户才能看到此更改)
- 然后,我有另一个事件,当总共100个用户点击该图像时会触发该事件(或任何其他后端相关事件),这一次我想将图像动态更改为IMG1(但现在我希望更改发生,并对网站的所有用户可见)。当我意识到这两个事件的函数是相同的(更改HTML img元素的src),但我希望它有不同的效果时,混乱就开始了:
- 在用户单击事件时,仅为该用户更改它
- 在不涉及特定用户的外部事件上,将其更改为所有用户都能看到相同的图像。这是怎么回事?只影响本地用户(对用户的操作)的HTML更改和具有全局影响(对所有用户)的更改之间的区别是什么
更新
我本应该更具体地说出我不知道的事情。我熟悉AJAX请求,并且我已经对后端进行了排序。
在前端脚本中,我有一个来自后端的事件侦听器,我所有的问题实际上都是关于触发事件侦听器后"做什么以及如何做"。
现在,当发生这种情况时,我想做的是进行一些更改,主要是将所有用户的图像IMG1更改为IMG2(因为这将是对网站的动态更新),但也包括:
我需要这种更改是永久性的,所以在用户重新加载页面或新用户进入的情况下,他们都应该仍然看到IMG2。(例如,当前端脚本上的事件侦听器在同一后端事件上再次触发以再次更改图像(到IMG3)时,图像才会发生更改是的,在这个例子中,用户没有"点击"更改图像的请求,所以忽略我在更新之前的例子
现在,为了解决您的问题,我检查了web套接字的内容,如果我对所有套接字运行图像的"on event"更改,它似乎正在做我需要做的事情。现在我只剩下两个问题:
1)所有套接字上发生的更改图像的更改是否是永久性的,因此在用户重新加载页面或新用户进入的情况下,他们都会将新图像(IMG2)视为对网页的永久更改?
2)关于这些类型的永久性更改,reactJs不是动态执行这些更改的一种方式吗?如果在事件侦听器(用于后端事件)上,我只是忽略所有的web套接字内容,并运行相同的代码来更改图像的src,实际会发生什么?
2.5)因为从我的角度来看,后端中的事件在没有任何特定用户输入的情况下触发,因此没有与任何用户链接。因此,如果我只是在没有websockets的情况下在该事件上运行代码,它应该要么什么都不做(所以对任何人都没有更改)要么为所有用户做更改(只是作为网页的动态更新)。这是怎么回事?
我期待着你们的回答,并提前感谢大家!!!
点击事件需要通过AJAX请求来处理,向服务器发送消息,服务器将处理并响应。在响应之后,为用户执行第一类型的事件。
在服务器端,您需要在某个地方(可能在数据库中)有一个事件队列。如果您正在使用WebSocket,那么如果通过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
。所以你也必须解决这个问题。一个巧妙的方法是在通过WebSocket将新的src
发送到客户端之前,将其存储在服务器上,并在客户端请求HTML时使用此存储的src
作为这些标签的src
。因此,您的问题有两部分,第一部分是更改已加载页面上的src,第二部分是使更改永久化。
ReactJS是一个框架。在这一点上,我们需要定义技术背景,因为ReactJS将使用这些技术的可能解决方案。
WebSocket
https://www.npmjs.com/package/react-websocket
这是一个WebSocket实现。这里最好的技术背景是使用WebSockets,除非有很好的理由不这样做
服务器通知系统
https://www.npmjs.com/package/react-notifications
服务器通知系统通常是单向售票通道。服务器可以发送通知,但客户端没有这种可能性。
轮询
浏览器可以周期性地向服务器发送HTTP请求,并且通过这种方式它可以接收src
改变响应。如果WebSockets和服务器通知系统不是一个选项,那么这是一个很好的解决方案。
Forever框架
您可以使用一个不可见的iframe
来永久加载,这将为您提供从服务器向客户端发送实时消息的可能性,但这非常棘手。
差异可能是在每个用户的浏览器或移动应用程序中运行的前端和后端之间,前者是本地的,后者可以在所有用户之间共享数据。
这可以通过例如firebase来实现。这里有一个例子:Firebase-多个用户同时使用其旧值更新同一个对象
显然,这并不意味着后端数据总是共享的。。。在许多情况下,每个用户都访问存储在数据库中的后端数据的自己的副本。