Как я могу отправить двоичные данные через WebSocket с Node.js на веб-страницу?

Я пробовал отправлять Float32Array и ArrayBuffer несколькими разными способами, но буферы, которые я получаю на стороне клиента, всегда кажутся пустыми. Как мне отправить данные? Как я могу получить к нему доступ?

Вот моя последняя попытка:

server.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8000 });

wss.on('connection', function connection(ws) {

    var arr1 = new Float32Array(4);
    for (var i = 0; i < arr1.length; ++i)
        arr1[i] = (i + 100) / 7;

//    ws.send(arr1.buffer);


    var arr2 = new ArrayBuffer(8);
    for(var i = 0; i < 8; i++)
        arr2[i] = i * 17;

    ws.send(arr2);    
});

client.html

<!DOCTYPE html>
<html>
<head></head>
<body>

<script>

var gData = null;

var ws = new WebSocket("ws://192.168.0.7:8000");
ws.binaryType = 'arraybuffer';

ws.onmessage = function(message) {
    console.info(message.data);
    gData = message.data;
};

</script>

</body>
</html>

Консольный вывод

ArrayBuffer(8) {}

Кроме того, просто потому, что мне любопытно, как я могу отправить двоичные данные обратно на сервер?

Джейсон, ты решил эту проблему?

— 24.03.2021 16:12

@Derzu Я не могу точно вспомнить, но я думаю, что ответ от emax (ниже) мне достаточно помог.

— 24.03.2021 16:20

node.js websocket

02.05.2018 16:21

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

3 206

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

ArrayBuffer - это просто буфер, чтобы получить доступ к памяти, содержащейся в буфере, вам нужно использовать Посмотреть:

var arr2 = new ArrayBuffer(8);
var view = new Uint8Array(arr2);
for(var i = 0; i < 8; i++)
    view[i] = i * 17;
ws.send(arr2);

02.05.2018 20:18

Ответ принят как подходящий

Вам необходимо создать WebSocket и установить для него тип arraybuffer (binaryType = 'arraybuffer'). Я думаю, вы забыли об этом на стороне сервера.

В этом примере байты получены из информации строки base64.

    // https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer
    function base64ToArrayBuffer(base64) {
        var binary_string = Buffer.from(base64, 'base64').toString('binary');
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }    

        return bytes.buffer;
    }

    // websocket server
    const WebSocket = require("ws"); // websocket server
    const wss = new WebSocket.Server({ port: 8082 });
    console.info("WebSocket Server Started on port 8082");

    wss.binaryType = 'arraybuffer';
    const content_base64 = "c3RyZWFtIGV2ZW50"; // Place your base64 content here.
    const binaryData = base64ToArrayBuffer(content_base64);

    wss.on("connection", (ws) => {
        console.info("WebSocket sending msg");
        ws.send(binaryData);
    });

Не забудьте установить модуль npm websocket с помощью команды: