diff --git a/webview/proxy.conf.json b/webview/proxy.conf.json
index f526240a..ff78ea01 100644
--- a/webview/proxy.conf.json
+++ b/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
     }
 }
\ No newline at end of file
diff --git a/webview/src/apps/contacts/index.html b/webview/src/apps/contacts/index.html
index b45982f8..7d22f2ea 100644
--- a/webview/src/apps/contacts/index.html
+++ b/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>
diff --git a/webview/src/apps/pages.ts b/webview/src/apps/pages.ts
index de0573bf..470b805c 100644
--- a/webview/src/apps/pages.ts
+++ b/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 } }
 ];
diff --git a/webview/src/apps/receiver/index.html b/webview/src/apps/receiver/index.html
new file mode 100644
index 00000000..869b1b5e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/webview/src/apps/receiver/index.scss b/webview/src/apps/receiver/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/webview/src/apps/receiver/index.ts b/webview/src/apps/receiver/index.ts
new file mode 100644
index 00000000..de8aa396
--- /dev/null
+++ b/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.');
+        };
+    }
+
+}
diff --git a/webview/src/layouts/header/index.html b/webview/src/layouts/header/index.html
index 9643aa49..cc6b4167 100644
--- a/webview/src/layouts/header/index.html
+++ b/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>