增加 message bridge
This commit is contained in:
huangzhelong.byte
parent
a4052c3a74
commit
9c3723b1be
@ -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>
|
||||
|
||||
110
app/src/api/message-bridge.ts
Normal file
110
app/src/api/message-bridge.ts
Normal file
@ -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
|
||||
};
|
||||
}
|
||||
33
test/package-lock.json
generated
33
test/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,19 +1,37 @@
|
||||
// server/src/server.ts
|
||||
import express from 'express';
|
||||
import { WSServer } from './wsHandler';
|
||||
// server/wsServer.ts
|
||||
import WebSocket from 'ws';
|
||||
|
||||
const app = express();
|
||||
const PORT = 3000;
|
||||
export interface VSCodeMessage {
|
||||
command: string;
|
||||
payload?: unknown;
|
||||
callbackId?: string;
|
||||
}
|
||||
|
||||
// 初始化 WebSocket 服务器
|
||||
const wsServer = new WSServer(8080);
|
||||
export type MessageHandler = (message: VSCodeMessage) => void;
|
||||
|
||||
// HTTP 接口
|
||||
app.get('/', (req, res) => {
|
||||
res.send('WebSocket Server is running');
|
||||
});
|
||||
const wss = new WebSocket.Server({ port: 8080 });
|
||||
|
||||
// 启动 HTTP 服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`HTTP server running on port ${PORT}`);
|
||||
wss.on('connection', (ws) => {
|
||||
// 转换普通消息为 VS Code 格式
|
||||
ws.on('message', (data) => {
|
||||
console.log('receive data from frontend: ' + data.toString());
|
||||
|
||||
// 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));
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user