정보실

웹학교

정보실

sql 웹에서 SQLite를 실행하는 자바 스크립트 라이브러리

본문

JavaScript로 컴파일 된 SQLite


https://github.com/sql-js/sql.js 


초조 한 사람들을 위해 여기 데모를 보십시오 : https://sql-js.github.io/sql.js/examples/GUI/


sql.js는 SQLite C 코드를 Emscripten으로 컴파일하고 기여 수학 및 문자열 확장 함수를 포함하여 SQLite를 Webassembly에 이식 한 포트입니다.


메모리에 저장된 가상 데이터베이스 파일을 사용하므로 데이터베이스의 변경 사항이 유지되지 않습니다.

그러나 기존 sqlite 파일을 가져오고 작성된 데이터베이스를 JavaScript 유형 배열로 내보낼 수 있습니다.


여기에 C 바인딩이나 node-gyp 컴파일이 없으며 sql.js는 일반적인 JavaScript 라이브러리처럼 사용할 수 있는 간단한 JavaScript 파일입니다. JavaScript로 원시 애플리케이션을 빌드하거나 (예 : Electron 사용) node.js에서 작업 중인 경우 SQLite의 JavaScript에 대한 기본 바인딩을 사용하는 것이 좋습니다.


SQLite는 공개 도메인이고 sql.js는 MIT 라이센스입니다.


Sql.js는 WebAssembly보다 이전 버전이므로 asm.js 프로젝트로 시작되었습니다. 이전 버전과의 호환성을 위해 asm.js를 계속 지원합니다.


Documentation 


소스 코드 내의 주석에서 생성 된 전체 문서를 사용할 수 있습니다.


용법 


기본적으로 sql.js는 wasm을 사용하므로 자바 스크립트 라이브러리 외에 .wasm 파일을 로드 해야 합니다. npm에서 sql.js를 설치 한 후 ./node_modules/sql.js/dist/sql-wasm.wasm에서 이 파일을 찾아 정적 자산에 추가하거나 CDN에서 로드 할 수 있습니다. 그런 다음 initSqlJs에 전달 된 구성 오브젝트의 locateFile 특성을 사용하여 파일의 위치를 ​​표시하십시오. 웹팩과 같은 자산 빌더를 사용하는 경우 이를 자동화 할 수 있습니다. sql.js를 webpack과 통합하고 반응하는 방법에 대한 이 데모를 참조하십시오.


const initSqlJs = require('sql.js');
// or if you are in a browser:
// var initSqlJs = window.initSqlJs;

const SQL = await initSqlJs({
  // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
  // You can omit locateFile completely when running in node
  locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.1.0/dist/${file}`
});

// Create a database
var db = new SQL.Database();
// NOTE: You can also use new SQL.Database(data) where
// data is an Uint8Array representing an SQLite database file

// Execute some sql
sqlstr = "CREATE TABLE hello (a int, b char);";
sqlstr += "INSERT INTO hello VALUES (0, 'hello');"
sqlstr += "INSERT INTO hello VALUES (1, 'world');"
db.run(sqlstr); // Run the query without returning anything

var res = db.exec("SELECT * FROM hello");
/*
[
  {columns:['a','b'], values:[[0,'hello'],[1,'world']]}
]
*/

// Prepare an sql statement
var stmt = db.prepare("SELECT * FROM hello WHERE a=:aval AND b=:bval");

// Bind values to the parameters and fetch the results of the query
var result = stmt.getAsObject({':aval' : 1, ':bval' : 'world'});
console.log(result); // Will print {a:1, b:'world'}

// Bind other values
stmt.bind([0, 'hello']);
while (stmt.step()) console.log(stmt.get()); // Will print [0, 'hello']

// You can also use JavaScript functions inside your SQL code
// Create the js function you need
function add(a, b) {return a+b;}
// Specifies the SQL function's name, the number of it's arguments, and the js function to use
db.create_function("add_js", add);
// Run a query in which the function is used
db.run("INSERT INTO hello VALUES (add_js(7, 3), add_js('Hello ', 'world'));"); // Inserts 10 and 'Hello world'

// free the memory used by the statement
stmt.free();
// You can not use your statement anymore once it has been freed.
// But not freeing your statements causes memory leaks. You don't want that.

// Export the database to an Uint8Array containing the SQLite database file
var binaryArray = db.export();


Demo 


여기에 몇 가지 예가 있습니다. 모든 기능을 갖춘 Sqlite Interpreter입니다.


Examples 


테스트 파일은 최신 API 사용 예제를 제공합니다.


브라우저 내부 


HTML 파일 예 :

<meta charset="utf8" />
<html>
  <script src='/dist/sql-wasm.js'></script>
  <script>
    config = {
      locateFile: filename => `/dist/${filename}`
    }
    // The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
    // We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
    initSqlJs(config).then(function(SQL){
      //Create the database
      var db = new SQL.Database();
      // Run a query without reading the results
      db.run("CREATE TABLE test (col1, col2);");
      // Insert two rows: (1,111) and (2,222)
      db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);

      // Prepare a statement
      var stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
      stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}

      // Bind new values
      stmt.bind({$start:1, $end:2});
      while(stmt.step()) { //
        var row = stmt.getAsObject();
        console.log('Here is a row: ' + JSON.stringify(row));
      }
    });
  </script>
  <body>
    Output is in Javascript console
  </body>
</html>


사용자가 선택한 파일에서 데이터베이스 생성 


SQL.Database 생성자는 데이터베이스 파일을 나타내는 정수 배열을 선택적 매개 변수로 사용합니다. 

다음 코드는 HTML 입력을 데이터베이스 로드 소스로 사용합니다.


dbFileElm.onchange = () => {
  var f = dbFileElm.files[0];
  var r = new FileReader();
  r.onload = function() {
    var Uints = new Uint8Array(r.result);
    db = new SQL.Database(Uints);
  }
  r.readAsArrayBuffer(f);
}


참조 : http://kripken.github.io/sql.js/examples/GUI/gui.js


서버에서 데이터베이스 로드 


var xhr = new XMLHttpRequest();
// For example: https://github.com/lerocha/chinook-database/raw/master/ChinookDatabase/DataSources/Chinook_Sqlite.sqlite
xhr.open('GET', '/path/to/database.sqlite', true);
xhr.responseType = 'arraybuffer';

xhr.onload = e => {
  var uInt8Array = new Uint8Array(xhr.response);
  var db = new SQL.Database(uInt8Array);
  var contents = db.exec("SELECT * FROM my_table");
  // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
};
xhr.send();


참조 : https://github.com/sql-js/sql.js/wiki/Load-a-database-from-the-server


node.js에서 사용 


sql.js는 npm에서 호스팅 됩니다. 설치하려면 npm install sql.js를 실행하면 됩니다. 또는 아래 다운로드 링크에서 sql-wasm.js 및 sql-wasm.wasm을 다운로드 할 수 있습니다.



페이지 정보

조회 14회 ]  작성일20-03-19 22:48

웹학교