增加 message bridge

app/src/App.vue

@@ -13,6 +13,22 @@ import Sidebar from '@/components/sidebar/index.vue';
 import MainPanel from '@/components/main-panel/index.vue';
 import { setDefaultCss } from './hook/css';
 import { pinkLog } from './views/setting/util';
+import { useMessageBridge } from './api/message-bridge';
+
+const { postMessage, onMessage, isConnected } = useMessageBridge();
+
+// 监听所有消息
+onMessage((message) => {
+	console.log('Received:', message.command, message.payload);
+});
+
+// 发送消息
+const sendPing = () => {
+	postMessage({
+		command: 'ping',
+		payload: { timestamp: Date.now() }
+	});
+};
 
 
 onMounted(() => {
@@ -22,6 +38,8 @@ onMounted(() => {
 	});
 
 	pinkLog('OpenMCP Client 启动');
+
+	sendPing();
 })
 
 </script>

app/src/api/message-bridge.ts

@@ -0,0 +1,110 @@
+import { pinkLog } from '@/views/setting/util';
+import { onUnmounted, ref } from 'vue';
+
+export interface VSCodeMessage {
+	command: string;
+	payload?: unknown;
+	callbackId?: string;
+}
+
+export type MessageHandler = (message: VSCodeMessage) => void;
+export const acquireVsCodeApi = (window as any)['acquireVsCodeApi'];
+
+class MessageBridge {
+	private ws: WebSocket | null = null;
+	private handlers = new Set<MessageHandler>();
+	public isConnected = ref(false);
+
+	constructor(private wsUrl: string = 'ws://localhost:8080') {
+		this.init();
+	}
+
+	private init() {
+		// 环境检测优先级：
+		// 1. VS Code WebView 环境
+		// 2. 浏览器 WebSocket 环境
+		if (typeof acquireVsCodeApi !== 'undefined') {
+			this.setupVSCodeListener();
+			pinkLog('当前模式：release');
+		} else {
+			this.setupWebSocket();
+			pinkLog('当前模式：debug');
+		}
+	}
+
+	// VS Code 环境监听
+	private setupVSCodeListener() {
+		const vscode = acquireVsCodeApi();
+
+		window.addEventListener('message', (event: MessageEvent<VSCodeMessage>) => {
+			this.dispatchMessage(event.data);
+		});
+
+		this.postMessage = (message) => vscode.postMessage(message);
+		this.isConnected.value = true;
+	}
+
+	// WebSocket 环境连接
+	private setupWebSocket() {
+		this.ws = new WebSocket(this.wsUrl);
+
+		this.ws.onopen = () => {
+			this.isConnected.value = true;
+		};
+
+		this.ws.onmessage = (event) => {
+			try {
+				const message = JSON.parse(event.data) as VSCodeMessage;
+				this.dispatchMessage(message);
+			} catch (err) {
+				console.error('Message parse error:', err);
+			}
+		};
+
+		this.ws.onclose = () => {
+			this.isConnected.value = false;
+		};
+
+		this.postMessage = (message) => {
+			if (this.ws?.readyState === WebSocket.OPEN) {
+				this.ws.send(JSON.stringify(message));
+			}
+		};
+	}
+
+	private dispatchMessage(message: VSCodeMessage) {
+		this.handlers.forEach(handler => handler(message));
+	}
+
+	public postMessage(message: VSCodeMessage) {
+		throw new Error('PostMessage not initialized');
+	}
+
+	public onMessage(handler: MessageHandler) {
+		this.handlers.add(handler);
+		return () => this.handlers.delete(handler);
+	}
+
+	public destroy() {
+		this.ws?.close();
+		this.handlers.clear();
+	}
+}
+
+// 单例实例
+const messageBridge = new MessageBridge();
+
+// 向外暴露一个独立函数，保证 MessageBridge 是单例的
+export function useMessageBridge() {
+	const bridge = messageBridge;
+
+	onUnmounted(() => {
+		bridge.destroy();
+	});
+
+	return {
+		postMessage: bridge.postMessage.bind(bridge),
+		onMessage: bridge.onMessage.bind(bridge),
+		isConnected: bridge.isConnected
+	};
+}

test/package-lock.json

@@ -1,15 +1,20 @@
 {
-	"name": "test",
+	"name": "openmcp-test-backend",
+	"version": "1.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
+			"name": "openmcp-test-backend",
+			"version": "1.0.0",
+			"license": "MIT",
 			"dependencies": {
 				"body-parser": "^1.20.3",
 				"cors": "^2.8.5",
 				"express": "^4.21.1",
 				"morgan": "^1.10.0",
-				"pako": "^2.1.0"
+				"pako": "^2.1.0",
+				"ws": "^8.18.1"
 			},
 			"devDependencies": {
 				"@types/cors": "^2.8.17",
@@ -227,9 +232,10 @@
 		},
 		"node_modules/@types/ws": {
 			"version": "8.18.0",
-			"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.18.0.tgz",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.0.tgz",
 			"integrity": "sha512-8svvI3hMyvN0kKCJMvTJP/x6Y/EoQbepff882wL+Sn5QsXb3etnamgrJq4isrBxSJj5L2AuXcI0+bgkoAXGUJw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@types/node": "*"
 			}
@@ -1263,6 +1269,27 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/ws": {
+			"version": "8.18.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
+			"integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/yn": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",

test/package.json

@@ -1,4 +1,21 @@
 {
+	"name": "openmcp-test-backend",
+	"version": "1.0.0",
+	"description": "",
+	"main": "dist/main.js",
+	"scripts": {
+		"dev": "ts-node src/main.ts",
+		"build": "tsc && cp -R src/public dist/ 2> /dev/null || :",
+		"build:watch": "tsc --watch",
+		"start": "node dist/main.js",
+		"start:prod": "NODE_ENV=production node dist/main.js",
+		"debug": "node --inspect -r ts-node/register src/main.ts",
+		"clean": "rm -rf dist",
+		"lint": "eslint src --ext .ts,.tsx",
+		"typecheck": "tsc --noEmit"
+	},
+	"author": "LSTM-Kirigaya",
+	"license": "MIT",
 	"devDependencies": {
 		"@types/cors": "^2.8.17",
 		"@types/express": "^5.0.0",
@@ -14,6 +31,7 @@
 		"cors": "^2.8.5",
 		"express": "^4.21.1",
 		"morgan": "^1.10.0",
-		"pako": "^2.1.0"
+		"pako": "^2.1.0",
+		"ws": "^8.18.1"
 	}
 }

test/src/demo.ts

@@ -1,43 +0,0 @@
-import * as path from 'path';
-import * as fs from 'fs';
-
-import { Request, Response } from 'express';
-import { showOpenViewDialog, showSaveViewDialog } from './windows';
-import * as pako from 'pako';
-import puppeteer, { LowerCasePaperFormat, PDFOptions } from 'puppeteer-core';
-import { PDFDocument } from 'pdf-lib';
-
-export async function saveAsSvg(req: Request, res: Response) {
-    try {
-        const { svgBuffer, moduleName } = req.body;
-        const svgString = pako.ungzip(svgBuffer, { to: 'string' });
-        // 询问新的路径        
-        const defaultFilename = moduleName + '.svg';
-        const savePath = await showSaveViewDialog({
-            title: 'Save As Svg',
-            defaultPath: path.resolve(__dirname, '../test', defaultFilename),
-            buttonLabel: 'Save',
-            filters: [
-                { name: 'svg', extensions: ['svg'] },
-                { name: 'All Files', extensions: ['*'] },
-            ],
-        });
-
-        if (savePath) {
-            fs.writeFileSync(savePath, svgString);
-            res.send({
-                savePath,
-                success: true
-            });
-        } else {
-            res.send({
-                success: false
-            });
-        }
-    } catch (error) {
-        console.log('error happen in /save-as-svg, ' + error);
-        res.send({
-            success: false
-        });
-    }   
-}

test/src/main.ts

@@ -1,19 +1,37 @@
-// server/src/server.ts
+// server/wsServer.ts
-import express from 'express';
+import WebSocket from 'ws';
-import { WSServer } from './wsHandler';
 
-const app = express();
+export interface VSCodeMessage {
-const PORT = 3000;
+    command: string;
+    payload?: unknown;
+    callbackId?: string;
+}
 
-// 初始化 WebSocket 服务器
+export type MessageHandler = (message: VSCodeMessage) => void;
-const wsServer = new WSServer(8080);
 
-// HTTP 接口
+const wss = new WebSocket.Server({ port: 8080 });
-app.get('/', (req, res) => {
+
-    res.send('WebSocket Server is running');
+wss.on('connection', (ws) => {
-});
+    // 转换普通消息为 VS Code 格式
-
+    ws.on('message', (data) => {
-// 启动 HTTP 服务器
+        console.log('receive data from frontend: ' + data.toString());
-app.listen(PORT, () => {
+        
-    console.log(`HTTP server running on port ${PORT}`);
+        // const rawMessage = data.toString();
+        // const vscodeMessage: VSCodeMessage = {
+        //     command: 'ws-message',
+        //     payload: rawMessage,
+        //     callbackId: Math.random().toString(36).slice(2)
+        // };
+        // ws.send(JSON.stringify(vscodeMessage));
+    });
+
+    // 连接后发送一个消息
+    const vscodeMessage: VSCodeMessage = {
+        command: 'ws-message',
+        payload: {
+            text: 'connection completed'
+        },
+        callbackId: Math.random().toString(36).slice(2)
+    };
+    ws.send(JSON.stringify(vscodeMessage));
 });