如何使用 IsInterop 或 Babel 在 GWT 应用程序中实现电路沙盒客户端？

Question

我必须在 GWT 中开发一个 Circuit Sandbox 客户端。 https://unpkg.com/circuit-sdk 使用 ES6，所以我不能使用 GWT JSNI。 我正在尝试在https://circuit.github.io/jssdk.html 上编写“登录和获取对话的预告示例”。 我不得不说，我的 JavaScript 知识是初学者。

我想，我有两个选择： 我的第一个选择是使用 GWT 的 JsInterop。 （我已经使用它来实现这个 GWT 应用程序的 Websocket。 因此，我使用了示例 'http://www.g-widgets.com/2017/03/16/example-of-using-websockets-in-gwt-with-a-spring-boot-server/' 并且效果很好。）

对于 Circuit Client，我开始编写以下 Java 类：

@JsType( isNative = true, namespace = JsPackage.GLOBAL )
public class Client {
    @JsConstructor
    public Client( final String token, final String readings, final String uri ) {
    }

    @JsMethod
    public native void logon();

//  The old JSNI code (not usable here):
//  public static native void logon() /*-{
//      client.logon()
//      .then(user => console.log('Successfully authenticated as ' + user.displayName))
//      .then(client.getConversations)
//      .then(conversations => conversations.forEach(c => console.log(c.convId)))
//      .catch(console.error);
//  }-*/;
}

此代码无法运行，因为我没有定义 javascript 模块并且未实现登录方法。

如何访问 javascript 模块“电路”以及如何实现 logon() 方法？ 我还需要做什么才能让这个 JsInterop 类正常工作？

第二个选项：我已经使用 Babel 将 https://circuitsandbox.net/sdk 转换为 ES5。我在我的 GWT 应用程序中包含了构建的脚本并尝试实现登录 方法如下：

client();

public static native void client() /*-{
    var client = new $wnd.Circuit.Client({
        client_id: '78cafde2f6854ad5ad80a67c532687bc',
        scope: 'READ_USER_PROFILE,READ_CONVERSATIONS',
        domain: 'circuitsandbox.net'
});

    client.logon().then(function (user) {
        return console.log('Logged on user:', user);
    }).catch(console.error);
}-*/;

当我调用该方法时，我得到了几个错误：

[ERROR] Line xx: missing name after . operator

这个错误是因为 JSNI 无法编译 ES6。

如果我注释掉 client.logon javascript 方法，我会得到另一个错误：

"TypeError: Cannot read property 'Client' of undefined"

var client = new $wnd.Circuit.$wnd.Client(...

也不行。

谁能告诉我我必须做什么才能让它工作，以及更好的解决方案是什么？

非常感谢，如果有人可以在这里帮助我，我将非常高兴。

Answer 1

并不是因为 Circuit 使用 ES6，您的代码（在 JSNI 中）必须使用 ES6。您可以用匿名函数替换 lambda；因为catch 是一个关键字，所以你必须将你的catch 方法作为第二个参数传递给then 方法：

public static native void logon() /*-{
  client.logon()
  .then(function(user) { console.log('Successfully authenticated as ' + user.displayName); })
  .then(client.getConversations)
  .then(function(conversations) { conversations.forEach(function(c) { console.log(c.convId)); } }, console.error);
}-*/;

你的第二个 sn-p 也是如此。