Object global Verfügbar machen (WebSocket+jQuery) (solved) (HTML, CSS und Javascript)

[thread]20458[/thread]

Object global Verfügbar machen (WebSocket+jQuery) [solved]

Readers: 12

Articles: hide open all | hide show old branches

+6 replies

styx-cc

2018-05-16 17:49

User since
2006-05-20
532 articles
BenutzerIn

user image

Hallo.

Folgender Code wirft bei mir einen Fehler und ich verstehe
nicht warum das Objekt an dieser Stelle nicht (mehr) benutzbar sein soll:

Code: (dl )

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Code (html): (dl )

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> status</title> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/emn178/js-sha256/master/src/sha256.js"> </script>
                 
  <script>
      function WebSocketAuth(ws) {
                this.wss = ws;
                
                this.send2 = function(msg) {
                    var d = new Date(); 
                    var nonce = d.getTime();                    

                    var secret = 'secret';                      
                    var sig      = sha256(secret + nonce);

                    var json = JSON.stringify({ "message":msg, "nonce":nonce, "sig":sig });     
                    this.wss.send(json);
                };
        }

        var wss = new WebSocket('ws://181.174.166.70:3000/echo');
        var wsa = new WebSocketAuth( wss );

        $(function () {
          $('#msg').focus();
          
          var log = function (text) {
            $('#log').val( $('#log').val() + text + "\n");
          };
          
          wss.onopen = function () {
            log('Connection opened.');
          };

          wss.onmessage = function (msg) {
            var res = JSON.parse(msg.data);
            log('[' + res.hms + '] ' + res.text); 
          };
        });

        $(function () { wsa.send2( 'test' ); });

        $(function( ) {
        $('#msg').keydown(function (e) {
                if (e.keyCode == 13 && $('#msg').val()) {       
                        var msg  = $('#msg').val();     
                        wsa.send2( msg );
                        $('#msg').val('');
            }
          });
        }); 
  </script>

  <script>
        wsa.send2( 'test' );
  </script>

  </head>
  <body>
        <div >
                <p><input type="text" id="msg" />
                <textarea id="log" readonly></textarea></p>  
        </div>
</body>
</html>

Zeile 46 und 60 werden nicht ausgeführt, Zeile 51 hingegen schon. (wsa.send2( 'test' );)

Ich hab den entsprechenden WebsocketServer aufgesetzt, der Code sollte lauffaehig sein.

Leider sind meine JavaScript-Kenntnisse mäßig und ich weiß nicht so recht wonach ich suchen soll. Alles was ich zu Objekten und Scope finde, laesst mich darauf schließen, das dass so funktionieren müsste.

Ziel ist es, quasi die Methode send des Websocket-Objects mit send2 der WebSocketAuth-Klasse zu überschreiben und anschließend überall nutzen zu können um z.B. zu subscriben.

Lieben Gruß
Last edited: 2018-05-16 17:52:29 +0200 (CEST)

Pörl.

+5 replies
rosti

2018-05-16 18:55

User since
2011-03-19
2828 articles
BenutzerIn

$(function... ist die Kurzform für $(document).ready(function() { ... });

Du hast davon mehrere, warum, wozu!? Und: Wann bzw. bei welchem Ereignis tritt denn der Fehler auf?

Also ich denke, Du solltest zunächst den Code mal aufräumen. Dann Stück für Stück aufbauen und ausführen. Prüfe ob die Objekte erstellt werden, hilfreich ist hierzu auch die console.

MfG
- +4 replies
- styx-cc
  
  2018-05-16 19:22
  User since
  2006-05-20
  532 articles
  BenutzerIn
  Quote
  Du hast davon mehrere, warum, wozu!?
  
  Gute Frage, ich war der Meinung es so hier kopiert zu haben, allerdings ist es dort ebenfalls nur ein Mal vorhanden.
  
  Den Part habe ich ausgebessert:
  
  Code: (dl )
  
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
  
  <script> function WebSocketAuth(ws) { this.wss = ws; this.send2 = function(msg) { var d = new Date(); var nonce = d.getTime(); var secret = 'secret'; var sig = sha256(secret + nonce); var json = JSON.stringify({ "message":msg, "nonce":nonce, "sig":sig }); this.wss.send(json); }; } var wss = new WebSocket('ws://181.174.166.70:3000/echo'); var wsa = new WebSocketAuth( wss ); $(function () { $('#msg').focus(); var log = function (text) { $('#log').val( $('#log').val() + text + "\n"); }; wss.onopen = function () { log('Connection opened.'); }; wss.onmessage = function (msg) { var res = JSON.parse(msg.data); log('[' + res.hms + '] ' + res.text); }; // wsa.send2( "test" ); $('#msg').keydown(function (e) { if (e.keyCode == 13 && $('#msg').val()) { var msg = $('#msg').val(); wsa.send2( msg ); $('#msg').val(''); } }); }); </script>
  
  Die Objekte werden erstellt, Sie werden ja über das input auch erfolgreich benutzt (Zeile 46), die auskommentierte Zeile 41 hingegen funktioniert nicht.
  Ich vermute ja was in Richtung Closure und Scope oder so, stehe aber auf dem Schlauch.
  
  Hier kann man sich das auch angucken, ich würde beim Aufrufen der Seite erwarten, dass in der textarea 'test' nach dem 'Connection opened' steht.
  http://181.174.166.70/
  Last edited: 2018-05-16 19:32:45 +0200 (CEST)
  Pörl.
  - +3 replies
  - GwenDragon
    
    2018-05-16 19:36
    User since
    2005-01-17
    14280 articles
    Admin1
    
    Code: (dl )
    
    1 2 3
    
    Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. at WebSocketAuth.send2 (http://181.174.166.70/:27:13) at http://181.174.166.70/:63:6
    
    meckert mein Vivaldi.
    Last edited: 2018-05-16 19:39:12 +0200 (CEST)
    die Drachin, Gwendolyn
    
    Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
    - +2 replies
    - styx-cc
      
      2018-05-16 19:51
      
      User since
      2006-05-20
      532 articles
      BenutzerIn
      
      Dein Vivaldi ist mir äußerst sympathisch.
      ~~Wo finde ich auch einen?~~ - Ach, das ist ein Browser...
      
      Code: (dl )
      
      setTimeout(function(){ wsa.send2( "test" ); }, 3000);
      
      Funktioniert.
      
      Vielen Dank euch!
      Last edited: 2018-05-16 20:03:32 +0200 (CEST)
      Pörl.
      - GwenDragon
        
        2018-05-16 20:02
        
        User since
        2005-01-17
        14280 articles
        Admin1
        
        https://vivaldi.com/blog/snapshots/
        die Drachin, Gwendolyn
        
        Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel

View all threads created 2018-05-16 17:49.