[英]Update large HTML content in realtime using Node.js and Socket.io
I am building a web application which updates the HTML content of every client's web page depending on changes made by one client, for this purpose I am using Node.js's Socket.io so far. 我正在构建一个Web应用程序,该应用程序将根据一个客户端所做的更改来更新每个客户端网页的HTML内容,为此,到目前为止,我正在使用Node.js的Socket.io。
I am using HTML5's contenteditable property to allow the client to manually edit the content of the div elements which I need to update for other clients as well. 我正在使用HTML5的contenteditable属性,以允许客户端手动编辑div元素的内容,该元素也需要为其他客户端更新。
The problem that I'm facing is that I don't understand what data to send over websockets to inform the server and, in turn, other clients of the changes made. 我面临的问题是我不了解通过websocket发送哪些数据来通知服务器以及其他客户端所做的更改。
To send the whole innerHTML on adding and removing of every character means sending huge amount of data over websockets which results in bad performance and slow speed. 要在添加和删除每个字符时发送整个innerHTML,则意味着通过websocket发送大量数据,这会导致性能下降和速度降低。 To send the appended data is not an option since we don't know at what position in the div element the data is appended or removed or edited. 发送附加数据不是一种选择,因为我们不知道数据在div元素中的什么位置被附加,删除或编辑。
Note that using the keyboard is not the only way how one client can change the HTML content of their copy of the web page. 请注意,使用键盘并不是一个客户端可以更改其网页副本的HTML内容的唯一方法。 The required div element's data is changed depending on several activities by client using javascript. 客户端使用javascript会根据一些活动来更改所需div元素的数据。
Now I need to know how can I send the exact changed information over websockets on even the slightest change to get a realtime experience. 现在,我需要知道如何才能通过websocket发送准确的更改信息,即使是最微小的更改也可以获取实时体验。
PS I intend not to use any existing modules like Share.js but suggestions are welcome. PS我打算不使用任何现有的模块,如Share.js,但欢迎提出建议。
This is not really a "question" rather a discussion and would be sort of "brainstorming" topic. 这实际上不是一个“问题”,而是一个讨论,将是“头脑风暴”主题。 As well it is pretty opinion based, as there is no specific one way of doing things talking so broad topic. 同样,它是基于观点的,因为没有一种特定的方法可以讨论如此广泛的话题。
But I will take chance, and provide my pure IMHO the way I would approach this (sorry for being so personal): 但是,我会抓住机会,并以纯正的恕我直言的方式为我提供解决方法(很抱歉如此个人化):
<ul>
with many <li>
, referencing each by index - fair enough, but what if you put new element in between? 引用HTML元素可能非常简单(选择器),但是有一个复杂性-例如,当<ul>
包含许多<li>
,按索引引用每个元素-足够公道,但是如果在两者之间放置新元素呢? That will mess up references. 那会弄乱参考。 So referencing should be unique, and fully depend on synchronised IDs that server would decide. 因此,引用应该是唯一的,并且完全取决于服务器将决定的同步ID。 You need to keep list of all references with pointer to html elements, so it is easy to access them directly. 您需要保留所有引用的列表以及指向html元素的指针,因此很容易直接访问它们。 Again this is primarily opinion based answer, and is not a small topic, it involves many fields. 同样,这主要是基于意见的答案,而且不是一个小话题,它涉及许多领域。 I think in terms "pure" and "good" approach to target, not the "fastest", there might be just much simpler solutions with some tradeoffs.. 我认为用“纯”和“好”的方法来瞄准目标,而不是“最快”的方法,可能会有更简单的解决方案,但需要权衡。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.