前端框架小實驗-在umi框架中以worker執行緒方式使用SQL.js的wasm

總述：在Win7環境下配置umijs框架，在框架中用worker執行緒方式使用SQL.js的wasm，在瀏覽器端實作資料的增刪改查以及資料庫匯出匯入，

一、安裝node.js

1、Win7系統只支持node.js v13.14.0或更早，所以從https://nodejs.org/download/release/v13.14.0/node-v13.14.0-x64.msi 下載舊版安裝包

2、安裝時勾選“Automatically install the necessary tools......”

3、安裝程式會自動進行環境變數配置，如需手動配置：

a、新建“NODE_PATH”，值為nodejs的安裝目錄

b、修改變數Path的值，值的后面添加“;%NODE_PATH%”

4、打開控制臺執行node -v，顯示node版本說明安裝成功，

二、配置三種包管理工具

1、執行npm -v查看npm版本，執行npm i -g npm可更新npm自身，更新為新版后，新版npm會在Win7環境下報錯，但并不影響使用，

2、設定淘寶倉庫：npm config set registry https://registry.npm.taobao.org，查看倉庫設定：npm config get registry

3、執行npm i -g cnpm安裝cnpm，安裝完畢后執行cnpm -v顯示cnpm版本說明安裝成功

4、執行cnpm i -g yarn安裝yarn，安裝完畢后執行yarn --version顯示yarn版本說明安裝成功

5、為yarn配置淘寶源：

yarn config set registry https://registry.npm.taobao.org -g 

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

三、安裝umijs

1、建立一個工程目錄，比如myapp

2、在該目錄下執行yarn create @umijs/umi-app或npx @umijs/create-umi-app創建專案，目錄下生成以下檔案：

3、執行yarn安裝依賴，安裝完成后目錄下出現node_modules檔案夾，含有所有依賴

4、執行yarn start啟動專案，如下顯示則啟動成功：

 5、執行cnpm i -g umi全域安裝umi則可以直接使用umi dev命令啟動專案（umi build打包），否則需要使用npx umi dev啟動

6、執行yarn add antd或cnpm i antd安裝ant design組件

四、命令列方式使用SQLite資料庫

1、在SQLite官方網站https://www.sqlite.org/download.html下載Window安裝包，需要下載 sqlite-tools 和 sqlite-dll 兩個壓縮檔案，

2、建立一個sqlite3檔案夾，將壓縮檔案解壓在這里，解壓后檔案夾內容如下：

 3、將這個檔案夾添加到環境變數的Path屬性中，請注意不要在環境變數中混用Path、PATH、path，否則會相互覆寫，

4、在控制臺執行sqlite3進入sqlite3的命令列視窗：

 5、執行.open test.mydb打開一個叫做test.mydb的資料庫，如果不存在則將在該目錄下建立此資料庫，此資料庫檔案名即為test.mydb（可見SQLite并不要求檔案后綴），大小為0位元組，

6、建表：

執行create table test(id char(50),age int,name char(50));建立test表，注意如果不輸入分號按回車則sqlite將理解為多行陳述句而非執行，直到出現分號后按回車方才執行陳述句，

7、建表后test.mydb檔案發生變化：

 可見這是一個二進制檔案

8、插入一條資料

insert into test values('test',1,'test1');

9、查詢資料

直接把資料行列出，如下執行則可顯示表頭：

 五、建立測驗頁面

1、執行yarn add sql.js安裝sql.js庫，sql.js是一個致力于在前端執行sql指令的github專案，最初為純javaScript專案，從某個版本開始改為用SQLite的wasm編譯版本作為底層，目前前端界普遍認為wasm比js效率更高，

2、在pages下建立test /01testsqllite.js測驗頁面

 在.umirc.ts組態檔中配置這個測驗頁面的路由：

routes: [
  { path: '/', component: '@/pages/index' },
  { path: '/test1', component: '@/pages/test/01testsqllite' },
],

3、遺憾的是umi的底層Webpack并不默認支持wasm，直接在頁面中import SQL.js庫將導致運行錯誤，這時有兩種解決思路，一是對Webpack進行修改使之支持WebAssembly，比如https://www.cnblogs.com/detectiveHLH/p/9881626.html；二是跳過Webpack用其他方法引入SQL.js庫，這里選擇第二種思路，

4、進入myapp\node_modules\sql.js\dist目錄：

 復制sql-wasm.js、sql-wasm.wasm、worker.sql-wasm.js三個檔案，其中sql-wasm.js為主執行緒方式的wasm介面，worker.sql-wasm.js為worker執行緒方式的wasm介面，sql-wasm.wasm為通用的wasm檔案，

在專案根目錄下建立public目錄，將上述三個檔案粘貼到這里，這樣這三個檔案將不經Webpack處理原樣出現在編譯后的工程中，

六、操作資料庫

1、worker模式初始化資料庫：

 1 useEffect(()=>
 2     {
 3         if(!inited)//開發模式下這個useEffect將執行兩次
 4         {
 5             setInited(true);
 6             window.myObjUnit={};
 7             window.mySQLWorker2 = new Worker("worker.sql-wasm.js");//這個從dist中加載，在worker執行緒中運行
 8             const worker2 = window.mySQLWorker2;
 9             worker2.onerror = e => console.log("Worker2 error: ", e);
10             worker2.postMessage({//通知worker執行緒啟動資料庫
11                 id:1,
12                 action:"open",
13                 //buffer:buf, /*Optional. An ArrayBuffer representing an SQLite Database file*/可用來加載已有的資料庫，否則將建立新的資料庫
14             });
15 
16             worker2.onmessage = () => {
17                 console.log("Database opened");//啟動成功
18                 worker2.onmessage = event => {
19                     console.log(event.data); // The result of the query
20                 };
21 
22                 worker2.postMessage({
23                     id: 2,
24                     action: "exec",
25                     sql: "CREATE TABLE test (id char, age int, name char);",//建表
26                     //params: { "$id": 1 }
27                 });
28             };
29         }
30 
31     },[]);//初始化資料庫

執行后的Chrome控制臺輸出：

2、worker模式插入和查詢資料

 1 function addUnit(){
 2         if(window.myObjUnit)
 3         {
 4             var unitid="unit_"+countUnit;
 5             window.myObjUnit[unitid]={id:unitid};
 6             setCountUnit(countUnit+1);//命名序列加一
 7 
 8             const worker = window.mySQLWorker2;
 9             worker.postMessage({//順序發送指令
10                 id: 2,
11                 action: "exec",
12                 sql: "INSERT INTO test VALUES ($id,$age,$name)",
13                 params: { "$id": unitid ,"$age": 1,"$name": unitid}
14             });
15 
16             worker.postMessage({
17                 id: 2,
18                 action: "exec",
19                 sql: "SELECT id,age,name FROM test",
20                 //params: { "$id": 1 }
21             });
22 
23         }
24     }//添加一條記錄

點擊兩次“添加單位”后，Chrome控制臺的輸出：

 可以看到插入的兩條資料以及select陳述句回傳的資料結構，

3、worker模式匯出資料庫

改造一下頁面：

 如圖向worker執行緒發送export命令

再改造一下主執行緒的onmessage回應：

 1 worker2.onmessage = event => {
 2                     if(event.data.id==2)
 3                     {
 4                         console.log(event.data); // The result of the query
 5                     }
 6                     else if(event.data.id=="export2")
 7                     {//如果這個資訊的id是export2
 8                         var blob=new Blob([event.data.buffer],{type:"application/geopackage+sqlite3"});
 9                         var link=document.createElement("a");//則用超鏈接方式下載這個資料庫檔案
10                         link.href=https://www.cnblogs.com/ljzc002/archive/2022/04/05/window.URL.createObjectURL(blob);
11                         link.download="test.db";
12                         link.click();
13                         window.URL.revokeObjectURL(blob);
14                     }
15                 };

這時點擊“worker執行緒匯出資料”按鈕即可匯出test.db資料庫檔案

使用sqlite3命令列打開這個檔案，可以看到react程式中建立的資料表：

 同時觀察Chrome的Performance頁面，可以看到確實是由worker執行緒進行了export操作：

七、主執行緒模式操作

1、要在主執行緒中使用SQL.js，首先要把SQL.js庫添加到主執行緒的HTML中，這里使用umi的headScripts配置項實作：

修改.umirc.ts組態檔：

 1 import { defineConfig } from 'umi';
 2 
 3 export default defineConfig({
 4   nodeModulesTransform: {
 5     type: 'none',
 6   },
 7   routes: [
 8     { path: '/', component: '@/pages/index' },
 9     { path: '/test1', component: '@/pages/test/01testsqllite' },
10   ],
11   fastRefresh: {},
12     headScripts:[
13         {src:"worker.sql-wasm.js"}//這個是加到umi的HTML中的，在主執行緒中運行
14     ]
15 });

headScripts的配置方法見官方檔案：https://umijs.org/zh-CN/config#headscripts

2、exportDB方法中包含主執行緒的操作方法：

 1 function exportDB(){
 2         var config = {
 3             locateFile: file => "sql-wasm.wasm"
 4         }
 5         initSqlJs(config).then(function(SQL){//雖然這里呼叫的是worker.sql-wasm.js中的initSqlJs方法，但仍然運行在主執行緒中！
 6             var db = new SQL.Database();//建庫
 7             // Run a query without reading the results
 8             db.run("CREATE TABLE test (col1, col2);");
 9             // Insert two rows: (1,111) and (2,222)
10             db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
11             // Prepare a statement
12             var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
13             stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}
14 
15             // Bind new values
16             stmt.bind({$start:1, $end:2});
17             while(stmt.step()) { //
18                 var row = stmt.getAsObject();
19                 console.log('Here is a row: ' + JSON.stringify(row));
20             }
21             //var fs = require("fs");
22             var data = https://www.cnblogs.com/ljzc002/archive/2022/04/05/db.export();//這個data與worker2.onmessage回傳的event.data是一樣的！
23             //var buffer = new Buffer(data);
24             var blob=new Blob([data.buffer],{type:"application/geopackage+sqlite3"});
25             //fs.writeFileSync("filename.sqlite", buffer);
26             var link=document.createElement("a");
27             link.href=https://www.cnblogs.com/ljzc002/archive/2022/04/05/window.URL.createObjectURL(blob);
28             link.download="test.db";
29             link.click();
30             window.URL.revokeObjectURL(blob);
31 
32             //var w=new File
33 
34         });

觀察Performance可知計算都發生在主執行緒中（圖略）

八、匯入已有的資料庫檔案

1、通過input方式讀取本地檔案：

a、選擇檔案的input：

<input type={"file"} onChange={importFile}></input>

b、回應代碼：

 1 function importFile(e){
 2         var f = e.currentTarget.files[0];
 3         var r = new FileReader();
 4         r.onload = function() {
 5             var Uints = new Uint8Array(r.result);
 6             testImportDB(Uints)
 7 
 8         }
 9         r.readAsArrayBuffer(f);
10     }

2、通過ajax方式讀取遠程檔案：

a、觸發讀取的按鈕：

<Button onClick={importFile2}>讀取遠程檔案</Button>

b、回應代碼：

 1 function importFile2(){
 2         var xhr = new XMLHttpRequest();
 3         xhr.open('GET', 'test.mydb', true);
 4         xhr.responseType = 'arraybuffer';
 5         xhr.onload = e => {
 6             var Uints = new Uint8Array(xhr.response);
 7             testImportDB(Uints)
 8         }
 9         xhr.send();
10     }

3、撰寫主執行緒方式和worker執行緒方式匯入資料的方法：

 1 function testImportDB(Uints){
 2 
 3         //測驗主執行緒方式
 4         var config = {
 5             locateFile: file => "sql-wasm.wasm"
 6         }
 7         initSqlJs(config).then(function(SQL){
 8             var db = new SQL.Database(Uints);
 9             db.run("INSERT INTO test VALUES (?,?,?)", ["unitid",1,"unitid"]);
10             // Prepare a statement
11             var stmt = db.prepare("SELECT * FROM test ");
12             while(stmt.step()) { //
13                 var row = stmt.getAsObject();
14                 console.log('Here is a row: ' + JSON.stringify(row));
15             }
16         });
17         //測驗worker執行緒方式
18         const worker3 = new Worker("worker.sql-wasm.js");
19         worker3.postMessage({
20             id:1,
21             action:"open",
22             buffer:Uints,
23         });
24         worker3.onmessage = () => {
25             console.log("Database opened");
26             worker3.onmessage = event => {
27                 console.log(event.data); // The result of the query
28             };
29 
30             worker3.postMessage({
31                 id: 2,
32                 action: "exec",
33                 sql: "INSERT INTO test VALUES ($id,$age,$name)",
34                 params: { "$id": "unitid" ,"$age": 1,"$name": "unitid"}
35             });
36 
37             worker3.postMessage({
38                 id: 2,
39                 action: "exec",
40                 sql: "SELECT id,age,name FROM test",
41                 //params: { "$id": 1 }
42             });
43         };
44     }

兩種方式運行后（匯入的檔案都是最開始生成的test.mydb），Chrome控制臺均顯示：

 說明資料檔案匯入成功，

總結：以上實作了umi框架下的前端SQL基本操作，其中SQL.js操作部分參考了https://www.5axxw.com/wiki/content/50kxgo，

標籤：其他

上一篇：如何將函式應用于資料框的選定行

下一篇：NG-ZORRO中Upload上傳控制元件使用