javascript - tutorial - websocket chat



Empfangen des Bildes durch Websocket (1)

Der Schwerpunkt von websockify + websock.js ist die transparente Unterstützung von Streaming-Binärdaten (mehr dazu unten). Die Daten, die Sie aus der Empfangswarteschlange erhalten, sind bereits base64-dekodiert. Das Daten-URI-Schema erwartet jedoch eine base64-codierte Zeichenfolge, sodass Sie die Bilddaten nach base64 codieren müssen. Sie können die integrierte window.btoa () verwenden, um eine binär codierte Zeichenfolge zu Base64 zu codieren:

img.src = "data:image/png;base64," + window.btoa(str);

Oder, um die Effizienz zu erhöhen, können Sie das Base64-Modul von include / base64.js verwenden, aber Sie müssen ihm ein Array von Bytes übergeben, wie Sie es von rQshiftBytes erhalten würden:

msg(ws.rQshiftBytes());

img.src = "data:image/png;base64," + Base64.encode(data);  // str -> data

In Bezug auf die Verwendung von Base64 in Websockify:

Websockify verwendet base64, um die Daten zu codieren, um Browser zu unterstützen, die Binärdaten nicht direkt unterstützen. Zusätzlich zu solchen populären Hixie-Browsern wie iOS Safari und Desktop Safari verwenden einige Browserversionen in der freien Wildbahn HyBi, aber es fehlt die binäre Unterstützung. Und leider hatten sie im Falle von Chrome auch einen WebIDL-Fehler zur gleichen Zeit, der das Erkennen der binären Unterstützung vor dem Herstellen einer Verbindung verhindert.

Die Hauptoption für WebSockets auf Opera, Firefox 3.6-5, IE 8 und 9 ist auch web-socket-js . web-socket-js unterstützt HyBi, hat aber keine binäre Unterstützung und wird dies wahrscheinlich nicht tun, da die meisten der älteren Browser, die es anvisiert, keine nativen Binärtypen (Blob und typisierte Arrays) unterstützen.

Der Marktanteil von Browsern, die HyBi- und Binärdaten unterstützen, ist derzeit ziemlich niedrig. In Zukunft wird Websockify jedoch (entweder durch Objekterkennung oder Browserversionserkennung) erkennen, ob der Browser binäre Daten unterstützt und diese Unterstützung direkt verwendet, ohne dass base64 codiert / decodiert werden muss.

Der Latenz- (und CPU-) Overhead von base64-Kodierung / Dekodierung ist ziemlich niedrig und wird normalerweise durch Netzwerklatenzen sowieso ausgewaschen. Der Bandbreiten-Overhead von base64-codierten Daten beträgt etwa 25% (dh Rohdaten werden 33% größer), aber es gibt Ihnen binäre Daten über WebSockets in praktisch allen Browsern (mit dem web-socket-js polyfill / shim) Transparent durch websockify bei Bedarf).

Ich verwende websockify , um Bilder von einem Python-Server zu einem HTML5-Canvas anzuzeigen.

Ich denke, dass es mir gelungen ist, Bilder von meinem Python-Server zu senden, aber ich kann die Bilder nicht auf meiner Leinwand anzeigen.

Ich denke, das Problem hat mit der Anzahl der Bytes zu tun, die ich auf der Leinwand anzeigen möchte, und ich glaube, ich warte nicht, bis das ganze Bild empfangen wurde und dann das Bild auf der Leinwand anzeigt.

Bis jetzt habe ich:

Die Ein-Nachrichten-Funktion. Wenn ich ein Bild MESSAGERECEIVED bekomme ich 12 MESSAGERECEIVED in der Konsole

  ws.on('message', function () {
    //console.log("MESSAGERECEIVED!")
            msg(ws.rQshiftStr());
  });

Die msg-Funktion, wo ich die Zeichenfolge erhalte, und ich versuche, sie auf der Leinwand anzuzeigen. Ich habe die Methode 12 Mal für jedes Bild aufgerufen. Das Format des Stachels ist 'xÙõKþ°pãüCY :

function msg(str) {
        //console.log(str);
        console.log("RELOAD");

        var ctx = cv.getContext('2d');
        var img = new Image();
        //console.log(str);
        img.src = "data:image/png;base64," + str;
        img.onload = function () {
            ctx.drawImage(img,0,0);
        }
    }

Irgendwelche Vorschläge, wie Sie das beheben können?





websocket