[FEATURE] 统一 Electron / Web 连接层，建立更简单的前后端通信模式

[erha19]

如果你的需求与问题相关，请在下面描述一下（Is your feature request related to a problem? Please describe.）

当前 OpenSumi 框架中存在两种连接建立方式：

• bindConnectionService
• createClientConnection2

两种方式分别通过各自的方式建立链接及通过 DI 机制链接服务调用逻辑，存在较多重复代码。

同时，Web 中相关服务的能力要更强，包括支持了 Logger 替换，及链接信息的透出等（被用于 Terminal 中获取唯一的前端 ID）

相关代码见：

• core/packages/core-browser/src/bootstrap/app.ts

  Line 241 in 74d3636

  await bindConnectionService(this.injector, this.modules, connection, this.config.clientId);

描述你预期的功能表现（Describe the solution you'd like）

基于 WSChannelHandler 抽象一个基础的 ConnectionChanelService 实现，将 Web 和 Electron 通信模式统一，基础的通信封装写在 @opensumi/ide-connection 模块之中。

同时，优化当前的前后端通信模式，让代码表达更清晰，不再依赖 this.rpcClient![0].$xxx 的方式进行服务调用, 现有模式见：

https://opensumi.com/zh/docs/develop/sample/connection-between-browser-and-node

对当前框架内所有前后端通信代码进行改造，前后端通信用的函数方法均以 $ 开头进行处理

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wjywy]

你好，我想要承担这个feature的开发工作，请问可以吗

[erha19]

@wjywy 可以的，欢迎参与建设 ~

[erha19]

@wjywy 这个 Issue 我指给你了，如果实现过程中有任何问题或疑问可以直接在 Issue 里面评论并 @我 ~

[wjywy]

好的 感谢

[wjywy]

有最佳的调试方案吗，怎么看前后端通信是否连接成功呢，是按照opensumi的文档上面写的来吗

[wjywy]

官方文档上面electron通信上用的ipc通信，但是源码不是实现了一个简单的rpc通信吗，是文档有误吗

[erha19]

@wjywy Electron 上的通信逻辑大致在这个文件 https://github.com/opensumi/core/blob/9dda754decd912eebd5fbdad89cb8900b844210f/packages/core-electron-main/browser-preload/index.js 是按 IPC 进行通信的。

另外，你可以在 opensumi/core 通过 yarn start:electron 启动 electron 示例。

[wjywy]

Web端使用websocket进行通信，Electron端使用socket进行ipc通信，可是WSChannelHandler是专门针对于Web端通信方式抽象的类吧，意思是抽象出ConnectionChanelService类，里面包含web端和electron端的通信模式吗

[erha19]

@wjywy 给你再指一些相关逻辑及文件

1. 前端通信逻辑初始化流程

core/packages/core-browser/src/bootstrap/app.ts

Lines 221 to 224 in 454e876

	if (type === 'electron') {
	await bindConnectionService(this.injector, this.modules, createElectronClientConnection());
	} else if (type === 'web') {
	await createClientConnection2(

2. Node 进程通信初始化流程

core/packages/extension/src/browser/extension-node.service.ts

Lines 161 to 173 in b0407c9

	if (this.appConfig.isElectronRenderer && !this.appConfig.isRemote) {
	const connectPath = await this.extensionNodeClient.getElectronMainThreadListenPath(
	electronEnv.metadata.windowClientId,
	);
	this.logger.verbose('electron initExtProtocol connectPath', connectPath);
	// electron 环境下要使用 Node 端的 connection
	mainThreadCenter.setConnection(createElectronClientConnection(connectPath));
	} else {
	const WSChannelHandler = this.injector.get(IWSChannelHandler);
	const channel = await WSChannelHandler.openChannel(CONNECTION_HANDLE_BETWEEN_EXTENSION_AND_MAIN_THREAD);
	mainThreadCenter.setConnection(createWebSocketConnection(channel));
	}

对应的 Web 及 Electron 环境下初始化均是通过 @opensumi/ide-connection 模块中的定义控制

Electron - @opensumi/ide-connection/lib/node/connect
Web (WebSocket) - @opensumi/ide-connection/lib/common/message

这里期望的是在 ide-connection 模块内对窗口通信进行统一，这里可能需要考虑一下 Electron 多对多窗口的情况，即多个 Node 进程分别对应 Browser 进程，尽管目前集成更多的仍是一对多情况（一个 Node 进程服务多个 Browser 进程）

[bytemain]

FYI: #3228 也会改动相关文件，但和本 issue 目标无关

[bytemain]

@wjywy 请问现在有什么进展了吗，我也想开始动这块了

• refactor: update node ws channel code #3241

[wjywy]

最近时间充裕了些，准备开始编写了 @bytemain

[bytemain]

可以看下 #3241

我对这块改了不少

[bytemain]

优化当前的前后端通信模式，让代码表达更清晰，不再依赖 this.rpcClient![0].$xxx 的方式进行服务调用

这一点的话，我也不太清楚是要怎么做，大概有个想法：如果某个后端服务是需要和前端连接一对一的，那么它需要在后端声明一下自己需要一对一，然后我们用 injector 的特性，自动多例。