在 WebSocket 上发送填充数据答案

【问题标题】：Sending filler data on WebSocket在 WebSocket 上发送填充数据
【发布时间】：2016-07-10 08:41:30
【问题描述】：

我有 JavaScript 通过 WebSocket 连接在窗口上发送我的鼠标坐标。

var webSocket = new WebSocket('ws:// ...');
$(window).mousemove(function (evt) {
    webSocket.send(evt.pageX + ' ' + evt.pageY);
});

然后，我的后端 PHP 只是监听这些坐标并将光标位置发送给所有连接的人。

//whenever someone sends coordinates, all users connected will be notified
foreach ($webSocket->getUsers() as $user)
    $user->send($xpos . ' ' . $ypos);

JavaScript 获取这些数字并根据该点移动一个红色方块。

//when PHP notifies a user, the square is updated in position
$('.square').css({
    left: xpos,
    top: ypos
});

最终产品如下所示：

现在的问题是它非常滞后，但我找到了解决这个问题的方法。我为 JavaScript 添加了一个间隔——它只是每 50 毫秒发送一次填充数据。

setInterval(function() {
    webSocket.send('filler data');
}, 50);

出乎意料的是，这个变化让它变得更加顺畅：

我注意到左侧（鼠标从中移动的位置）总是平滑的，我猜是因为左侧窗口总是发送数据，所以连接保持平滑而右边的窗口只接收数据。

我试过了：

$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($socket, SOL_SOCKET, TCP_NODELAY, 1);
var_dump(socket_get_option($socket, SOL_SOCKET, TCP_NODELAY));

输出为int(-1)，我的应用程序中似乎仍然存在Nagle 算法。

有点相关，Does setting TCP_NODELAY affect the behaviour of both ends of the socket?，这可能是 JavaScript 故意延迟数据包的问题？

为什么发送东西会更顺畅？
有什么方法可以加快速度，而不必发送无用的数据？

【问题讨论】：

我认为问题是当您在移动鼠标时发送更多数据，可能每秒发送 1000 个鼠标事件，这使得 1000Hz，但 50ms 将其限制为 20Hz，这是一个巨大的数据传输差异，TCP_NODELAY 是与操作系统缓冲有关，如果您将其设置在服务器端，它将影响从服务器推送（数据）到浏览器的延迟

标签： javascript php websocket

【解决方案1】：

您的问题与Nagle's Algorithm 有关：小数据包正在相互等待。

使用socket_set_option()禁用这个设置的TCP_NODELAY选项

关于您的编辑，您是绝对正确的。客户端是这里的问题，因为尽管您可以在浏览器中使用 javascript，但例如，Windows 系统确实有一个注册表设置，默认情况下在 tcp 上启用 Nagle。

【讨论】：

【解决方案2】：

很遗憾，这是一个客户端问题。

使用注册表编辑器（Start Orb -> Run -> regedit），我们可以启用 TCPNoDelay 以及设置 TcpAckFrequency。

Computer\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\Tcpip\Parameters\Interfaces\

此外，我还没有发现使用上下文更改 SOCK_STREAM 上的 TCP_NODELAY 是可能的或相关的。

在当前情况下，我刚刚决定确认（ACK）服务器发送的每个数据包。我知道这会牺牲带宽来换取延迟。

webSocket.onmessage = function(evt) {
    webSocket.send(''); //empty, but still includes headers
    dispatch(evt);
}

【讨论】：