上一篇:Theia APIs——事件

通过JSON-PRC进行通信

  在本节中,我将讲解如何创建后端服务并通过JSON-PRC来连接它。
  我将使用debug logging system作为例子来进行讲解。

概述

  本示例将用express框架创建一个服务,然后通过websocket连接该服务。

注册服务

  首先要做的是将服务公开,这样前端就能连接它。
  你需要创建一个后端服务模块(类似logger-server-module.ts):
import { ContainerModule } from 'inversify';
import { ConnectionHandler, JsonRpcConnectionHandler } from "../../messaging/common";
import { ILoggerServer, ILoggerClient } from '../../application/common/logger-protocol'; export const loggerServerModule = new ContainerModule(bind => {
bind(ConnectionHandler).toDynamicValue(ctx =>
new JsonRpcConnectionHandler<ILoggerClient>("/services/logger", client => {
const loggerServer = ctx.container.get<ILoggerServer>(ILoggerServer);
loggerServer.setClient(client);
return loggerServer;
})
).inSingletonScope()
});

  我们来详细看一下:

import { ConnectionHandler, JsonRpcConnectionHandler } from "../../messaging/common";
  这一行导入了JsonRpcConnectionHandler,这是一个工厂类,我们用它创建了一个onConnection连接处理程序,它为后端通过JSON-RPC调用的对象创建一个代理,并将一个本地对象公开给JSON-RPC。
接下来我们来看看具体的实现过程。
  ConnectionHandler是一个简单的接口,它指定了连接的路径以及在连接创建时的行为。
  它是这样的:
import { MessageConnection } from "vscode-jsonrpc";

export const ConnectionHandler = Symbol('ConnectionHandler');

export interface ConnectionHandler {
readonly path: string;
onConnection(connection: MessageConnection): void;
}
import { ILoggerServer, ILoggerClient } from '../../application/common/logger-protocol';

  文件logger-protocol.ts包含了服务器和客户端需要实现的接口。

  这里的服务器指的是将通过JSON-RPC调用的后端对象,而客户端指的是可以接收来自后端对象的通知的对象。
  稍后我们会详细介绍。
bind<ConnectionHandler>(ConnectionHandler).toDynamicValue(ctx => {
  这里有个地方很神奇,乍一看,它是一个ConnectionHandler的实现。
  神奇之处在于,这个ConnectionHandler类型是绑定到messaging-module.ts文件中的ContributionProvider的。
  所以,当MessageingContribution启动时(调用onStart),它为所有绑定ConnectionHandlers创建一个websocket连接。
  像这样(来自messageing-mocule.ts):
constructor( @inject(ContributionProvider) @named(ConnectionHandler) protected readonly handlers: ContributionProvider<ConnectionHandler>) {
} onStart(server: http.Server): void {
for (const handler of this.handlers.getContributions()) {
const path = handler.path;
try {
createServerWebSocketConnection({
server,
path
}, connection => handler.onConnection(connection));
} catch (error) {
console.error(error)
}
}
}
  要深入了解ContributionProvider,可以参考这里
  然后:
new JsonRpcConnectionHandler<ILoggerClient>("/services/logger", client => {

  我们来看看这个类的实现做了哪些事情:

export class JsonRpcConnectionHandler<T extends object> implements ConnectionHandler {
constructor(
readonly path: string,
readonly targetFactory: (proxy: JsonRpcProxy<T>) => any
) { } onConnection(connection: MessageConnection): void {
const factory = new JsonRpcProxyFactory<T>(this.path);
const proxy = factory.createProxy();
factory.target = this.targetFactory(proxy);
factory.listen(connection);
}
}
  我们看到,这里通过ConnectionHandler类的扩展创建了一个websocker连接,路径是"/services/logger"。
  让我们来看看这个onConnection具体做了什么:
onConnection(connection: MessageConnection): void {
const factory = new JsonRpcProxyFactory<T>(this.path);
const proxy = factory.createProxy();
factory.target = this.targetFactory(proxy);
factory.listen(connection);

  我们一行一行来看:

const factory = new JsonRpcProxyFactory<T>(this.path);

  上面这一行在路径"/services/logger"上创建了一个JsonRpcProxy。

const proxy = factory.createProxy();

  然后,我们从工厂创建了一个代理对象,它将使用ILoggerClient接口来调用JSON-RPC连接的另一端。

factory.target = this.targetFactory(proxy);

  上面这一行将调用我们在参数中传递的函数,所以:

client => {
const loggerServer = ctx.container.get<ILoggerServer>(ILoggerServer);
loggerServer.setClient(client);
return loggerServer;
}
  这里在loggerServer上设置客户端,本例中它用于向前端发送有关日志更改的通知。
  同时它返回loggerServer,用作在JSON-RPC上公开的对象。
factory.listen(connection);
  上面这一行将工厂连接到Connection。
  带有services/*路径的endpoints由webpack开发服务器提供,参见webpack.config.js:
'/services/*': {
target: 'ws://localhost:3000',
ws: true
},

连接到服务

  现在我们已经有了一个后端服务,让我们来看看如何从前端连接它。
  要做到这一点,你需要像下面这样:
(来自logger-frontend-module.ts)
import { ContainerModule, Container } from 'inversify';
import { WebSocketConnectionProvider } from '../../messaging/browser/connection';
import { ILogger, LoggerFactory, LoggerOptions, Logger } from '../common/logger';
import { ILoggerServer } from '../common/logger-protocol';
import { LoggerWatcher } from '../common/logger-watcher'; export const loggerFrontendModule = new ContainerModule(bind => {
bind(ILogger).to(Logger).inSingletonScope();
bind(LoggerWatcher).toSelf().inSingletonScope();
bind(ILoggerServer).toDynamicValue(ctx => {
const loggerWatcher = ctx.container.get(LoggerWatcher);
const connection = ctx.container.get(WebSocketConnectionProvider);
return connection.createProxy<ILoggerServer>("/services/logger", loggerWatcher.getLoggerClient());
}).inSingletonScope();
});

  其中最重要的几行:

bind(ILoggerServer).toDynamicValue(ctx => {
const loggerWatcher = ctx.container.get(LoggerWatcher);
const connection = ctx.container.get(WebSocketConnectionProvider);
return connection.createProxy<ILoggerServer>("/services/logger", loggerWatcher.getLoggerClient());
}).inSingletonScope();

  我们一行一行来看:

const loggerWatcher = ctx.container.get(LoggerWatcher);
  这一行创建了一个监听器,它通过loggerWatcher客户端从后端获取有关事件的通知(loggerWatcher.getLoggerClient())。
  想要了解更多有关事件如何在theia中工作的信息,可以查看这里
const connection = ctx.container.get(WebSocketConnectionProvider);

  上面这一行获得了一个websocket连接,它将被用来创建一个代理。

return connection.createProxy<ILoggerServer>("/services/logger", loggerWatcher.getLoggerClient());

  我们将一个本地对象作为第二个参数传入,用来处理来自远程对象的JSON-RPC消息。有时,本地对象依赖于代理,在代理实例化之前无法实例化。这种情况下,代理接口应该实现JsonRpcServer,而本地对象应该作为客户端来提供。

export type JsonRpcServer<Client> = Disposable & {
setClient(client: Client | undefined): void;
}; export interface ILoggerServer extends JsonRpcServery<ILoggerClient> {
// ...
} const serverProxy = connection.createProxy<ILoggerServer>("/services/logger");
const client = loggerWatcher.getLoggerClient();
serverProxy.setClient(client);
  所以,在最后一行,我们将ILoggerServer接口绑定到JsonRpc代理。
  注意底层的调用:
createProxy<T extends object>(path: string, target?: object, options?: WebSocketOptions): T {
const factory = new JsonRpcProxyFactory<T>(path, target);
this.listen(factory, options);
return factory.createProxy();
}
  这个和后端的例子很像。
  也许你也注意到了,就连接而言,这里前端是服务器而后端是客户端,但对我们的逻辑来说这并不重要。
  这里还有几点:
  • 在路径"logger"上创建JsonRpc代理。
  • 公开loggerWatcher.getLoggerClient()对象。
  • 返回ILoggerServer类型的代理。
  现在,ILoggerServer的实例通过JSON-RPC被代理到后端的LoggerServer对象。

在示例的前端和后端加载模块

  现在我们已经有了这些模块,我们需要将它们引入到我们的示例中。我们将使用浏览器作为示例,在electron中代码是相同的。
后端
  在examples/browser/src/backend/main.ts中,你需要像这样来引用:
import { loggerServerModule } from 'theia-core/lib/application/node/logger-server-module';

  然后将其载入到主容器。

container.load(loggerServerModule);
前端
  在examples/browser/src/frontend/main.ts中,你需要像这样来引用:
import { loggerFrontendModule } from 'theia-core/lib/application/browser/logger-frontend-module';
container.load(frontendLanguagesModule);

完成示例

   如果你想查看本文中提到的完整示例,可以查看这里的commit
 

Theia APIs——通过JSON-RPC进行通信的更多相关文章

  1. Theia APIs——Preferences

    上一篇:Theia APIs——命令和快捷键 Preferences Theia有一个preference service,模块可以通过它来获取preference的值,提供默认的preference ...

  2. 測试JSON RPC远程调用(JSONclient)

    #include <string> #include <iostream> #include <curl/curl.h> /* 标题:JSonclient Auth ...

  3. Theia APIs——事件

    上一篇:Theia APIs——Preferences 事件 Theia中的事件或许会让你感到困惑,希望本节能阐述清楚. 来看下面的代码: (来自logger-watcher.ts) @injecta ...

  4. .net core consul grpc--系统服务RPC实现通信(一)

    .net core grpc 系统服务实现通信(一) 现在系统都服务化,.net core 实现服务化的方式有很多,我们通过grpc实现客户端.服务端通信. grpc(https://grpc.io/ ...

  5. RPC 框架通信原理

    RPC是指远程过程调用,也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需要通过网络来表达调用的语义和传达调用的数据: ...

  6. [PHP 作为iOS后台Json格式HTTP通信及文件上传的实现]

    1.数据库连接 configmysql.php <?php $q = mysql_connect("localhost:8889","root",&quo ...

  7. Unity3d使用json与javaserver通信

    Unity3d使用json能够借助LitJson 下载LitJson,复制到Unity3d工作文件夹下 于是能够在代码中实现了 以下发送请求到server并解析 System.Collections. ...

  8. Theia APIs——命令和快捷键

    上一篇:使用Theia——创建语言支持 命令和快捷键 Theia可以通过多种不同的方式进行扩展.命令允许packages提供可以被其它包调用的唯一命令,还可以向这些命令添加快捷键和上下文,使得它们只能 ...

  9. golang RPC通信读写超时设置

    golang RPC通信中,有时候就怕读写hang住. 那是否可以设置读写超时呢? 1.方案一: 设置连接的读写超时 1.1 client RPC通信基于底层网络通信,可以通过设置connection ...

随机推荐

  1. js 数组的拼接

    数组的拼接 var a = [1,2,3,4,5,6]; var b=["foo","bar", "fun"]; 最终的结果是: [ 1,2 ...

  2. 洛谷P2672 推销员 题解 贪心

    题目链接:https://www.luogu.org/problem/P2672 这道题目是贪心,贪心的思想是: 选择 \(m\) 户人家的最大疲劳值应该是以下两种方案中的较大值: 方案一:选择 \( ...

  3. 2005年NOIP普及组复赛题解

    题目涉及算法: 陶陶摘苹果:入门题: 校门外的树:简单模拟: 采药:01背包: 循环:模拟.高精度. 陶陶摘苹果 题目链接:https://www.luogu.org/problem/P1046 循环 ...

  4. 如何在SpringMVC项目中部署WebService服务并打包生成客户端

    场景 某SpringMVC项目原本为一个HTTP的WEB服务项目,之后想在该项目中添加WebService支持,使该项目同时提供HTTP服务和WebService服务.其中WebService服务通过 ...

  5. PHP 面试题三

    1.nginx使用哪种网络协议? nginx是应用层 我觉得从下往上的话 传输层用的是tcp/ip 应用层用的是http fastcgi负责调度进程 2. <? echo 'hello tush ...

  6. 2018-4-29-C#-金额转中文大写

    title author date CreateTime categories C# 金额转中文大写 lindexi 2018-04-29 09:50:38 +0800 2018-04-02 21:4 ...

  7. git把某个文件去除版本控制

    谢谢@jessicway 同学的提醒.我之前没考虑只需要删除服务器上已提交的文件,但是本地不想删除的情况. 我们先看看 git rm 命令的说明 可以看到其实加上 --cached 参数就可以实现只去 ...

  8. 用webAudio和canvas实现音频可视化

    前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...

  9. JS与JSP分别是什么

    JS:JavaScript: JSP:Java Server Pages. jsp:只是servlet的一个变种,方便书写html内容才出现的,servlet是根本,所有jsp能做的,servlet全 ...

  10. Linux 内核kobject 缺省属性

    当被创建时, 每个 kobject 被给定一套缺省属性. 这些属性通过 kobj_type 结构来指定. 这个结构, 记住, 看来如此: struct kobj_type { void (*relea ...