支持发送十六进制内容

portal/src/app/main/link-monitor/link-monitor.component.html

-<p>
-  TODO： 工作状态，数据收发量，速度
-</p>
 
-<div>
-  <textarea cols="30" rows="10" [(ngModel)]="text"></textarea>
-  <button nz-button (click)="send()">发送</button>
+<!--  TODO： 工作状态，数据收发量，速度-->
+
+<div class="send-area">
+  <textarea [(ngModel)]="text" style="resize: vertical"></textarea>
+  <div class="submit">
+    <label nz-checkbox [(ngModel)]="isHex">十六进制</label>
+    <button nz-button nzType="primary" (click)="send()">发送</button>
+  </div>
 </div>
 
-<div nz-row [nzGutter]="10">
-  <div nz-col nzSpan="12">
+<div nz-row [nzGutter]="10" class="monitor">
+  <div nz-col nzSpan="12" nzXs="24" nzSm="12">
     <div class="title">
       数据接收
     </div>
@@ -18,7 +20,7 @@
       </div>
     </div>
   </div>
-  <div nz-col nzSpan="12">
+  <div nz-col nzSpan="12" nzXs="24" nzSm="12">
     <div class="title">
       数据发送
     </div>

portal/src/app/main/link-monitor/link-monitor.component.scss

 
-.title {
+.monitor{
+  .title {
     text-align: center;
     padding: 5px;
-}
+  }
 
-.content {
+  .content {
     min-height: 200px;
     max-height: 400px;
     border: 1px solid grey;
     overflow-y: auto;
     overflow-x: hidden;
     word-break: break-all;
+  }
+}
+
+
+.send-area{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  textarea{
+    flex: 1;
+    min-height: 40px;
+    max-height: 100px;
+  }
+  .submit{
+    display: flex;
+    flex-direction: column;
+    width: 100px;
+    padding: 5px;
+  }
 }

portal/src/app/main/link-monitor/link-monitor.component.ts

 import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {ApiService} from '../../api.service';
+import {MqttService} from '../../mqtt.service';
 
 @Component({
   selector: 'app-link-monitor',
@@ -16,8 +17,8 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
 
   id: number;
   link: any;
-  ws: WebSocket;
-  interval: any;
+
+  isHex = false;
 
   text = '';
   dataRecv = [];
@@ -26,30 +27,67 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
   cacheSizeRecv = 500;
   cacheSizeSend = 500;
 
-  constructor(private routeInfo: ActivatedRoute, private as: ApiService) {
+  recvSub: any;
+  sendSub: any;
+
+  constructor(private routeInfo: ActivatedRoute, private as: ApiService, private mqtt: MqttService) {
     this.id = this.routeInfo.snapshot.params.id;
     this.load();
   }
 
   ngOnInit(): void {
+
   }
 
   ngOnDestroy(): void {
-    this.ws.close(1000, 'exit');
-    clearInterval(this.interval);
+    this.recvSub.unsubscribe();
+    this.sendSub.unsubscribe();
+  }
+
+  hex_to_buffer(hex: string): Buffer {
+    hex = hex.replace(/\s*/g, '');
+    const arr = [];
+    for (let i = 0; i < hex.length; i += 2) {
+      arr.push(hex.substr(i, 2));
+    }
+    const hexes = arr.map(el => parseInt(el, 16));
+    return Buffer.from(new Uint8Array(hexes));
   }
 
-  startHearbeat(): void {
-    this.interval = setInterval(() => {
-      this.ws.send(JSON.stringify({type: 'ping'}));
-    }, 10000);
+  buffer_to_hex(buf): string {
+    const arr = Array.prototype.slice.call(buf);
+    return arr.map(el => Number(el).toString(16)).join(' ');
+  }
+
+  subscribe(): void {
+    this.recvSub = this.mqtt.subscribe('/' + this.link.channel_id + '/' + this.id + '/recv').subscribe(packet => {
+      this.dataRecv.push({
+        data: this.buffer_to_hex(packet.payload),
+        time: new Date(),
+      });
+      if (this.dataRecv.length > this.cacheSizeRecv) {
+        this.dataRecv.splice(0, 1);
+      }
+      this.contentRecv.nativeElement.scrollTo(0, this.contentRecv.nativeElement.scrollHeight);
+    });
+
+    this.sendSub = this.mqtt.subscribe('/' + this.link.channel_id + '/' + this.id + '/send').subscribe(packet => {
+      this.dataSend.push({
+        data: this.buffer_to_hex(packet.payload),
+        time: new Date(),
+      });
+      if (this.dataSend.length > this.cacheSizeSend) {
+        this.dataSend.splice(0, 1);
+      }
+      this.contentSend.nativeElement.scrollTo(0, this.contentSend.nativeElement.scrollHeight);
+    });
   }
 
   load(): void {
     this.as.get('link/' + this.id).subscribe(res => {
       this.link = res.data;
-      // TODO 检查在线状态
-      this.monitor();
+
+      this.subscribe();
     });
   }
 
@@ -58,43 +96,13 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
   }
 
   send(): void {
-    console.log('send', this.text);
-    this.ws.send(JSON.stringify({type: 'send', data: this.text}));
-  }
-
-  monitor(): void {
-    this.ws = new WebSocket('ws://127.0.0.1:8080/api/monitor/' + this.link.channel_id + '/' + this.id);
-
-    this.ws.onopen = e => {
-      console.log('Connection open ...');
-      // ws.send("{}");
-      this.startHearbeat();
-    };
-
-    this.ws.onmessage = e => {
-      console.log('Recv: ' + e.data);
-      const obj = JSON.parse(e.data);
-      switch (obj.type) {
-        case 'recv':
-          this.dataRecv.push(obj);
-          if (this.dataRecv.length > this.cacheSizeRecv) {
-            this.dataRecv.splice(0, this.dataRecv.length - this.cacheSizeRecv);
-          }
-          this.contentRecv.nativeElement.scrollTo(0, this.contentRecv.nativeElement.scrollHeight);
-          break;
-        case 'send':
-          this.dataSend.push(obj);
-          if (this.dataSend.length > this.cacheSizeSend) {
-            this.dataSend.splice(0, this.dataSend.length - this.cacheSizeSend);
+    //console.log('send', this.text);
+    let content: any = this.text;
+    // 转换十六进制
+    if (this.isHex) {
+      content = this.hex_to_buffer(this.text);
     }
-          this.contentSend.nativeElement.scrollTo(0, this.contentSend.nativeElement.scrollHeight);
-          break;
-      }
-    };
-
-    this.ws.onclose = e => {
-      console.log('Connection closed.');
-    };
+    this.mqtt.publish('/' + this.link.channel_id + '/' + this.id + '/transfer', content);
   }
 
 }

portal/src/app/mqtt.service.ts

@@ -55,6 +55,9 @@ export class MqttService {
     return i === fs.length && i === ts.length;
   }
 
+  publish(topic: string, content: any): void {
+    this.client.publish(topic, content);
+  }
 
   subscribe(filterString: string): Observable<any> {
     if (!this.topics[filterString]) {