在移动Safari中的JavaScript websocket中显示阻止行为 [英] Apparent blocking behaviour in JavaScript websocket on mobile Safari
问题描述
我正在编写的应用程序是一个基于JS的客户端，实质上是一个桌面共享服务。该服务从桌面捕获图像，将其编码为base64编码的JPEG，并通过Websocket将其发送到JS客户端。然后，客户端显示这些图像（作为数据URI），用户可以将鼠标移动到图像上，并点击图像，这些鼠标事件被编码为XML中的命令，这些命令放入队列中，每15ms定时处理一次，这样，队列可以在发送到服务之前被擦除冗余或重复的命令。然后执行这些命令（在桌面上生成点击事件，移动鼠标等），并生成新的桌面图像，并继续循环。
整个系统工作非常好，除了iPad上的Safari的一些非常不一致的行为。本质上，当用户将手指移动到屏幕上时，客户端似乎阻止（或可能地排除）websocket上的传入消息，有利于仅发送传出的消息。显示的方式是，当您移动手指时，只要触摸屏幕，显示屏将不会更新，然后一旦提起手指，onMessage（）将收到大量图像更新，然后快速连续地将其动画到屏幕。
Mobile Safari是唯一以这种方式表现的浏览器，没有桌面浏览器或任何我测试的Android平板电脑似乎显示相同的行为。
我已经将登录记录到websocket上的入站和出站方法，并确认了我看到的行为。在Safari上，我会连续收到多个出站邮件，其次是许多入站邮件，而在Android上，当您将手指拖动到屏幕上时，我会看到入站和出站邮件交错，因此Android上的显示将继续更新，因为您正在拖动您的手指。
我怀疑Websocket作为罪魁祸首的主要原因是因为客户端有一个后备机制，所以如果一个浏览器没有websocket支持，一对XHR对象被创建（一个用于入站和一个用于出站），而不是使用websocket。如果我强制移动Safari使用XHR而不是Websockets，那么问题就会消失。在这种情况下，只有通信机制发生变化（用于捕获输入事件和显示图像的所有代码保持不变）。
我意识到这是一个非常具体的问题，没有代码，这将很难诊断，但是我选择不发布代码，只是由于客户端的代码量很大。
如果有人看到行为类似对于我所描述的，或者知道这个行为的任何潜在的原因，我会非常感谢你的意见。
p>根据数据包的大小，您可能会遇到大消息的问题，Safari（在iPad和桌面上）都非常慢。你尝试过桌面Safari吗？
看看此页面，以查看不同浏览器之间的性能比较。
可能是这是您的问题。
I've run into a real head-scratcher, and I was hoping someone out there could shed some light on my issue.
The application I'm writing is a JS based client for what is essentially a desktop-sharing a service. The service captures images from the desktop, encodes them, as base64 encoded jpegs and sends them over a websocket to the JS client. The client then displays these images (as data URIs), users can move the mouse over the image as well as click on the image, these mouse events are encoded as commands in XML which are put into a queue and serviced on a timer every 15ms, this way the queue can be scrubbed of redundant or duplicate commands before being sent to the service. These commands are then executed (generating click events on the desktop, moving the mouse, etc.), and new desktop images are generated and the cycle continues.
The whole system works extremely well, except for some very inconsistent behaviour on Safari on the iPad. Essentially, when the user moves their finger around the screen, the client seems to block (or possibly de-prioritize) incoming messages on the websocket, in favour of only sending outgoing messages. The way this is manifest is that as you move your finger around, the display will not appear to update as long as you are touching the screen, then once you raise your finger, a flood of image updates will be received by onMessage(), which then get animated to the screen in rapid succession.
Mobile Safari is the only browser that appears to behave in this way, none of the desktop browsers, or any of the Android tablets I've tested appear to show the same behaviour.
I've put logging into the inbound and outbound methods on the websocket, and it confirms the behaviour I've seen. On Safari, I'll get numerous outbound messages in a row, followed by numerous inbound messages, whereas on Android, I'll see the inbound and outbound messages interleaved as you drag your finger around the screen, as a result the display on Android will continue to update as your are dragging your finger around.
The main reason why I suspect the websocket as the culprit is because the client has a fallback mechanism, so that if a browser does not have websocket support, a pair of XHR objects are created (one for inbound and one for outbound) and used instead of the websocket. If I force mobile Safari to use XHR instead of websockets, the problem goes away. In this case only the communication mechanism changes (all of the code for capturing input events and displaying images stays the same).
I realize that this a pretty specific problem, and without code it will be very hard to diagnose, but I opted not to post code simply due to the sheer volume of code in the client.
If anyone has see behaviour similar to what I've described, or know of any potential reasons for this behaviour, I'd be very thankful for your input.
Depending on the size of the packets, you could face the problem of 'large' messages, being extremely slow on Safari (both on iPad and desktop). Have you tried desktop Safari?
Have a look at this page, to see comparisons of performance between different browsers.
It could be that this is your problem.
这篇关于在移动Safari中的JavaScript websocket中显示阻止行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
