node-red-contrib-signalrcore/signalr-client/node.html

ASP.NET Core 3.0 SignalR In and Out nodes

<!--
  Copyright 2019 Scott Page

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- SignalR Input Node -->
<script type="text/x-red" data-template-name="signalr in">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name" />
  </div>
  <div class="form-row" id="signalr-client-row">
    <label for="node-input-client"><i class="fa fa-bookmark"></i> <span data-i18n="signalr.label.client"></span></label>
    <input type="text" id="node-input-client" />
  </div>
  <div class="form-row" style="margin-bottom:0;">
      <label><i class="fa fa-list"></i> <span data-i18n="signalr.label.responses"></span></label>
  </div>
  <div class="form-row node-input-responses-container-row">
      <ol id="node-input-responses-container"></ol>
  </div>
</script>

<!-- SignalR out Node -->
<script type="text/x-red" data-template-name="signalr out">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name" />
  </div>
  <div class="form-row">
      <label for="node-input-topic"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.topic"></span></label>
      <input type="text" id="node-input-topic" data-i18n="[placeholder]node-red:common.label.topic" />
    </div>
  <div class="form-row" id="signalr-client-row">
      <label for="node-input-client"><i class="fa fa-bookmark"></i> <span data-i18n="signalr.label.client"></span></label>
      <input type="text" id="node-input-client" />
  </div>
  <div class="form-tips">
      <p><span data-i18n="[html]signalr.tip.topic"></span></p>
  </div>
</script>

<script type="text/javascript">

(function() {

  function sr_label() {
      var clientNodeId = this.client;
      var clientNode = RED.nodes.node(clientNodeId);
      return this.name || (clientNode ? '[sr] ' + clientNode.label() : 'signalr');
  }

  function sr_validateclient() {
    return RED.nodes.node(this.client) != null;
  }

  RED.nodes.registerType('signalr in', {
      category: 'network',
      defaults: {
          name: { value: '' },
          client: { type: 'signalr-client', validate: sr_validateclient },
          responses: { value: [], validate: function(v) {
              var isValid = v.length > 0;
              v.forEach(response => {
                if (!response.methodName || response.methodName.length <= 0) isValid = false;
              });
              return isValid;
            }
          },
          outputs: { value: 1 }
      },
      color: 'rgb(215, 215, 160)',
      inputs: 0,
      outputs: 3, // 3 known - connected, errors, disconnected - then ...responses
      icon: 'white-globe.svg',
      labelStyle: function() {
          return this.name ? 'node_label_italic' : '';
      },
      label: sr_label,
      outputLabels: function(index) {
        if (index == 0) return "Connected";
        if (index == 1) return "Errors";
        if (index == 2) return "Disconnected";
        return this.responses[index - 3].methodName;
      },
      paletteLabel: 'ASP.NET 3.0 SignalR Input',
      oneditprepare: function() {
        const container = $('#node-input-responses-container');
        function resizeItem(row) {
          var newWidth = row.width();
          row.find('.red-ui-typedInput').typedInput('width', newWidth - 130);
        };
        container.css('min-height', '300px');
        container.css('min-width', '450px');
        container.editableList({
          addItem: function(row, index, item) {
            $('<div/>',{ style: 'display:inline-block; text-align:right; width:120px; padding-right:10px; box-sizing:border-box;' }).text('Method').appendTo(row);
            var field = $('<input/>', { class: 'node-input-response-method-name', type: 'text', value: item.methodName }).appendTo(row);
          },
          resizeItem,
          removable: true,
          sortable: true
        });
        if (!this.responses) this.responses = [];
        container.editableList('addItems', this.responses);
      },
      oneditsave: function() {
        var node = this;
        var items = $('#node-input-responses-container').editableList('items');
        node.outputs = items.length + 3;
        node.responses = [];
        items.each(function(index, item) {
          var method = {
            methodName: item.find('.node-input-response-method-name').val()
          };
          node.responses.push(method);
        });
      },
      oneditresize: function (size) {
        var height = size.height;
        var rows = $('div[class^="node-input-responses-container-row"');
        rows.each((index, row) => height -= $(row).outerHeight(true));
        var editorRow = $('.node-input-operation-container-row');
        height -= (parseInt(editorRow.css('marginTop')) + parseInt(editorRow.css('marginBottom')));
        $('#node-input-responses-container').editableList('height', height);
      }
  });

  RED.nodes.registerType('signalr out', {
      category: 'network',
      defaults: {
          name: { value: '' },
          topic: { value: '' },
          client: { type: 'signalr-client', validate: sr_validateclient }
      },
      color:"rgb(215, 215, 160)",
      inputs:1,
      outputs:0,
      icon: "white-globe.svg",
      align: "right",
      labelStyle: function() {
          return this.name ? 'node_label_italic' : '';
      },
      label: sr_label,
      paletteLabel: 'ASP.NET 3.0 SignalR Output',
  });

  RED.nodes.registerType('signalr-client', {
      category: 'config',
      defaults: {
        host: { value: 'localhost', required: true },
        port: { value: '443', required: true },
        hub: { value: 'hub', required: true },
        secure: { value: 'true', required: true },
        reconnectInterval: { value: 3000, required: true, validate: function(v) {
            var interval = parseInt($('#node-config-input-reconnectInterval').val());
            if (isNaN(interval)) return false;
            return interval >= 100;
          }
        }
      },
      inputs:0,
      outputs:0,
      label: function() {
        var portLabel = this.port === '80' ? '' : ':' + this.port;
        if (this.secure) portLabel = this.port === '443' ? '' : ':' + this.port;
        return `${this.secure ? 'https://' : 'http://'}${this.host}${portLabel}/${this.hub} \(${this.reconnectInterval} ms\)`;
      }
  });

})();
</script>

<!-- SignalR Client configuration node -->
<script type="text/x-red" data-template-name="signalr-client">
  <div class="form-row">
      <label for="node-config-input-host"><i class="fa fa-server"></i> <span data-i18n="signalr.label.host"></span></label>
      <input id="node-config-input-host" type="text" placeholder="example.com" />
  </div>
  <div class="form-row">
      <label for="node-config-input-port"><i class="fa fa-sign-in"></i> <span data-i18n="signalr.label.port"></span></label>
      <input id="node-config-input-port" type="text" placeholder="80" />
  </div>
  <div class="form-row">
      <label for="node-config-input-hub"><i class="fa fa-train"></i> <span data-i18n="signalr.label.hub"></span></label>
      <input id="node-config-input-hub" type="text" placeholder="hub" />
  </div>
  <div class="form-row">
    <label for="node-config-input-secure"><i class="fa fa-lock"></i> <span data-i18n="signalr.label.secure"></span></label>
    <input id="node-config-input-secure" type="checkbox" style="display: inline-block; width: auto; vertical-align: top;">
  </div>
  <div class="form-row">
    <label for="node-config-input-reconnectInterval"><i class="fa fa-clock-o"></i> <span data-i18n="signalr.label.reconnectInterval"></span></label>
    <input id="node-config-input-reconnectInterval" type="text" placeholder="3000" />
  </div>
  <div class="form-tips">
      <p><span data-i18n="[html]signalr.tip.host"></span></p>
      <p><span data-i18n="[html]signalr.tip.payload"></span></p>
      <p><span data-i18n="[html]signalr.tip.reconnectInterval"></span></p>
  </div>
</script>

<script type="text/x-red" data-help-name="signalr in">
  <p>ASP.NET Core 3.0 SignalR input node</p>
  <h3>Outputs</h3>
    <dl class="message-properties">
      <dt>errors <span class="property-type">object</span></dt>
      <dd>the errors generated by the SignalR HubConnection</dd>
      <dt>1..n <span class="property-type">object</span></dt>
      <dd>each configured server response method name will have it's own output</dd>
    </dl>
    <h3>Details</h3>
      <p>Each configured server response method name will have it's own corresponding output.
      The <code>msg.payload</code> from the response method name will be send to the respective output with that method name.</p>
</script>

<script type="text/x-red" data-help-name="signalr out">
  <p>ASP.NET Core 3.0 SignalR output node.</p>
  <h3>Inputs</h3>
    <dl class="message-properties">
      <dt class="optional">topic <span class="property-type">string</span></dt>
      <dd>the server method name to invoke</dd>
      <dt>payload <span class="property-type">array</span></dt>
      <dd>the parameters of the server method</dd>
    </dl>
    <h3>Details</h3>
      <p><code>msg.payload</code> is used as the parameters of the invoked method 
      and must be an array, even if the server method requires zero parameters or one parameter.</p>
      <p>The JavaScript spread operator, <code>...msg.payload</code>, is used to convert the array in <code>msg.payload</code> into 
      the parameters for the method to be invoked.</p>
      <p>The topic used can be configured in the node or, if left blank, can be set
      by <code>msg.topic</code>.</p>
</script>

<script type="text/x-red" data-help-name="signalr-client">
  <p>Connects a ASP.NET Core 3.0 SignalR client to the specified URL.</p>
</script>