假设我们有一个只有一个元素的web应用程序,例如图像IMG1,如果用户单击它,它将更改为另一个图像IMG2(此更改应仅对单击并触发事件的用户可见)。
然后,我有另一个事件,当总共100个用户单击图像(或任何其他与后端相关的事件)时触发,这次我想动态地将图像更改为IMG1(但现在我希望更改发生并对网站的所有用户可见)。
当我意识到对于这两个事件,函数都是相同的(更改HTML img元素的src)但我希望它具有不同的效果时,我开始感到困惑:
在用户事件中,单击“仅为该用户更改”。
在不涉及特定用户的外部事件上,将其更改为所有用户都能看到相同的图像。
这是怎么工作的?HTML更改只在本地影响用户(在其操作上)和具有全局影响(对所有用户)之间有什么区别呢。
更新!!!
我应该对我不知道的事情说得更具体些。
我熟悉AJAX请求,并且已经对后端进行了排序。
在前端脚本中,我有一个来自后端的事件监听器,我的所有问题实际上都是关于事件监听器被触发后“做什么和如何做”。
现在,当这种情况发生时,我想做的是做一些改变,主要的一个是为所有用户将图像IMG1改为IMG2(因为这将是对网站的动态更新),但是:
我需要这种改变是永久的,所以在用户重新加载页面或新用户进入的情况下,他们都应该仍然看到IMG2。(而且图像唯一会改变的时间是前端脚本上的事件侦听器在同一个后端事件上再次触发以再次改变图像(例如IMG3)。是的,在本例中,没有“点击”请求用户更改图像,因此忽略更新前的示例。
现在为了回答你的问题,我检查了web sockets的内容,如果我将图像的“on-event”更改为所有sockets,它似乎正在做我需要的事情。我现在只剩下两个问题:
1)在所有套接字上发生的用于更改图像的更改是否是永久性的,因此在用户重新加载页面或新用户进入的情况下,他们都会将新图像(IMG2)视为对网页的永久性更改?
2)对于这些类型的永久性更改,reactJs不是动态执行这些更改的一种方式吗?
如果在那个事件监听器(对于后端事件)上,我只是忽略所有的web套接字内容并运行相同的代码来更改图像的src,那么实际会发生什么?
2.5)因为从我的角度来看,后端中的事件在没有任何特定用户输入的情况下触发,因此不会与任何用户链接。因此,如果我只是在没有websockets的情况下对该事件运行代码,那么它要么什么也不做(所以对任何人都不做更改),要么对所有用户都做更改(只是对网页进行动态更新)。这是怎么工作的?
我期待您的回答,并提前感谢大家!!!

最佳答案

click事件需要由AJAX请求处理,向服务器发送消息,服务器将处理该事件并作出响应。响应后,将为用户执行第一种类型的事件。
在服务器端,您需要在某个地方有一个事件队列,可能在数据库中。如果您使用的是WebSockets,那么如果通过WebSocket通道满足请求,则必须为所有用户执行第二种类型的事件。如果您不使用WebSockets,则需要从浏览器执行polling操作。无论如何,您需要在服务器端有一个计数器才能确定何时满足第二种类型的事件。
编辑
是的,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和服务器通知系统不是一个选项,那么这是一个很好的解决方案。
永久框架
您可以使用一个不可见的iframe来永久加载,这将为您提供从服务器向客户端发送实时消息的可能性,但这非常麻烦。

09-20 22:49