feat: 增加消息接收器页面

webview/proxy.conf.json

@@ -1,8 +1,13 @@
 {
     "/api": {
-        "target": "http://124.220.17.201:7600",
-        "secure": false,
+        "target": "http://127.0.0.1:7600",
+        "changeOrigin": true,
+        "secure": false
+    },
+    "/api/socket_receiver": {
+        "target": "ws://127.0.0.1:7600",
         "changeOrigin": true,
-        "logLevel": "debug"
+        "secure": false,
+        "ws": true
     }
 }

webview/src/apps/contacts/index.html

@@ -16,7 +16,7 @@
             </tr>
         </thead>
         <tbody>
-            @for (item of contacts; track item.wxid; let i = $index){
+            @for (item of contacts; track item.wxid; let i = $index) {
             <tr>
                 <th scope="row">{{i+1}}</th>
                 <td>{{item.type}}</td>

webview/src/apps/pages.ts

@@ -1,5 +1,6 @@
 import { ChatroomsComponent } from './chatrooms';
 import { ContactsComponent } from './contacts';
+import { ReceiverComponent } from './receiver';
 import { OwnerComponent } from './owner';
 
 import { ErrorComponent } from './error';
@@ -8,6 +9,7 @@ import { ErrorComponent } from './error';
 export const AppComponents = [
     ChatroomsComponent,
     ContactsComponent,
+    ReceiverComponent,
     OwnerComponent,
     ErrorComponent,
 ];
@@ -20,6 +22,7 @@ export const AppRoutes: Routes = [
     { path: '', redirectTo: 'owner', pathMatch: 'full' },
     { path: 'chatrooms', component: ChatroomsComponent },
     { path: 'contacts', component: ContactsComponent },
+    { path: 'receiver', component: ReceiverComponent },
     { path: 'owner', component: OwnerComponent },
     { path: '**', component: ErrorComponent, data: { error: 404 } }
 ];

webview/src/apps/receiver/index.html

@@ -0,0 +1,5 @@
+<layout-header></layout-header>
+
+<div class="container-lg mt-3">
+    <textarea class="form-control" rows="20">{{messages.join('\n\n')}}</textarea>
+</div>

webview/src/apps/receiver/index.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+    selector: 'page-receiver',
+    templateUrl: 'index.html',
+    styleUrls: ['index.scss']
+})
+export class ReceiverComponent {
+
+    public messages: Array<string> = [];
+
+    constructor() {
+        this.startSocket();
+    }
+
+    public async startSocket() {
+        const url = location.origin.replace(/^http/, 'ws');
+        const websocket = new WebSocket(url + '/api/socket_receiver');
+        websocket.onopen = () => {
+            this.messages.push('WebSocket is connected.');
+        };
+        websocket.onmessage = event => {
+            this.messages.push(event.data);
+        };
+        websocket.onerror = (error) => {
+            this.messages.push('WebSocket Error:' + error);
+        };
+        websocket.onclose = () => {
+            this.messages.push('WebSocket is closed now.');
+        };
+    }
+
+}

webview/src/layouts/header/index.html

@@ -18,6 +18,9 @@
                 <li class="nav-item">
                     <a routerLink="/contacts" routerLinkActive="active" class="nav-link">通讯录</a>
                 </li>
+                <li class="nav-item">
+                    <a routerLink="/receiver" routerLinkActive="active" class="nav-link">消息接收</a>
+                </li>
             </ul>
             <div>
                 <a class="nav-link" href="/swagger/" target="_blank">Api Docs</a>