Using ffi-rs to call webui_bind to add function in nodejs, the function does not work #395

lb091188 · 2024-06-05T15:15:32Z

lb091188
Jun 5, 2024

webui.js

// @ts-check
import { load, open, close, DataType, funcConstructor } from "ffi-rs";

const LIB_NAME = "webui";
const LIB_PATH = "./webui-2.dll";

const WebuiEventT = {
  /** 窗口ID */
  window: DataType.U64,
  /** 事件类型 */
  event_type: DataType.U64,
  /** HTML 对象 */
  element: DataType.String,
  /** 内部时间ID */
  event_number: DataType.U64,
  /** 绑定ID */
  bind_id: DataType.U64,
};

open({
  library: LIB_NAME,
  path: LIB_PATH,
});

/**
 * WebUI 库 ffi-rs 包装库
 */
export default class WebUI {
  /**
   * 窗体对象对应的窗体ID
   * @type number
   */
  static window;
  constructor() {
    // if(id) {
    //   this.window = load({
    //     library: LIB_NAME,
    //     funcName: "webui_new_window_id",
    //     retType: DataType.U64,
    //     paramsType:[DataType.U64],
    //     paramsValue:[id]
    //   })
    // } else {
    this.window = load({
      library: LIB_NAME,
      funcName: "webui_new_window",
      retType: DataType.U64,
      paramsType: [],
      paramsValue: [],
    });
    // }
  }
  /**
   * 用函数绑定一个特定的html元素click事件。空元素表示所有事件。
   * @param {string} eleId 要绑定的元素
   * @param {(e) => void} callback 绑定的回调函数
   * @returns {number} bindId
   */
  bind(eleId, callback) {
    const callbackType = funcConstructor({
      paramsType: [WebuiEventT],
      retType: DataType.Void,
    });
    return load({
      library: LIB_NAME,
      funcName: "webui_interface_bind",
      retType: DataType.U64,
      paramsType: [DataType.U64, DataType.String, callbackType],
      paramsValue: [this.window, eleId, callback],
    });
  }
  /**
   * 使用嵌入的HTML或文件显示窗口。如果窗口已经打开，它将被刷新。
   * @param {string} content HTML 字符串，URL,本地 `.html` 文件
   */
  show(content) {
    return load({
      library: LIB_NAME,
      funcName: "webui_show",
      retType: DataType.Boolean,
      paramsType: [DataType.U64, DataType.String],
      paramsValue: [this.window, content],
    });
  }
  /** 等待直到所有打开的窗口都关闭。 */
  wait() {
    load({
      library: LIB_NAME,
      funcName: "webui_wait",
      retType: DataType.Void,
      paramsType: [],
      paramsValue: [],
    });
  }
  /** 关闭所有打开的窗口。`webui_wait()`将返回(Break)。 */
  exit() {
    load({
      library: LIB_NAME,
      funcName: "webui_exit",
      retType: DataType.Void,
      paramsType: [],
      paramsValue: [],
    });
    close(LIB_NAME);
  }
}

webui.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebUI by nodejs ffi-rs</title>
</head>
<body>
  <button id="log">log</button>
</body>
</html>

index.js

import WebUI from "./webui.js";

console.log("before new");
let web = new WebUI();

console.log("before bind");
function logCallback(e) {
  console.log(e);
}
web.bind("log", logCallback);

console.log("before show");
web.show(`webui.html`);
console.log("before wait");
web.wait();
console.log("after wait");
process.on("beforeExit", function () {
  web.exit();
  process.exit(1);
});

System: Windows 10 22H2
Browser: Chrome 125
WebUI: [email protected]/webui-2.dll

I created the above three files and ran node ..
after the web.show() method is called, the before wait log does not print.
and clicking the log button does not print the event object.
This is the first time to contact ffi. If you have time to help look at it
thank you!

Here's the logs

run logs

C:\Users\ASUS\Downloads\webui-windows-msvc-x64>node .
before new
before bind
before show
before wait
after wait

lb091188 · 2024-06-05T15:21:46Z

lb091188
Jun 5, 2024
Author

I don't mind if I use ffi-napi or ffi-rs, just want to use WebUI on Nodejs, so any other ideas or suggestions would be helpful. A mature solution would be even better.Thks ~

0 replies

hassandraga · 2024-06-05T16:11:06Z

hassandraga
Jun 5, 2024
Maintainer

web.show() will waits for the window to connect, and because you did not include <script src="webui.js"></script> so it will timeout. However, deno-webui is outdated, and it will be updated as soon as webui 2.5.0 get released.

Copy of webui-dev/deno-webui#50

2 replies

lb091188 Jun 6, 2024
Author

I will try on Nodejs,Thks! 🤝

lb091188 Jun 6, 2024
Author

I didn't find the webui.js you mentioned in the repository so I suspect this is integrated into the dll, So I changed my webui.js to webui-lib.js and added <script src="webui.js"></script> to my webui.html. Clicking log now exits unexpectedly. So is deno the only way I can go😂

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Using ffi-rs to call webui_bind to add function in nodejs, the function does not work #395

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Using ffi-rs to call webui_bind to add function in nodejs, the function does not work #395

Uh oh!

lb091188 Jun 5, 2024

Replies: 2 comments · 2 replies

Uh oh!

lb091188 Jun 5, 2024 Author

Uh oh!

hassandraga Jun 5, 2024 Maintainer

Uh oh!

lb091188 Jun 6, 2024 Author

Uh oh!

lb091188 Jun 6, 2024 Author

lb091188
Jun 5, 2024

Replies: 2 comments 2 replies

lb091188
Jun 5, 2024
Author

hassandraga
Jun 5, 2024
Maintainer

lb091188 Jun 6, 2024
Author

lb091188 Jun 6, 2024
Author