socketio.html

<!-- socketIO config node, will aim to maintain the information for the context of nodes socketIo in and out-->
<script type="text/javascript">
    RED.nodes.registerType('socketio-config',{
        category: 'config',
        defaults: {
			port:{value:80, required:true, validate:RED.validators.number()},
            options: {value: ''},
            sendClient: {value:true},
            path: {value:"/socket.io"},
			bindToNode: {value: false}
        },
        label: function() {
            return this.bindToNode ? "socketIO server bind to Node-red" : "socketIO server at " + this.port;
        },
		oneditprepare: function() {
			$("#node-config-input-bindToNode").change(function() {
				if($(this).is(":checked")) {
					$("#node-row-bindToNode").hide();
				}
				else {
					$("#node-row-bindToNode").show();
				}
			});
			if (this.bindToNode) {
                $("#node-config-input-bindToNode").prop('checked', true);
            } else {
                $("#node-config-input-bindToNode").prop('checked', false);
            }
			$("#node-config-input-bindToNode").change();
            this.editor = RED.editor.createEditor({
                id: 'node-config-input-options-editor',
                mode: 'ace/mode/json',
                value: $("#node-config-input-options").val()
            });
        },
        oneditsave: function () {
            $("#node-config-input-options").val(this.editor.getValue());
            this.editor.destroy();
            delete this.editor;
        },
        oneditcancel: function () {
            this.editor.destroy();
            delete this.editor;
		}
    });
</script>

<script type="text/html" data-template-name="socketio-config">
    <div class="form-row">
		<input type="checkbox" id="node-config-input-bindToNode" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-config-input-bindToNode" style="width: auto"> Bind to Node-red Instance</label>
		<div id="node-row-bindToNode" class="hide">
			<label for="node-config-input-port"><i class="fa fa-terminal"></i> Port</label>
			<input type="text" id="node-config-input-port">
		</div>
    </div>
	<div class="form-row">
		<label for="node-config-input-sendClient"><i class="fa fa-share-square-o"></i> Serve client js file?</label>
		<input type="text" id="node-config-input-sendClient">
	</div>
	<div class="form-row">
		<label for="node-config-input-path"><i class="fa fa-paper-plane-o"></i> InputPath?</label>
		<input type="text" id="node-config-input-path" placeholder="/socket.io">
	</div>
	<div class="form-row">
		<label for="node-config-input-options"><i class="fa fa-file-code-o"></i> Options:</label>
        <input type="hidden" id="node-config-input-options" autofocus="autofocus">
	</div>
    <div class="form-row node-config-text-editor-row">
        <div style="height:250px;" class="node-text-editor" id="node-config-input-options-editor"></div>
    </div>
</script>

<script type="text/html" data-help-name="socketio-config">
   <p>Socket IO node</p>
   <p>VUOTO</p>
</script>

<!-- nodo socketIO in, avrà lo scopo di accogliere i client-->
<!-- che sia il caso di settare la proprietà di uscita? -->
<!-- devo validari i caratterii dei topic per evitare anche quelli vuoti -->
<script type="text/javascript">
    RED.nodes.registerType('socketio-in',{
		category:"SocketIO",
        color:"rgb(0, 230, 184)",
		defaults:{
			name:{value:""},
			server:{value:"", required:true, type:"socketio-config"},
			rules: {value:[{v:""}]}
		},
		inputs: 0,
		outputs: 1,
		icon: "bridge.png",
		label: function(){
			return this.name || "SocketIO IN";
		},
		oneditprepare: function(){
			var node = this;
			$("#node-input-rule-container").css('min-height','250px').css('min-width','450px').editableList({
				sortable: true,
                removable: true,
				addItem: function(container,i,opt) {
					if (!opt.hasOwnProperty('r')) {
                        opt.r = {v:""};
                    }
					var row = $('<div/>').appendTo(container);
					var label = $('<label/>',{for:"node-input-rule-value-"+i,style:"margin-left: 3px;"}).text("Topic " + i).appendTo(row);
					var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px;"}).appendTo(row);
					valueField.val(opt.r.v);
				}
			});
			for (var i=0;i<this.rules.length;i++) {
				var rule = this.rules[i];
				$("#node-input-rule-container").editableList('addItem',{r:rule,i:i});
			}
		},
		oneditsave: function() {
			var rules = $("#node-input-rule-container").editableList('items');
			var node = this;
			node.rules = [];
			rules.each(function(i) {
                var ruleData = $(this).data('data');
                var rule = $(this);
				var r = {};
                r.v = rule.find(".node-input-rule-value").val();
                node.rules.push(r);
            });
		}
    });
</script>

<script type="text/html" data-template-name="socketio-in">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
	<div class="form-row">
        <label for="node-input-server"><i class="fa fa-tag"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
	<div class="form-row node-input-rule-container-row">
        <ol id="node-input-rule-container"></ol>
    </div>
</script>

<script type="text/html" data-help-name="socketio-in">
   <p>Socket IO Input node</p>
   <p>Implementation of a SocketIO server</p>
   <p>This node can be used to receive socket events from a web page</p>
   <br />
   <p>This node output:</p>
   <p><code>msg.payload</code> as <i>Object</i> = event data received</p>
   <p><code>msg.socketIOEvent</code> as <i>String</i> = event type received</p>
   <p><code>msg.socketIOId</code> as <i>String</i> = socket id that generated the event</p>
   <p><code>msg.socketIOStaticProperties</code> as <i>Object</i> = User defined properties added to the socket</p>
   <br />
   <p>The user can add all the topic/event he want</p>
   <p>The predefined <code>connect/disconnect</code> etc... events are automatically implemented</p>
</script>

<!-- nodo socketIO out, avrà lo scopo di effettuare l'emit dei dati verso il server-->
<script type="text/javascript">
    RED.nodes.registerType('socketio-out',{
		category:"SocketIO",
        color:"rgb(0, 230, 184)",
		defaults:{
			name: {value:""},
			server: {value:"", required:true, type:"socketio-config"}
		},
		inputs: 1,
		outputs: 0,
		icon: "bridge.png",
		label: function(){
			return this.name || "SocketIO OUT";
		}		
    });
</script>

<script type="text/x-red" data-template-name="socketio-out">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
	<div class="form-row">
        <label for="node-input-server"><i class="fa fa-tag"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
</script>

<script type="text/x-red" data-help-name="socketio-out">
   <p>Socket IO Output node</p>
   <p>Implementation of a SocketIO server</p>
   <p>This node can be used to send socket event from a web page</p>
   <br />
   <p>This node accepts on input:</p>
   <p><code>msg.payload</code> as <i>Object</i> = event data to send</p>
   <p><code>msg.socketIOEvent</code> as <i>String</i> = event type to send</p>
   <p><code>msg.socketIOId</code> as <i>String</i> = socket id for sending option</p>
   <p><code>msg.socketIOEmit</code> as <i>String</i> = socket emit type:</p>
   <p>&nbsp;&nbsp; possibilities are :</p>
   <p>&nbsp;&nbsp;<code>broadcast.emit</code> as <i>String</i> = send to all sockets except this socket</p>
   <p>&nbsp;&nbsp;<code>emit</code> as <i>String</i> = send only to this socket</p>
   <p>&nbsp;&nbsp;<code>room</code> as <i>String</i> = send to everyone in <code>msg.room</code></p>
   <p>&nbsp;&nbsp; not defined = send to all sockets</p>
   <p><code>msg.socketIOAddStaticProperties</code> as <i>Object</i> = User defined properties to add to the socket (if already defined they will be overwriten)</p>
   <br />
</script>

<!-- node socketIO join, join a room-->
<script type="text/javascript">
    RED.nodes.registerType('socketio-join',{
		category:"SocketIO",
        color:"rgb(0, 230, 184)",
		defaults:{
			name: {value:""},
			server: {value:"", required:true, type:"socketio-config"}
		},
		inputs: 1,
		outputs: 0,
		icon: "bridge.png",
		label: function(){
			return this.name || "SocketIO JOIN";
		}		
    });
</script>

<script type="text/x-red" data-template-name="socketio-join">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
	<div class="form-row">
        <label for="node-input-server"><i class="fa fa-tag"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
</script>

<script type="text/x-red" data-help-name="socketio-join">
   <p>Socket IO Join node</p>
   <p>Implementation of a SocketIO server</p>
   <p>This node can be used to join a Socket IO room</p>
   <br />
   <p>This node accepts on input:</p>
   <p><code>msg.payload.room</code> as <i>String</i> = room to join</p>
   <br />
</script>

<!-- node socketIO leave, leave a room-->
<script type="text/javascript">
    RED.nodes.registerType('socketio-leave',{
		category:"SocketIO",
        color:"rgb(0, 230, 184)",
		defaults:{
			name: {value:""},
			server: {value:"", required:true, type:"socketio-config"}
		},
		inputs: 1,
		outputs: 0,
		icon: "bridge.png",
		label: function(){
			return this.name || "SocketIO LEAVE";
		}		
    });
</script>

<script type="text/x-red" data-template-name="socketio-leave">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
	<div class="form-row">
        <label for="node-input-server"><i class="fa fa-tag"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
</script>

<script type="text/x-red" data-help-name="socketio-leave">
   <p>Socket IO Leave node</p>
   <p>Implementation of a SocketIO server</p>
   <p>This node can be used to leave a Socket IO room</p>
   <br />
   <p>This node accepts on input:</p>
   <p><code>msg.payload.room</code> as <i>String</i> = room to leave</p>
   <br />
</script>

<script type="text/javascript">
    RED.nodes.registerType('socketio-rooms',{
       category:"SocketIO",
        color:"rgb(0, 230, 184)",
		defaults:{
			name: {value:""},
			server: {value:"", required:true, type:"socketio-config"}
		},
        inputs:1,
        outputs:1,
        icon: "bridge.png",
		label: function(){
			return this.name || "SocketIO ROOMS";
		}	
    });
</script>



<script type="text/x-red" data-template-name="socketio-rooms">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
	<div class="form-row">
        <label for="node-input-server"><i class="fa fa-tag"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
    
</script>

<script type="text/x-red" data-help-name="socketio-rooms">
    <p>A node that gives you the list of rooms in socketio</p>
    
</script>