S>Я к сожалению эпизодически соприкасаюсь с этими технологиями (писал UI для своего сервиса на angularjs + ws), поэтому кроме ссылок буду мало полезен. Но попробуйте тоже самое сделать без ангуляра, просто передайте клиенту картинку и попытайтесь ее отрендерить, в plain js, точь-в-точь ка на SO.

Спасибо за помощь.
Оказалось, что нужно установить для вебсокета binaryType="arraybuffer"
Кому интресно процесс описан здесь

Использую библиотеку Poco для создания сервера.
Отсылаю картинку так:

int s, len;
char* buff = CWebSocketServer::FileToBuffer( len );
WebSocket ws( request, response );
s = ws.sendFrame( buff, len, WebSocket::FRAME_BINARY ); // 54682 передано

Клиент на AngularJS принимает данные:

    var ws = new WebSocket("ws://127.0.0.1:8000/ws");
...
    ws.onmessage = function (msg) {
    console.log("Message received: " + msg.data ); // [object Blob] принят
    console.log("Message length: " + msg.data.size); // 54682 байта в блобе
    // тут начинаю пытаться перевести блоб в Base64 
    var bytes = new Uint8Array( msg.data );
    var len = bytes.length; // но почему-то получаю нулевую длину
...
    }

HTML:

<img ng-src="data:image/JPEG;base64,{{image}}">

Почему создается нулевой массив в Uint8Array ?
Правильно ли я вообще делаю?

Здравствуйте, asmcoder, Вы писали:

Вот это вот смущает:
A> var bytes = new Uint8Array( msg.data );

Похожее обсуждение на SO:
1)http://stackoverflow.com/questions/28175852/sending-a-png-image-over-a-websocket-and-rendering-the-received-image
2)http://stackoverflow.com/questions/9292133/receiving-image-through-websocket

Здравствуйте, Sharov, Вы писали:

S>Здравствуйте, asmcoder, Вы писали:

S>Вот это вот смущает:
S>A> var bytes = new Uint8Array( msg.data );

S>Похожее обсуждение на SO:
S>1)http://stackoverflow.com/questions/28175852/sending-a-png-image-over-a-websocket-and-rendering-the-received-image
S>2)http://stackoverflow.com/questions/9292133/receiving-image-through-websocket

Спасибо за ссылки, но что-то не получается. Может от того что только начал заниматься яваскриптом и AngularJS

Попробовал просто $scope.image = window.btoa(msg.data);
Консоль ошибку не выдает но и картинка не отображается.

ссылка на блоб тоже не помогла, т.к. сервер не знает как обработать такую ссылку

var blob = new Blob([msg.data], { type: 'image/jpeg' });
var url = URL.createObjectURL(blob); //http://127.0.0.1:8000/cdfafb64-614c-4aab-83f6-888f32034bed

Здравствуйте, asmcoder, Вы писали:


A>Попробовал просто $scope.image = window.btoa(msg.data);
A>Консоль ошибку не выдает но и картинка не отображается.

$scope.$apply() попробуйте. Иногда помогает.

A>ссылка на блоб тоже не помогла, т.к. сервер не знает как обработать такую ссылку
A>

A>var blob = new Blob([msg.data], { type: 'image/jpeg' });
A>var url = URL.createObjectURL(blob); //http://127.0.0.1:8000/cdfafb64-614c-4aab-83f6-888f32034bed
A>

Я к сожалению эпизодически соприкасаюсь с этими технологиями (писал UI для своего сервиса на angularjs + ws), поэтому кроме ссылок буду мало полезен. Но попробуйте тоже самое сделать без ангуляра, просто передайте клиенту картинку и попытайтесь ее отрендерить, в plain js, точь-в-точь ка на SO.