在 Javascript 中通过 Web 套接字发送和接收二进制数据? [英] Send and receive binary data over web sockets in Javascript?

问题描述

可以在 Javascript 中通过 Web 套接字发送和接收二进制数据吗?例如，我可以使用 Web 套接字实现 SSH 客户端吗?

It is possible to send and receive binary data over web sockets in Javascript? Could I, for example, implement an SSH client using web sockets?

推荐答案

下一个草案 (hybi-07) 正在大多数浏览器中实现，它将为协议和 API 添加内置的二进制支持.

The next draft (hybi-07) of the WebSockets specification is being implemented in most browsers and it will add built-in binary support to the protocol and API.

然而，在此之前，WebSockets 有效负载被编码为 UTF-8.为了发送二进制数据，您必须使用某种方式将二进制数据编码为 UTF-8.

However, until then, WebSockets payload is encoded as UTF-8. In order to send binary data you must use some way of encoding the binary data as UTF-8.

有很多选择，但我使用过以下两个:

There are many options but here are two that I have used:

UTF-8:

您实际上可以将字节流直接编码为 UTF-8.

You can actually encode a byte stream directly to UTF-8.

要编码和解码的 python 看起来像这样:

The python to encode and decode would look something like this:

from codecs import (utf_8_encode, utf_8_decode,
                    latin_1_encode, latin_1_decode)

utf_8_encode(unicode(buf, 'latin-1'))[0]      # encode

latin_1_encode(utf_8_decode(utf8_buf)[0])[0]  # decode

在 JavaScript 中:

In Javascript:

chr = data.charCodeAt(N)  // to 'decode' at position N of the message

// Enocde array of bytes (0-255) to UTF-8
data = array.map(function (num) {
    return String.fromCharCode(num); }).join('');

UTF-8 编码注释:

UTF-8 encode notes:

• 对于在值 0-255 之间均匀分布的二进制数据，负载的大小比原始二进制数据大 50%.

• For binary data that is evenly distributed across value 0-255, then size of the payload is 50% larger than the raw binary data.

Flash WebSockets 模拟器web-socket-js 可能有问题编码为 0(零).

The Flash WebSockets emulator web-socket-js may have trouble with the encoding of 0 (zero).

Base 64:

在蟒蛇中:

from base64 import b64encode, b64decode

data = b64encode(buf)    # encode binary buffer to b64

buf = b64decode(data)    # decode b64 to binary buffer

在 Javascript 端对消息进行编码和解码:

To encode and decode the messages on the Javascript side:

data = window.btoa(msg)  // Encode to base64

msg = window.atob(data)  // Decode base64
msg.charCodeAt(N)        // Read decode byte at N

Base 64 注释:

Base 64 notes:

• 均匀分布的二进制数据 (0-255) 将比原始数据大 33%.

• Evenly distributed binary data (0-255) will be 33% larger than the raw data.

base64 编码的 Python 端开销比 UTF-8 编码少.但是，解码 base64 需要更多的 Javascript 端开销(UTF-8 不需要在 Javascript 中解码，因为浏览器已经将 UTF-8 转换为 Javascript 原生 UTF-16).

There is less python side overhead to base64 encoding than there is to UTF-8 encoding. However, there is a bit more Javascript side overhead to decoding base64 (UTF-8 doesn't need decoding in Javascript since the browser has already converted the UTF-8 to the Javascript native UTF-16).

更新:假设二进制数据编码为 UTF-8 字符串，如上所示，字符值范围为 0-255.具体来说，window.atob 不支持大于 255 的字符值.请参阅此 mozilla 错误.同样的限制也适用于 Chrome.

Update: This assumes the binary data is encoded to a UTF-8 string as shown above with character values that range from 0-255. Specifically, window.atob does not support character values above 255. See this mozilla bug. The same limitation applies to Chrome.

websockify:

WebSockify 是一个代理/桥接器，允许支持 WebSockets 的浏览器与任意二进制服务进行通信.它的创建是为了允许 noVNC 与现有的 VNC 服务器进行通信.websockify 使用二进制数据的 base64 编码/解码，还提供了一个 websock.js 库用于 Javascript.websock.js 有一个类似于常规 WebSocket 的 API，但它透明地处理二进制数据，并且旨在与 websockify 通信.免责声明:我创建了 websockify 和 noVNC.

WebSockify is a proxy/bridge that allows a WebSockets capable browser to communicate with any arbitrary binary service. It was created to allow noVNC to communicate with existing VNC servers. websockify uses base64 encode/decode of the binary data and also provides a websock.js library for use in Javascript. The websock.js has an API similar to regular WebSocket but it is handles binary data transparently and is designed to communicate with websockify. Disclaimer: I created websockify and noVNC.

ssh 客户端:

从技术上讲，您可以通过 WebSockets 实现浏览器 ssh 客户端(我已经考虑过)，但是，这需要在浏览器中进行 SSH 加密和解密，这会很慢.鉴于 WebSockets 具有加密的 WSS (TLS) 模式，通过 WebSocket WSS 执行普通 telnet 可能更有意义.

Technically you could implement a browser ssh client over WebSockets (and I've considered it), however, this will require doing SSH encryption and decryption in the browser which will be slow. Given that WebSockets has an encrypted WSS (TLS) mode, it probably makes more sense to do plain telnet over WebSocket WSS.

事实上，websockify 包含一个示例 telnet 客户端.

In fact, websockify includes an example telnet client.

你会像这样在 HOSTNAME 上启动 websockify(telnetd 来自 krb5-telnetd):

You would launch websockify on HOSTNAME like this (telnetd is from krb5-telnetd):

sudo ./websockify 2023 --web . --wrap-mode=respawn -- telnetd -debug 2023

然后导航到 http://HOSTNAME:2023/wstelnet.html?hostname=HOSTNAME&port=2023

请参阅 websockify README 了解更多信息.要使用 WSS 加密，您需要创建一个 SSL 密钥，如 noVNC 高级用法维基中所述页面

See the websockify README for more information. To use WSS encryption you will need to create an SSL key as described on the noVNC advanced usage wiki page

这篇关于在 Javascript 中通过 Web 套接字发送和接收二进制数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！