zlgopen / awtk-mvvm-c-hello

AWTK-MVVM完整演示项目
9 stars 3 forks source link

无法直接部署到web,踩坑完毕后发现无法显示页面 #21

Open Tracker647 opened 2 weeks ago

Tracker647 commented 2 weeks ago

首先提示找不到httpd头文件,在build.json的Includes加入"../awtk-restful-httpd/src/httpd"解决。

然后报错:

D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:217:14: error: call to undeclared function 'tcp_accept'; ISO C99 and later do not support implicit function declarations [-Wimplicit-function-declaration]
  217 |   int sock = tcp_accept(fd);
      |              ^
D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:228:7: error: call to undeclared function 'socket_close'; ISO C99 and later do not support implicit function declarations [-Wimplicit-function-declaration]
  228 |       socket_close(sock);
      |       ^
D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:232:5: error: call to undeclared function 'socket_close'; ISO C99 and later do not support implicit function declarations [-Wimplicit-function-declaration]
  232 |     socket_close(sock);
      |     ^
D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:242:10: error: call to undeclared function 'tcp_listen'; ISO C99 and later do not support implicit function declarations [-Wimplicit-function-declaration]
  242 |   sock = tcp_listen(httpd->port);
      |          ^
  260 |     socket_close(httpd->sock);
      |    

原因是httpd.c用的上述函数并没有被include。

在httpd.c加上

#include "tkc/wasm_helper.h"
#include "tkc/socket_helper.h"
#include "tkc/socket_helper_compat.h"

报错:

D:\Devtools\awtk\src\tkc/wasm_helper.h:33:9: warning: 'assert' macro redefined [-Wmacro-redefined]
   33 | #define assert(__pp) wasm_assert(__pp, #__pp)
      |         ^
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\assert.h:6:9: note: previous definition is here
    6 | #define assert(x) (void)0
      |         ^
In file included from D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:37:
D:\Devtools\awtk\src\tkc/wasm_helper.h:66:5: error: expected identifier or '('
   66 | int iswdigit(wchar_t ch);
      |     ^
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\wctype.h:48:22: note: expanded from macro 'iswdigit'
   48 | #define iswdigit(a) (0 ? iswdigit(a) : ((unsigned)(a)-'0') < 10)
      |                      ^
In file included from D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:37:
D:\Devtools\awtk\src\tkc/wasm_helper.h:66:5: error: expected ')'
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\wctype.h:48:22: note: expanded from macro 'iswdigit'
   48 | #define iswdigit(a) (0 ? iswdigit(a) : ((unsigned)(a)-'0') < 10)
      |                      ^
D:\Devtools\awtk\src\tkc/wasm_helper.h:66:5: note: to match this '('
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\wctype.h:48:21: note: expanded from macro 'iswdigit'
   48 | #define iswdigit(a) (0 ? iswdigit(a) : ((unsigned)(a)-'0') < 10)
      |                     ^
In file included from D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:37:
D:\Devtools\awtk\src\tkc/wasm_helper.h:71:5: error: expected identifier or '('
   71 | int islower(int c);
      |     ^
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\ctype.h:33:21: note: expanded from macro 'islower'
   33 | #define islower(a) (0 ? islower(a) : ((unsigned)(a)-'a') < 26)
      |                     ^
In file included from D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:37:
D:\Devtools\awtk\src\tkc/wasm_helper.h:71:5: error: expected ')'
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\ctype.h:33:21: note: expanded from macro 'islower'
   33 | #define islower(a) (0 ? islower(a) : ((unsigned)(a)-'a') < 26)
      |                     ^
D:\Devtools\awtk\src\tkc/wasm_helper.h:71:5: note: to match this '('
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\ctype.h:33:20: note: expanded from macro 'islower'
   33 | #define islower(a) (0 ? islower(a) : ((unsigned)(a)-'a') < 26)
      |                    ^
In file included from D:\Devtools\awtk-restful-httpd\src\httpd\httpd.c:37:
D:\Devtools\awtk\src\tkc/wasm_helper.h:83:16: error: conflicting types for 'wcsstr'
   83 | const wchar_t* wcsstr(const wchar_t* s1, const wchar_t* s2);
      |                ^
D:\Devtools\emsdk\upstream\emscripten\cache\sysroot/include\wchar.h:75:10: note: previous declaration is here
   75 | wchar_t *wcsstr (const wchar_t *__restrict, const wchar_t *__restrict);
      |          ^
1 warning and 5 errors generated.

又改为:

#define WITH_SOCKET 1
#include "tkc/socket_helper.h"
#include "tkc/socket_helper_compat.h"

解决。

然后编译提示undefined symbol, 继续在build.json添加路径,修改完毕的build.json如下(项目README提到的依赖我是安装在同级目录):

{
  "name": "mvvmhello",
  "version": "1.0",
  "assets": "res/assets",
  "includes": [
    ".",
    "src/common",
    "src/view_models",
    "3rd/sqlite3",
    "../awtk-mvvm/src",
    "../awtk-ui-automation/src",
    "../awtk-restful-httpd/src",
    "../awtk-restful-httpd/src/httpd",
    "../awtk-widget-table-view/src",
    "../awtk-widget-slidable-row/src",
    "../awtk-widget-table-view-mvvm/src"
  ],
  "sources": [
    "src/*.c",
    "src/*.h",
    "src/common/*.c",
    "src/common/*.h",
    "src/view_models/*.c",
    "src/view_models/*.h",
    "res/assets.inc",
    "res/assets/__assets_default.inc",
    "../awtk-restful-httpd/src/httpd/*.c",
    "../awtk-restful-httpd/src/httpd/*.h",
    "../awtk-widget-table-view/src/*.c",
    "../awtk-widget-table-view/src/*.h",
    "../awtk-widget-table-view/src/table_client/*.c",
    "../awtk-widget-table-view/src/table_client/*.h",
    "../awtk-widget-table-view/src/table_header/*.c",
    "../awtk-widget-table-view/src/table_header/*.h",
    "../awtk-widget-table-view/src/table_row/*.c",
    "../awtk-widget-table-view/src/table_row/*.h",
    "../awtk-widget-table-view/src/table_view/*.c",
    "../awtk-widget-table-view/src/table_view/*.h",
    "../awtk-ui-automation/src/automation_agent/*.c",
    "../awtk-ui-automation/src/automation_agent/*.h",
    "../awtk-widget-slidable-row/src/*.c",
    "../awtk-widget-slidable-row/src/*.h",
    "../awtk-widget-slidable-row/src/confirmable_button/*.c",
    "../awtk-widget-slidable-row/src/confirmable_button/*.h",
    "../awtk-widget-slidable-row/src/slidable_row/*.c",
    "../awtk-widget-slidable-row/src/slidable_row/*.h",
    "../awtk-widget-table-view-mvvm/src/*.c",
    "../awtk-widget-table-view-mvvm/src/*.h",
    "../awtk-mvvm/src/mvvm/base/*.c",
    "../awtk-mvvm/src/mvvm/base/*.h",
    "../awtk-mvvm/src/mvvm/awtk/*.c",
    "../awtk-mvvm/src/mvvm/awtk/*.h",
    "../awtk-mvvm/src/mvvm/hardware/*.c",
    "../awtk-mvvm/src/mvvm/hardware/*.h",
    "../awtk-mvvm/src/mvvm/*.c",
    "../awtk-mvvm/src/mvvm/*.h"
  ],
  "web": {
    "includes": [
      ".",
      "src",
      "src/common",
      "src/view_models",
      "3rd/sqlite3",
      "../awtk/src/csv",
      "../awtk/src/streams/mem",
      "../awtk/src/streams/file",
      "../awtk/src/service/",
      "../awtk-mvvm/src",
      "../awtk-mvvm/src/mvvm",
      "../awtk-mvvm/src/mvvm/base",
      "../awtk-mvvm/src/mvvm/awtk",
      "../awtk-mvvm/src/mvvm/hardware",
      "../awtk-mvvm/src/mvvm/view_models",
      "../awtk-widget-table-view/src",
      "../awtk-widget-slidable-row/src",
      "../awtk-widget-table-view-mvvm/src"
    ],
    "sources": [
      "src/*.c",
      "src/*.h",
      "src/common/*.c",
      "src/common/*.h",
      "src/view_models/*.c",
      "src/view_models/*.h",
      "res/assets.inc",
      "res/assets/__assets_default.inc",
      "../awtk/src/csv/*.c",
      "../awtk/src/csv/*.h",
      "../awtk/src/streams/mem/istream_mem.c",
      "../awtk/src/streams/mem/istream_mem.h",
      "../awtk/src/streams/file/istream_file.c",
      "../awtk/src/streams/file/istream_file.h",
      "../awtk/src/service/*.c",
      "../awtk/src/service/*.h",
      "../awtk/src/tkc/wasm_helper.h",
      "../awtk-widget-table-view/src/*.c",
      "../awtk-widget-table-view/src/*.h",
      "../awtk-widget-table-view/src/table_client/*.c",
      "../awtk-widget-table-view/src/table_client/*.h",
      "../awtk-widget-table-view/src/table_header/*.c",
      "../awtk-widget-table-view/src/table_header/*.h",
      "../awtk-widget-table-view/src/table_row/*.c",
      "../awtk-widget-table-view/src/table_row/*.h",
      "../awtk-widget-table-view/src/table_view/*.c",
      "../awtk-widget-table-view/src/table_view/*.h",
      "../awtk-widget-slidable-row/src/*.c",
      "../awtk-widget-slidable-row/src/*.h",
      "../awtk-widget-slidable-row/src/confirmable_button/*.c",
      "../awtk-widget-slidable-row/src/confirmable_button/*.h",
      "../awtk-widget-slidable-row/src/slidable_row/*.c",
      "../awtk-widget-slidable-row/src/slidable_row/*.h",
      "../awtk-widget-table-view-mvvm/src/*.c",
      "../awtk-widget-table-view-mvvm/src/*.h",
      "../awtk-mvvm/src/mvvm/*.c",
      "../awtk-mvvm/src/mvvm/*.h",
      "../awtk-mvvm/src/mvvm/awtk/*.c",
      "../awtk-mvvm/src/mvvm/awtk/*.h",
      "../awtk-mvvm/src/mvvm/base/*.c",
      "../awtk-mvvm/src/mvvm/base/*.h",
      "../awtk-mvvm/src/mvvm/hardware/*.c",
      "../awtk-mvvm/src/mvvm/hardware/*.h",
      "../awtk-mvvm/src/mvvm/view_models/*.c",
      "../awtk-mvvm/src/mvvm/view_models/*.h"
    ],
    "app_type": "c"
  },
  "android": {
    "app_name": "org.zlgopen.mvvmhello"
  },
  "ios": {
    "app_name": "org.zlgopen.mvvmhello"
  }
}

终于编译成功,但是服务器上看页面什么都没显示?

image

控制台输出:

image

Tracker647 commented 2 weeks ago

我用的编译命令是, 先前已用emsdk_env部署环境 python build.py ..\awtk-mvvm-c-hello\build.json all emcc编译中途曾报如下错误,不会强制停止编译过程,这个我是在vscode上用文本搜索抓到的:

 "D:/Devtools/emsdk/upstream/bin\clang.exe" --version
emcc: error: wasm2js does not support source maps yet (debug in wasm for now)
 -o D:\\Devtools\\awtk-web\\webroot\\mvvmhello\\js\\awtk_asm.js  -g4 -gsource-map   -DSAFE_HEAP=1 -DASSERTIONS=1 -DSTACK_OVERFLOW_CHECK=1  -s EXPORTED_RUNTIME_METHODS=@configs/export_runtime_funcs.json -s ALLOW_MEMORY_GROWTH=1 -s USE_SDL=2 -s EXPORTED_FUNCTIONS=@gen/export_all_funcs.json -DWITH_DATA_READER_WRITER  -DHAS_STD_MALLOC -DNDEBUG -DAWTK_WEB -Isrc/c  -DWITH_WINDOW_ANIMATORS -DWITH_NANOVG_GPU  -ID:\\Devtools\\awtk-web\\webroot\\mvvmhello\\res -I D:\\Devtools\\awtk-mvvm-c-hello\\3rd\\sqlite3 -I D:\\Devtools\\awtk-mvvm\\src\\mvvm\\hardware -I D:\\Devtools\\awtk\\src\\csv -I D:\\Devtools\\awtk\\src\\streams\\mem -I D:\\Devtools\\awtk-mvvm\\src -I D:\\Devtools\\awtk-mvvm-c-hello\\src\\view_models -I D:\\Devtools\\awtk-mvvm-c-hello -I D:\\Devtools\\awtk-widget-slidable-row\\src -I D:\\Devtools\\awtk-restful-httpd\\src\\httpd -I D:\\Devtools\\awtk-mvvm\\src\\mvvm -I D:\\Devtools\\awtk-widget-table-view\\src -I D:\\Devtools\\awtk-restful-httpd\\src

不知是不是和和这个有关,部署其他传统awtk项目就没弹出这个。

xianjimli commented 1 week ago

浏览器里是个受限环境,跑不了httpd服务。通常在嵌入式系统中启用httpd服务,AWTK web通过xml http request去请求httpd,获取数据来显示。

Tracker647 commented 1 week ago

浏览器里是个受限环境,跑不了httpd服务。通常在嵌入式系统中启用httpd服务,AWTK web通过xml http request去请求httpd,获取数据来显示。

那web上无法显示界面的问题如何解决,需要卸掉httpd服务吗?

Tracker647 commented 1 week ago

浏览器里是个受限环境,跑不了httpd服务。通常在嵌入式系统中启用httpd服务,AWTK web通过xml http request去请求httpd,获取数据来显示。

不太清楚你的意思,但我感觉httpd服务跟在web上无法显示应该是无关的,我自己按照mvvm-c-hello的sconstuct配置尝试把awtk-mvvm移植到designer的模版项目运行temperature1的例子,demo在桌面上正常运行,但是部署到web也是同样什么都无法显示。 反之,传统的awtk designer项目,部署到web上正常显示,但是按照上述方法移植mvvm后在web部署同样什么都不显示。 我不清楚是mvvm本身的问题还是我哪里配置错了。 我的模版项目demo: awtk_mvvm_project_template.zip

xianjimli commented 1 week ago

之前 mvvm 没有支持 web。你更新一下 awtk 和 awtk-mvvm,参考下这两个文件:

谢谢

Tracker647 commented 1 week ago

更新了,尝试部署awtk-mvvm新加的那个build.json,结果报错:

End of search list.
 "D:/Devtools/emsdk/upstream/bin\clang.exe" --version
 "D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" @C:\Users\nihaoa\AppData\Local\Temp\emscripten_cglknsh0.rsp.utf-8
wasm-ld: error: C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_gbgitw47\\view_model_conf_343.o: undefined symbol: csv_file_create
wasm-ld: error: C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_gbgitw47\\view_model_conf_343.o: undefined symbol: csv_file_object_create
emcc: error: 'D:/Devtools/emsdk/upstream/bin\wasm-ld.exe @C:\Users\nihaoa\AppData\Local\Temp\emscripten_cglknsh0.rsp.utf-8' failed (returned 1)
xianjimli commented 1 week ago

awtk也要更新

Tracker647 commented 1 week ago

awtk-web build.py里build_awtk_js有办法让它只编译部分未编译的文件吗? 调通mvvm到web的部署需要频繁执行这个脚本,每次都是把整个项目的文件到头到尾用emcc编译一遍,如果中间出了错误,到原项目改了以后还得重来,电脑主机cpu不好,每次编译过程长达3-4分钟,十分拖累。

Tracker647 commented 1 week ago

这次awtk和awtk-mvvm都更新过了。 awtk-mvvm上的demo1能正常在浏览器上运行,但是自己的模版项目一直报:

End of search list.
 "D:/Devtools/emsdk/upstream/bin\clang.exe" --version
 "D:/Devtools/emsdk/upstream/bin\wasm-ld.exe" @C:\Users\nihaoa\AppData\Local\Temp\emscripten__j8vxexh.rsp.utf-8
wasm-ld: error: C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_5k9spyft\\application_344.o: undefined symbol: mvvm_app_init
wasm-ld: error: C:\\Users\\nihaoa\\AppData\\Local\\Temp\\emscripten_temp_5k9spyft\\application_344.o: undefined symbol: mvvm_app_deinit
emcc: error: 'D:/Devtools/emsdk/upstream/bin\wasm-ld.exe @C:\Users\nihaoa\AppData\Local\Temp\emscripten__j8vxexh.rsp.utf-8' failed (returned 1)

我按照mvvm_for_web.md里的声明改了application.c,就变成了这种情况。

之前自己移植是修改main.c, 在\#include "awtk.h"下方加入

#include "mvvm_app.inc"

#define GLOBAL_INIT() mvvm_app_init()
#define GLOBAL_EXIT() mvvm_app_deinit()

这样demo程序运行时, 通过GLOBAL_INIT将跳转到mvvm_app_init。

不知道会不会和这个冲突,但是我如果把上面main.c的修改去掉的话scons桌面端是无法运行的。

模版项目目前只根据mvvm_for_web.md改了application.c,build.json如下:

{
    "name": "awtk_mvvm_project_template",
    "version": "1.0",
    "assets": "res/assets",
    "author": "AWTK Develop Team",
    "copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.",
    "themes":["default"],
    "web": {
      "app_type": "c",
      "assets": "design",
      "includes":[
        ".",
        "src",
        "src/common",
        "src/view_models",
        "D:/Devtools/awtk-mvvm/",
        "D:/Devtools/awtk-mvvm/src"
      ],
      "sources": [
        "src/*.c",
        "src/*/*.c",
        "D:/Devtools/awtk-mvvm/src/mvvm/*.c",
        "D:/Devtools/awtk-mvvm/src/mvvm/base/*.c",
        "D:/Devtools/awtk-mvvm/src/mvvm/awtk/*.c",
        "D:/Devtools/awtk-mvvm/src/mvvm/view_models/*.c"
      ],
      "config": {
        "fontScale": "0.8",
        "defaultFont": "sans"
      }
    }
  }

我不知道自己哪个步骤忘搞了。 现在的awtk_mvvm_project_template: awtk_mvvm_project_template.zip

Tracker647 commented 1 week ago

上述问题已解决,mvvm_for_web.md的声明需要改改,application.c上对

static ret_t mvvm_app_init(void);
static ret_t mvvm_app_deinit(void);

应该是实现而不是声明,因为没有源文件链接,上面两个函数真正的实现是放在了awtk-mvvm的mvvm_app.inc文件里面,引用不到。

解决方法: 在application.c加入:

#include "mvvm/mvvm.h"
static ret_t mvvm_app_init(void) {
  mvvm_init();
  return RET_OK;
}

static ret_t mvvm_app_deinit(void) {
  mvvm_deinit();
  return RET_OK;
}

然后再根据【调用 MVVM 初始化和反初始化函数】修改。

Tracker647 commented 1 week ago

根据mvvm_for_web.md文档的方法,还是无法在浏览器上显示mvvm_c_hello例子的内容,不过awtk designer的模版项目能移植mvvm并且部署到浏览器了。