ThingsBoard教程（十六）：制作RPC部件

前言

各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是

• ThingsBoard教程（一）：ThingBoard介绍及安装
• ThingsBoard教程（二）：租户，租户配置，部件组模块的使用
• ThingsBoard教程（三）：系统设置模块的使用
• ThingsBoard教程（四）：规则链简介与操作
• ThingsBoard教程（五）：客户，资产管理
• ThingsBoard教程（六）：设备管理
• ThingsBoard教程（七）：模拟设备遥测
• ThingsBoard教程（八）：自定义UI
• ThingsBoard教程（九）：前端架构分析
• ThingsBoard教程（十）：前端初级定制化
• ThingsBoard教程（十一）：部件库的入门知识
• ThingsBoard教程（十二）：部件库中使用echarts
• ThingsBoard教程（十三）：部件的基本API解释
• ThingsBoard教程（十四）：部件库基本JS函数API解释，及变量的使用，显示
• ThingsBoard教程（十五）：部件库的点击事件

上一篇我们讲解了tb的静态组件的开发， 有关事件的控制，本篇文章我们来聊聊 在tb部件库中使用 RPC

RPC部件效果展示

先来看下效果图

部件展示效果

通讯结果

RPC部件库开发

创建部件 选择 Control widget 部件类型。 这个很关键。

然后进入到编辑页面

html 代码

将使用以下内容替换html页面的内容

 <form #rpcForm="ngForm" (submit)="sendCommand()">
      <div class="mat-content mat-padding" fxLayout="column">
        <mat-form-field class="mat-block">
          <mat-label>RPC method</mat-label>
          <input matInput required name="rpcMethod" #rpcMethodField="ngModel" [(ngModel)]="rpcMethod"/>
          <mat-error *ngIf="rpcMethodField.hasError('required')">
            RPC method name is required.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="mat-block">
          <mat-label>RPC params</mat-label>
          <input matInput required name="rpcParams" #rpcParamsField="ngModel" [(ngModel)]="rpcParams"/>
          <mat-error *ngIf="rpcParamsField.hasError('required')">
            RPC params is required.
          </mat-error>
        </mat-form-field>
        <button [disabled]="rpcForm.invalid || !rpcForm.dirty" mat-raised-button color="primary" type="submit" >
          Send RPC command
        </button>
        <div>
          <label>RPC command response</label>
          <div style="width: 100%; height: 100px; border: solid 2px gray" [innerHTML]="rpcCommandResponse">
          </div>
        </div>
      </div>
    </form>

这里使用的angular的语法 配合material组件 来布局一个表单。

javascript 代码

将以下内容写入javascript的面板中

self.onInit = function() {

    self.ctx.$scope.sendCommand = function() {
        var rpcMethod = self.ctx.$scope.rpcMethod;
        var rpcParams = self.ctx.$scope.rpcParams;
        var timeout = self.ctx.settings.requestTimeout;
        var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ? true : false;

        var commandObservable;
        if (oneWayElseTwoWay) {
            commandObservable = self.ctx.controlApi.sendOneWayCommand(rpcMethod, rpcParams, timeout);
        } else {
            commandObservable = self.ctx.controlApi.sendTwoWayCommand(rpcMethod, rpcParams, timeout);
        }
        commandObservable.subscribe(
            function (response) {
                if (oneWayElseTwoWay) {
                    self.ctx.$scope.rpcCommandResponse = "Command was successfully received by device.<br> No response body because of one way command mode.";
                } else {
                    self.ctx.$scope.rpcCommandResponse = "Response from device:<br>";                    
                    self.ctx.$scope.rpcCommandResponse += JSON.stringify(response, undefined, 2);
                }
                self.ctx.detectChanges();
            },
            function (rejection) {
                self.ctx.$scope.rpcCommandResponse = "Failed to send command to the device:<br>"
                self.ctx.$scope.rpcCommandResponse += "Status: " + rejection.status + "<br>";
                self.ctx.$scope.rpcCommandResponse += "Status text: '" + rejection.statusText + "'";
                self.ctx.detectChanges();
            }

        );
    }

}

Settings schema 配置

{
    "schema": {
        "type": "object",
        "title": "Settings",
        "properties": {
            "oneWayElseTwoWay": {
                "title": "Is One Way Command",
                "type": "boolean",
                "default": true
            },
            "requestTimeout": {
                "title": "RPC request timeout",
                "type": "number",
                "default": 500
            }
        },
        "required": []
    },
    "form": [
        "oneWayElseTwoWay",
        "requestTimeout"
    ]
} 

Data key settings schema

{
    "schema": {
        "type": "object",
        "title": "Settings",
        "properties": {
            "oneWayElseTwoWay": {
                "title": "Is One Way Command",
                "type": "boolean",
                "default": true
            },
            "requestTimeout": {
                "title": "RPC request timeout",
                "type": "number",
                "default": 500
            }
        },
        "required": []
    },
    "form": [
        "oneWayElseTwoWay",
        "requestTimeout"
    ]
} 

做完这些后就能看到部件的效果了

这里显示的太小了。我们点击右上角的 全屏图标就能放大，显示正常。