Just started to learn javascript and angular. I use the Poco library to create a server. I send the picture as follows:

int s, len; // здесь загружаю картинку из файла в буфер. char* buff = CWebSocketServer::FileToBuffer( len ); WebSocket ws( request, response ); s = ws.sendFrame( buff, len, WebSocket::FRAME_BINARY ); // 54682 передано

The client on AngularJS accepts data:

 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 байта в блобе $scope.image = window.btoa(msg.data); $scope.$apply(); }

HTML:

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

What else is missing to display the picture? Am I doing right at all?

  • Since the ws.onmessage event ws.onmessage is outside of the angular context, it does not know that the $scope.image variable has $scope.image updated. Try it after $scope.image = window.btoa(msg.data); write $scope.$apply(); . - Stepan Kasyanenko
  • $ scope. $ apply (); also used, does not help: ( - Alexis Milekhin
  • In this case, you need to look at what is contained in the src attribute of the img element. You can see in the browser console. - Stepan Kasyanenko
  • Here's a line from the console <img ng-src = "data: image / JPEG; base64, W29iamVjdCBCbG9iXQ ==" src = "data: image / JPEG; base64, W29iamVjdCBCbG9iXQ =="> == $ 0 I do not quite understand what is described here. Just started studying web - Alexis Milekhin
  • I can not say how true you have the data in base64 . To exclude the angular factor, try changing the src attribute with native JS. For example: document.getElementById('myImg').src="data:image/JPEG;base64,"+window.btoa(msg.data) . - Stepan Kasyanenko

1 answer 1

Thanks for the help. It turned out that you need to install binaryType = "arraybuffer" for the webbox. For those interested, the process is described here