quickjs再谈libuv

一、前言

　　这次通过这两篇博客，对libuv再次深入了解。因为后面结合iotjs，txiki.js会有很多地方用到libuv库。同时由于上一篇libuv博文是跟lvgl结合的。这一篇则比较纯粹的见解libuv库的使用。

二、默认的setTimeout例子，了解原理

import {setTimeout} from 'os'

setTimeout(function() {
  console.log('1000')
}, 1000)

setTimeout(function() {
  console.log('500')
}, 500)

　　上面这个例子能正常的运行，并按照timeout时间，进行打印。但是仔细看quickjs-libc.c:2061 js_os_setTimeout 函数的实现，却是同步的代码，是如何实现异步执行的呢？

　　是主进程中最后的 js_std_loop函数，实现类型select/poll效果(IO多路复用 https://www.cnblogs.com/wunaozai/p/3870338.html)

　　大概流程如下：

1. 调用setTimeout函数时，将定时器加入到os_timers中 list_add_tail(&th->link, &ts->os_timers);
2. 执行loop主循环 void js_std_loop(JSContext *ctx)
3. IO多路复用代码循环 os_poll_func = js_os_poll;
4. 实际是这个函数 static int js_os_poll(JSContext *ctx)
5. 遍历所有的定时器 list_for_each(el, &ts->os_timers)
6. 执行定时器绑定的回调函数 call_handler(ctx, func);

三、移植到libuv

　　了解了上面的原理后，使用libuv进行移植。默认的setTimeout也可以实现效果啊，为什么需要移植libuv来重写呢？之所以需要，之前的博客有提到，这个是内置的事件循环，如果还要集成其他库，如之前提到的lvgl-gui库，http异步调用等库时，quickjs默认的方式就不通用。需要改造。

　　libuv三个概念，Callback，事件触发时执行的回调。Handler，控制器uv_timer_t类型定时器。Loop，异步IO循环，uv_loop_t类型。三者合在一起就是，将Callback绑定到Handler中，然后在Loop循环中，执行Handler.

　　宏任务、微任务

#include <stdio.h>
#include "quickjs-libc.h"
#include "quickjs.h"
#include "cutils.h"
#include "uv.h"

uv_loop_t *main_loop;
uv_loop_t *js_loop;
static uv_loop_t js_loop_struct;
typedef struct _uv_timer_data
{
  JSContext *ctx;
  uv_timer_t handle;
  int interval;
  JSValue func;
  int argc;
  JSValue *argv;
} uv_timer_data_t;

static JSClassID tjs_timer_class_id;
static void uv__timer_close(uv_handle_t *handle)
{
  uv_timer_data_t *data = handle->data;
  free(data);
}
static void clear_timer(uv_timer_data_t *data)
{
  JSContext *ctx = data->ctx;
  JS_FreeValue(ctx, data->func);
  data->func = JS_UNDEFINED;
  for (int i = 0; i < data->argc; i++)
  {
    JS_FreeValue(ctx, data->argv[i]);
    data->argv[i] = JS_UNDEFINED;
  }
  data->argc = 0;
}
static void tjs_timer_finalizer(JSRuntime *rt, JSValue val)
{
  printf("tjs_timer_finalizer\n");
  uv_timer_data_t *data = (uv_timer_data_t *)JS_GetOpaque(val, tjs_timer_class_id);
  if (data)
  {
    clear_timer(data);
    uv_close((uv_handle_t *)&data->handle, uv__timer_close);
  }
}

static void tjs_timer_gc_mark(JSRuntime *rt, JSValueConst val, JS_MarkFunc *mark_func)
{
  uv_timer_data_t *data = (uv_timer_data_t *)JS_GetOpaque(val, tjs_timer_class_id);
  if (data)
  {
    JS_MarkValue(rt, data->func, mark_func);
    for (int i = 0; i < data->argc; i++)
      JS_MarkValue(rt, data->argv[i], mark_func);
  }
}
static JSClassDef tjs_timer_class = {
    "Timer",
    // .finalizer = tjs_timer_finalizer,
    .gc_mark = tjs_timer_gc_mark,
};

static void js_uv_setTimeout_cb(uv_timer_t *handle)
{
  printf("setTimeout callback %p\n", handle);
  uv_timer_data_t *data = (uv_timer_data_t *)handle->data;
  JSContext *ctx = data->ctx;
  JSValue func = JS_DupValue(ctx, data->func);
  JSValue ret = JS_Call(ctx, func, JS_UNDEFINED, 0, NULL);
  JS_FreeValue(ctx, func);
  if (JS_IsException(ret))
  {
    js_std_dump_error(ctx);
  }
  JS_FreeValue(ctx, ret);
  clear_timer(data);
  return;
}
static JSValue js_uv_setTimeout(JSContext *ctx, JSValueConst this_val,
                                int argc, JSValueConst *argv)
{
  printf("js_uv_setTimeout\n");
  int delay;
  JSValueConst func;
  func = argv[0];
  if (!JS_IsFunction(ctx, func))
  {
    printf("Not a function!\n");
    return JS_EXCEPTION;
  }
  JS_ToInt32(ctx, &delay, argv[1]);

  JSValue obj = JS_NewObjectClass(ctx, tjs_timer_class_id);
  if (JS_IsException(obj))
  {
    return JS_EXCEPTION;
  }

  uv_timer_data_t *data = calloc(1, sizeof(uv_timer_data_t));
  data->ctx = ctx;
  data->func = JS_DupValue(ctx, func);
  data->handle.data = data;

  uv_timer_init(main_loop, &data->handle);
  uv_timer_start(&data->handle, js_uv_setTimeout_cb, delay, 0);

  JS_SetOpaque(obj, data);
  return obj;
}
static JSValue js_uv_clearTimeout(JSContext *ctx, JSValueConst this_val,
                                  int argc, JSValueConst *argv)
{
  uv_timer_data_t *data = (uv_timer_data_t *)JS_GetOpaque2(ctx, argv[0], tjs_timer_class_id);
  if (!data)
  {
    return JS_EXCEPTION;
  }
  uv_timer_stop(&data->handle);
  clear_timer(data);
  return JS_UNDEFINED;
}
static const JSCFunctionListEntry js_uv_funcs[] = {
    JS_CFUNC_DEF("setTimeout", 0, js_uv_setTimeout),
    JS_CFUNC_DEF("clearTimeout", 1, js_uv_clearTimeout),
};
static int js_uv_init(JSContext *ctx, JSModuleDef *m)
{
  JSRuntime *rt = JS_GetRuntime(ctx);
  JS_NewClassID(&tjs_timer_class_id);
  JS_NewClass(rt, tjs_timer_class_id, &tjs_timer_class);
  return JS_SetModuleExportList(ctx, m, js_uv_funcs, countof(js_uv_funcs));
}
JSModuleDef *js_init_module_uv(JSContext *ctx, const char *module_name)
{
  JSModuleDef *m = JS_NewCModule(ctx, module_name, js_uv_init);
  if (!m)
  {
    return NULL;
  }
  JS_AddModuleExportList(ctx, m, js_uv_funcs, countof(js_uv_funcs));
  return m;
}

JSContext *js_init_context()
{
  JSRuntime *rt = JS_NewRuntime();
  js_std_init_handlers(rt);
  JSContext *ctx = JS_NewContext(rt);
  js_init_module_std(ctx, "std");
  js_init_module_os(ctx, "os");
  js_init_module_uv(ctx, "uv");
  return ctx;
}
void run_js(JSContext *ctx)
{
  const char *str =
      "import * as std from 'std'\n"
      "import * as uv from 'uv'\n"
      "import * as os from 'os'\n"
      "globalThis.std = std\n"
      "globalThis.uv = uv\n"
      "globalThis.os = os\n"
      "var console = {};\n"
      "console.log = function(msg) {\n"
      "  std.printf(msg + '\\n');\n"
      "}\n"
      "globalThis.console = console;\n";
  JSValue init_compile = JS_Eval(
      ctx, str, strlen(str), "<input>", JS_EVAL_TYPE_MODULE | JS_EVAL_FLAG_COMPILE_ONLY);
  js_module_set_import_meta(ctx, init_compile, 1, 1);
  JSValue init_run = JS_EvalFunction(ctx, init_compile);

  const char *buf =
      "function test(){"
      "console.log('hello');\n"
      "var timer1 = uv.setTimeout(function(){console.log('uv timeout 1000');}, 1000);\n"
      "uv.clearTimeout(timer1);\n"
      "var f = () => {var timer2 = uv.setTimeout(function(){console.log('uv timeout 1001'); f(); }, 1001);}\n"
      "f();\n"
      "Promise.resolve().then(function() {\n"
      "console.log('2000');\n"
      "f();\n"
      "})\n"
      "console.log('end eval');\n"
      "}\n"
      "test();"
      "console.log('end code');\n"
      ;
  JSValue result = JS_Eval(ctx, buf, strlen(buf), "test", JS_EVAL_TYPE_MODULE);
  js_std_loop(ctx);
  int clen;
  if (JS_ToInt32(ctx, &clen, result) != 0)
  {
    js_std_dump_error(ctx);
  }
  printf("exit run_js\n");
}

void on_walk_cb(uv_handle_t* handle, void* arg) {
  printf("====================> on_walk_cb %p\n", handle);
  uv_timer_data_t *data = (uv_timer_data_t *)handle->data;
  clear_timer(data);
  if(!uv_is_closing(handle)){
    uv_close(handle, uv__timer_close);
  }
}
static void onTimerTick(uv_timer_t *handle)
{
  JSContext *ctx = (JSContext *)handle->data;
  printf("====================> timer tick\n");
  uv_stop(main_loop);
  int result = uv_loop_close(main_loop);
  printf("result = %s %d\n", uv_err_name(result), result);
  if(result == UV_EBUSY){
    uv_walk(main_loop, on_walk_cb, NULL);
    uv_run(main_loop, UV_RUN_DEFAULT);
    printf("====================> timer tick end\n");
  }
}

int main()
{
  JSContext *ctx = js_init_context();
  main_loop = uv_default_loop();
  uv_loop_init(&js_loop_struct);
  js_loop = &js_loop_struct;

  uv_timer_t *timerHandle = calloc(1, sizeof(uv_timer_t));
  timerHandle->data = ctx;
  // 把 handle 绑到 loop 上
  uv_timer_init(js_loop, timerHandle);
  // 把 callback 绑到 handle 上，并启动 timer
  uv_timer_start(timerHandle, onTimerTick, 3000, 0);
  
  run_js(ctx);
  
  // 启动event loop
  int r_js = 1;
  int r_ma = 1;
  while(r_js || r_ma){
    r_js = uv_run(js_loop, UV_RUN_NOWAIT);
    r_ma = uv_run(main_loop, UV_RUN_NOWAIT);
  }
  JS_FreeContext(ctx);
  JS_FreeRuntime(JS_GetRuntime(ctx));
  printf("uv_run() done.\n");
  return 0;
}

　　我在编译.a库是启用了两个DUMP宏 

#define DUMP_LEAKS  1
#define DUMP_MEM

　　运行结果

D:\test\quickjs\examples\libuv>bin\main.exe
hello
js_uv_setTimeout
js_uv_setTimeout
end eval
end code
2000
js_uv_setTimeout
exit run_js
setTimeout callback 0000000000BF5478
uv timeout 1001
js_uv_setTimeout
setTimeout callback 0000000000BF5E18
uv timeout 1001
js_uv_setTimeout
setTimeout callback 0000000000BF5398
uv timeout 1001
js_uv_setTimeout
setTimeout callback 0000000000BF5558
uv timeout 1001
js_uv_setTimeout
====================> timer tick
result = EBUSY -4082
====================> on_walk_cb 0000000000BF52B8
====================> on_walk_cb 0000000000BF5478
====================> on_walk_cb 0000000000BF5E18
====================> on_walk_cb 0000000000BF5398
====================> on_walk_cb 0000000000BF5558
====================> on_walk_cb 0000000000BF57F8
====================> on_walk_cb 0000000000BF5EF8
====================> timer tick end
QuickJS memory usage -- BigNum 2021-03-27 version, 64-bit, malloc limit: -1

  712 + 0   JSRuntime
  488 + 0   JSContext
   80 + 0   JSObject
   40 + 0   JSString
  136 + 0   JSFunctionBytecode

JSObject classes

NAME                    COUNT     SIZE
memory allocated          552    55038  (99.7 per block)
memory used               395    31082  (8 overhead, 60.6 average slack)
atoms                     302    22568  (74.7 per atom)
strings                     1       46  (46.0 per string)
uv_run() done.

四、代码讲解

　　封装成一个类导出，这一点参考上一章节，主要是通过 JSClassID JSClassDef 来创建。
　　封装数据成一个结构体 typedef struct _uv_timer_data {} uv_timer_data_t;
　　常规的对函数进行绑定 setTimeout、clearTimeout

　　main函数这里，主要是创建两个uv_loop。主线程用来跑run_js脚本，main_loop线程用来跑setTimeout的异步函数。js_loop用来定时触发关闭main_loop线程。模拟关闭js程序。这样就能实现，通过加载js脚本作为一个应用，然后又可以关闭这个js应用。整体代码还是比较简单理解的。最后的JS_FreeContext、JS_FreeRuntime是用来关闭js运行时，同时由于编译的时候启用了 DUMP_LEAKS 宏，可以很方便的测试，运行的js脚本有没有内存泄露。这是一个很不错的功能。

int main()
{
  JSContext *ctx = js_init_context();
  main_loop = uv_default_loop();
  uv_loop_init(&js_loop_struct);
  js_loop = &js_loop_struct;

  uv_timer_t *timerHandle = calloc(1, sizeof(uv_timer_t));
  timerHandle->data = ctx;
  // 把 handle 绑到 loop 上
  uv_timer_init(js_loop, timerHandle);
  // 把 callback 绑到 handle 上，并启动 timer
  uv_timer_start(timerHandle, onTimerTick, 3000, 0);
  
  run_js(ctx);
  
  // 启动event loop
  int r_js = 1;
  int r_ma = 1;
  while(r_js || r_ma){
    r_js = uv_run(js_loop, UV_RUN_NOWAIT);
    r_ma = uv_run(main_loop, UV_RUN_NOWAIT);
  }
  JS_FreeContext(ctx);
  JS_FreeRuntime(JS_GetRuntime(ctx));
  printf("uv_run() done.\n");
  return 0;
}

　　下面这个代码，是通过js_loop线程，在3s后，关闭js主线程，实现关闭js应用。由于我的js线程，里面通过setTimeout嵌套，是永远不会退出的。因此需要这个来实现关闭js应用。又由于直接通过uv_stop是无法关闭main_loop线程的。通过查资料，是需要通过uv_walk+uv_run，然后通知handle的walk回调，然后调用uv_close主动关闭。由于通过uv_close关闭setTimeout的js_loop线程，会导致setTimeout的回调函数里的变量没有经过 js_uv_setTimeout_cb函数调用，并且通过JS_Freexxx释放内存，因此，需要在这里调用clear_timer释放内存，否则在main函数调用JS_FreeRuntime会提示内存泄露。

void on_walk_cb(uv_handle_t* handle, void* arg) {
  printf("====================> on_walk_cb %p\n", handle);
  uv_timer_data_t *data = (uv_timer_data_t *)handle->data;
  clear_timer(data);
  if(!uv_is_closing(handle)){
    uv_close(handle, uv__timer_close);
  }
}
static void onTimerTick(uv_timer_t *handle)
{
  JSContext *ctx = (JSContext *)handle->data;
  printf("====================> timer tick\n");
  uv_stop(main_loop);
  int result = uv_loop_close(main_loop);
  printf("result = %s %d\n", uv_err_name(result), result);
  if(result == UV_EBUSY){
    uv_walk(main_loop, on_walk_cb, NULL);
    uv_run(main_loop, UV_RUN_DEFAULT);
    printf("====================> timer tick end\n");
  }
}

　　下面的代码是，setTimeout、clearTimeout 如何通过libuv进行实现的。 js_uv_setTimeout：通过JS_NewObjectClass创建一个Timer类。并将回调函数，运行时，绑定libuv-handle等封装成结构体后，调用uv_timer_start。并在delay后执行。在delay后，通过JS_Call执行绑定的回调函数。并释放内存。

static void js_uv_setTimeout_cb(uv_timer_t *handle)
{
  printf("setTimeout callback %p\n", handle);
  uv_timer_data_t *data = (uv_timer_data_t *)handle->data;
  JSContext *ctx = data->ctx;
  JSValue func = JS_DupValue(ctx, data->func);
  JSValue ret = JS_Call(ctx, func, JS_UNDEFINED, 0, NULL);
  JS_FreeValue(ctx, func);
  if (JS_IsException(ret))
  {
    js_std_dump_error(ctx);
  }
  JS_FreeValue(ctx, ret);
  clear_timer(data);
  return;
}
static JSValue js_uv_setTimeout(JSContext *ctx, JSValueConst this_val,
                                int argc, JSValueConst *argv)
{
  printf("js_uv_setTimeout\n");
  int delay;
  JSValueConst func;
  func = argv[0];
  if (!JS_IsFunction(ctx, func))
  {
    printf("Not a function!\n");
    return JS_EXCEPTION;
  }
  JS_ToInt32(ctx, &delay, argv[1]);

  JSValue obj = JS_NewObjectClass(ctx, tjs_timer_class_id);
  if (JS_IsException(obj))
  {
    return JS_EXCEPTION;
  }

  uv_timer_data_t *data = calloc(1, sizeof(uv_timer_data_t));
  data->ctx = ctx;
  data->func = JS_DupValue(ctx, func);
  data->handle.data = data;

  uv_timer_init(main_loop, &data->handle);
  uv_timer_start(&data->handle, js_uv_setTimeout_cb, delay, 0);

  JS_SetOpaque(obj, data);
  return obj;
}
static JSValue js_uv_clearTimeout(JSContext *ctx, JSValueConst this_val,
                                  int argc, JSValueConst *argv)
{
  uv_timer_data_t *data = (uv_timer_data_t *)JS_GetOpaque2(ctx, argv[0], tjs_timer_class_id);
  if (!data)
  {
    return JS_EXCEPTION;
  }
  uv_timer_stop(&data->handle);
  clear_timer(data);
  return JS_UNDEFINED;
}

　　这里的.finalizer .gc_mark我是没有用到。 至于这个 .finalizer类析构函数 没有用到，是因为，通过setTimeout设置回调函数后，js应用执行完或者在函数里面用setTimeout，会因为这个Timer类在生命周期内会自动删除，并执行finalizer回调。但是我们这个setTimeout一般不因为在变量生命周期内就停止的。因此这里没有用到finalizer，后面做iotjs设计时，这个Timer可能不能用类来实现。只能用普通的函数导出方式，然后挂载到globalThis这种方式。这种方式的话，要执行clearTimeout就比较麻烦，需要有个id来关闭这个setTimeout。后面在考虑怎么解决。

static JSClassDef tjs_timer_class = {
    "Timer",
    // .finalizer = tjs_timer_finalizer,
    .gc_mark = tjs_timer_gc_mark,
};

　　下面代码部分，我格式化成js显示

function test() {
  console.log('hello');
  var timer1 = uv.setTimeout(function () { console.log('uv timeout 1000'); }, 1000);
  uv.clearTimeout(timer1);
  var f = () => { var timer2 = uv.setTimeout(function () { console.log('uv timeout 1001'); f(); }, 1001); }
  f();
  Promise.resolve().then(function () {
    console.log('2000');
    f();
  })
  console.log('end eval');
}
test(); 
console.log('end code');

 

 

 

参考资料：

　　https://juejin.cn/post/6844904054032695304

　　https://juejin.cn/post/6844904054628302855

　　https://juejin.cn/post/6844903553031634952 (这一篇讲解EventLoop很好)

　　ES6 Promise 

　　https://www.cnblogs.com/lvdabao/p/es6-promise-1.html

　　https://www.cnblogs.com/lvdabao/p/5320705.html

　　https://www.cnblogs.com/lvdabao/p/jquery-deferred.html

 

本文地址：https://www.cnblogs.com/wunaozai/p/17877323.html

系列目录：https://www.cnblogs.com/wunaozai/p/17853962.html