javascript - 如何在 Javascript 中从 Vert.x 服务器接收 websocket 消息？

Question

我正在尝试使用 Java 中的 Vert.x 创建一个包含 websockets 的 http 服务器，同时在没有 vertx.js 的情况下使用 Javascript 编写客户端。我避免在客户端使用 Vert.x，因为它应该保持基于浏览器(像 browserfy 这样的工具没有成功地将 Vert.x 的 CommonJS 标准转换为浏览器可以使用的代码)。

完成服务器和客户端的测试代码后，我尝试了向服务器发送消息、获取其数据并以任意响应进行应答的简单示例。服务器收到消息并能够读取内容。但是，客户端只收到一条消息，而没有得到假定的内容。客户端无法将 websocket 接收到的事件数据转换为字符串(根本没有字符串数据？)。使用indexof.js确定事件数据的字节大小，在多次更改服务器发送的内容后，结果为 34 字节的恒定大小。我尝试在服务器端使用 writeMessage 和 write-method 将数据发送到客户端 websocket。结果保持不变。

为什么我的客户端在 websocket 上只接收到固定大小的数据以及如何让它工作？

感谢您的建议!

编辑: 我使用 writeFrame 交换方法 write 和 writeMessage。使用 writeFrame 可以发送二进制数据和纯文本。以这种方式从基于 Java 的服务器向基于 Javascript 的客户端发送文本效果很好。我仍然不知道如何在客户端处理二进制消息，但它仍然是有益的。虽然文本消息有效，但假定它们仍具有相同的大小(34 字节)。我认为接收到的数据对象的大小会有所不同，但看起来，它只是一个指向实际数据的对象。

-------------------------------------------- ----

客户端代码是在使用 Java Servlets 和 websockets 进行(成功)测试期间编写的:

var wsUri = "ws://" + document.location.host + document.location.pathname + "chat";

var websocket = new WebSocket(wsUri);
websocket.onerror = function(evt) { onError(evt) };
websocket.onopen = function (evt) { onOpen(evt) };

function onError (evt)
{
    debugMessage('<span style="color: red;">ERROR:</span> ' + evt.data);
}

function onOpen (evt)
{
//    debugMessage("Connected to " + wsUri);
    debugMessage("GOTCHA!");
}

websocket.onmessage = function (evt) { onMessage(evt) };

function onMessage (evt)
{
    debugMessage(evt.toString());
    debugMessage(evt.data.toString());
    debugMessage(sizeof(evt.data));
}

function sendMessage (msg)
{
    websocket.send(msg);
}

function sendDebugMessage ()
{
    websocket.send("Hiho Wursty!");
    debugMessage("Did send Wursty-message.");
}

服务器端是根据官方 Vert.x 文档以及另一个 another online-tutorial :

server = vertx.createHttpServer();

server.requestHandler(request -> {
    handleRequest(request);
});

server.websocketHandler(ws -> {
    print("Websocket-handshake...");
    print("path = " + ws.path());
    print("uri = " + ws.uri());
    print("localAdress = " + ws.localAddress().toString());
    print("remoteAddress = " + ws.remoteAddress());
    print(ws.toString());

    if (!ws.path().equals("/chat")) {
        ws.reject();
    } else {
        SharedData sd = vertx.sharedData();
        LocalMap<String, String> wsChatSessions =
                sd.getLocalMap("ws.chat.sessions");

        wsChatSessions.put(ws.textHandlerID(), ws.toString());

        ws.closeHandler(ch -> {
            print("Closing ws-connection to client " + ws.textHandlerID());
            wsChatSessions.remove(ws.textHandlerID());
        });

        ws.handler(new Handler<Buffer>(){
            @Override
            public void handle(final Buffer data) {
                String msg = data.getString(0, data.length());
                print("Message from ws-client " + ws.textHandlerID() 
                        + ": " + msg);
                Buffer resp = Buffer.buffer();
                resp.appendString("O Ding Dong asd asda sdasd a"
                        + "asdasd asd asdasda sdas dasd adads asd as"
                        + "as dasd asd asd asd asdasd asdasdasd "
                        + "asdasd asd asd asd asd asda sdasd asd !");
                ws.writeMessage(resp);
                ws.write(resp);
            }
        });
    }
});

server.listen(port, res -> {
    if (res.succeeded()){
        print("Listening...");
    } else{
        print("Failed to bind! -> Server is not listening"
            + " to incoming client connections.");
    }
});

Answer 1

我只收到 0 字节大小的消息的原因相对简单:在 Javascript-websocket 中，可以定义 websocket 从服务器接收的(二进制)数据的类型，binaryType。默认情况下，它设置为 "blob"。在我的例子中，我假设接收数组缓冲区。相应地设置选项使 websocket 按预期传递数据:

websocket.binaryType = "arraybuffer";

要使用它，仍然需要从arraybuffer创建一个数组。就我而言，我创建了一个无符号 8 位整数数组:

var dataBytes = new Uint8Array(evt.data);

现在数据已准备好供后续代码处理。