JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script>

	   <h2>WebSocket Application Messaging Protocol - Beispielimplementierung</h2>
	   <table>
	   	<tr>
	   		<td><b>An Topic "msg" anmelden / abmelden:</b></td>
	   		<td colspan="2"><button id="btnSubscribeToggle" style="width: 100%;background-color:lightgreen;">Anmelden</button></td>
	   	</tr>
	   	<tr>
	   		<td><b>Nachricht an Topic "msg" senden:</b></td>
	   		<td> <input type="text" id="msg1" style="width: 100%;" name="txt_msg1" value="Dies ist ein Test!" /></td>
	   		<td><button onclick="publishEvent();" style="width: 100px;">Senden</button></td>
	   	</tr>
	   	<tr>
	   		<td><b>Ausrechnen (RPC):</b></td>
	   		<td><input type="text" id="val1" name="txt_val1" value="3" /> + <input type="text" id="val2" name="txt_val2" value="7" /></td>
	   		<td><button style="width: 100px;" onclick="calc();">Ausrechnen</button></td>
	   	</tr>
	   </table>
	   <br/><b>Ausgabe:</b><br/>
	   <textarea id="output" rows="10" cols="90"></textarea>
	   <br/><b>Draggable-Element:</b>
	   <div id="draggable" class="ui-widget-content">
	    <p>Bewegt sich bei allen verbundenen Clients synchron.</p>
	   </div>

CSS

body {font-family: 'Open Sans', arial, serif;} #draggable { width: 150px; height: 100px; padding: 0.5em; background: grey; position: absolute; left: 8; top: 405px;}

JavaScript

var sess; // WAMP-Session-Objekt
	var output = $('#output');
	var button_input = $('button, input');
	var btnSubscribeToggle = $('#btnSubscribeToggle');
	var draggable = $('#draggable');
	var msg1 = $('#msg1');
	var val1 = $('#val1');
	var val2 = $('#val2');


$(document).ready( function(){
    alert( typeof ab );
    button_input.attr('disabled', '');	 
    ab.connect("ws://93.190.90.165:8085", // Verbindung herstellen...  
           
           function (session) // WAMP-Session erzeugt 
           {
               sess = session; //WAMP-Session-Objekt speichern
               sess.subscribe('http://localhost/move', onEvent);
               output.val("Verbindung zum Server wurde hergestellt!\n"+output.val());
               button_input.removeAttr('disabled');
               session.prefix("App", "http://localhost/Test#"); // Präfix für Aufrufe festlegen
           },
           
           function (code, reason) // WAMP-Session beendet!
           {
               output.val("Verbindung zum Server wurde getrennt!\n"+output.val());
               button_input.attr('disabled', '');
           }
    );

});

	


btnSubscribeToggle.toggle(
    
    function()
    {
        sess.subscribe('http://localhost/msg', onEvent); // Event Abonnieren - Ruft die Callback-Funktion onEvent auf, sobald ein Event ausgelöst wurde.
        btnSubscribeToggle.html("Abmelden").css("background-color", "red");
    },
    
    function()
    {
        sess.unsubscribe('http://localhost/msg'); //Event Abonnierung aufheben
        btnSubscribeToggle.html("Anmelden").css("background-color", "lightgreen");
    });

draggable.draggable(
    {
        start: function(event, ui) 
        { 
            sess.unsubscribe('http://localhost/move', onEvent); //Vom Topic Abmelden, solange das DIV bewegt wird.
        },
        
        stop: function(event, ui) 
        { 
            sess.subscribe('http://localhost/move', onEvent); //Wieder beim Topic Anmelden, wenn das DIV losgelassen wird.
...