sql.jssqlite_嵌⼊式浏览器SQLite：SQL.Js
sql.js sqlite
介绍 (Introduction)
Sometimes your application will provide so little data, that it may be overkill to provide an API to access it. In such case you might want to embedded the database within your application. Actually, this technique is used for a while in mobile applications. It can be useful to speed up low bandwidth devices, boost application launch and more. Thing is, I’m a web developer and I wanted to be able to do the same in one of my web application.
有时，您的应⽤程序提供的数据太少，以⾄于提供访问它的API可能会过⼤。 在这种情况下，您可能希望将数据库嵌⼊到应⽤程序中。 实际上，此技术在移动应⽤程序中使⽤了⼀段时间。 加快低带宽设备的速度，促进应⽤程序的启动等等可能很有⽤。 是的，我是⼀名Web开发⼈员，我希望能够在我的⼀个Web应⽤程序中执⾏相同的操作。
标准 (Standard)
The recommended and compatible way to store data in Browser is by using the . Thing is, it uses a diff
erent approach than pure SQL, as explained in documentation. The API is also tedious to use, that is why recommend to use more programmer-friendly library for simple usages. And to finish, format being younger it is not as supported as .
推荐的兼容⽅法是使⽤在Browser中存储数据。 事实是，它使⽤的⽅法不同于纯SQL，如⽂档中所述。 该API的使⽤也很繁琐，因此建议使⽤对程序员更友好的库来简化⽤法。 最后， 格式还不如受到⽀持。
Based on that, I wanted to try to load a SQLite database into my browser and request it. The database contains some 13 thousand entries about file extension information. The application provides the company and software associated to a file extension searched by users.
基于此，我想尝试将⼀个SQLite数据库加载到我的浏览器中并请求它。 该数据库包含约1.3万个有关⽂件扩展名信息的条⽬。 该应⽤程序提供与⽤户搜索的⽂件扩展名相关的公司和软件。
⽹络组装 (Web Assembly)
MDN describes as a way to run code written in multiple languages on the web at near native speed, allowing us to run a whole new class of programs. It is a low-level assembly-like language with a co
mpact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It works by compiling code to byte-code and loading it using .
MDN将描述为⼀种以接近本机的速度运⾏以多种语⾔编写的代码的⽅法，从⽽使我们能够运⾏全新的程序类。 它是⼀种类似于汇编语⾔的低级语⾔，具有紧凑的⼆进制格式，具有接近本机的性能，并为C / C ++和Rust等语⾔提供了编译⽬标，以便它们可以在Web上运⾏。 它通过将代码编译为字节代码并使⽤加载来⼯作。
Web Assembly
⽹络组装
Usages can be : * Porting a C/C++ application with Emscripten. * Writing or generating Web Assembly directly at the assembly level. * Writing a Rust application and targeting Web Assembly as its output. * Using AssemblyScript which looks similar to Type Script and compiles to Web Assembly binary.
⽤法可以是：*⽤Emscripten移植C / C ++应⽤程序。 *直接在程序集级别编写或⽣成Web程序集。 *编写Rust应⽤程序，并以Web Assembly作为输出。 *使⽤外观类似于Type Script的AssemblyScript并编译为Web Assembly⼆进制⽂件。
SQL.js (SQL.js)
A while ago I’ve heard about a project to load and parse PDF files directly in the browser and learned that it uses a port of . So I begun to search for a port of SQLite client and by chance, found the awesome project done by Alon Zakai. It provides a port to Web Assembly and a JavaScript loader.
不久前，我听说过⼀个直接在浏览器中加载和解析PDF⽂件的项⽬，并了解到该项⽬使⽤端⼝。 因此，我开始搜索SQLite客户端的端⼝，偶然发现了Alon Zakai完成的项⽬。 它提供了Web程序集和JavaScript加载程序的端⼝。
To install, it was a breeze as there is a first release and an npmjs package. You can check the documentation for different usages.
要安装，很容易，因为有第⼀个版本和npmjs软件包。 您可以查看⽂档中的不同⽤法。
npm install --save sql.js
Webpack (Webpack)
So I decided to start working on this project, because I didn’t find any API listing file extensions. I made a SQLite database and created a React application to showcase it.
因此，我决定开始从事这个项⽬，因为我没有到任何API 列表⽂件扩展名 。 我创建了⼀个SQLite数据库并创建了⼀个React应⽤程序来展⽰它。
While in the process of implementing the solution I found some blockers that I wanted to share for those having the same issues.
在实施解决⽅案的过程中，我发现了⼀些我想与遇到同样问题的⼈分享的障碍。
To run SQL.js the module need to load the WASM file in order to parse the SQLite database. Thing is, because I used Webpack 4, I always got the following error when trying to load it from the bundle :
要运⾏SQL.js，该模块需要加载WASM⽂件才能解析SQLite数据库。 事情是，因为我使⽤了Webpack 4 ，所以在尝试从包中加载它时总是遇到以下错误：
`Web Assembly module is included in initial chunk. This is not allowed, because Web Assembly download and
compilation must happen asynchronous.`
Web程序集模块包含在初始块中。 不允许这样做，因为Web程序集的下载和编译必须异步进⾏。
Making some researches learned me that Webpack is not fully compatible with Web Assembly for the moment, so I
couldn’t include it with my bundle. So I hacked my way by loading directly the wasm file from SQL.js repository (not a big fan of that but it worked) :
进⾏⼀些研究后，我了解到Webpack⽬前尚不能与Web Assembly 完全兼容 ，因此我⽆法将其包含在捆绑软件中。 因此，我通过直接从SQL.js存储库中加载wasm⽂件来破解⾃⼰的⽅式(虽然不⼤喜欢它，但它确实有效)：
let config = {
locateFile: filename => `cdn.rawgit/kripken/sql.js/v1.0.1/dist/${filename}`}
This way you can pass the `config` object to SQL.js initialization function and it will load the wasm from the specified location.
这样，您可以将config对象传递给SQL.js初始化函数，它将从指定位置加载wasm。
打包数据库 (Pack the database)
I also needed to embedded the database with my application, this was more straightforward as Webpack provides a file-loader to include any binary file to your project. To use it you just have to add this to your Webpack configuration file.
我还需要将数据库嵌⼊到我的应⽤程序中，这更加简单，因为Webpack提供了⼀个⽂件加载器来将任何⼆进制⽂件包含到您的项⽬中。 要使⽤它，只需将其添加到Webpack配置⽂件中。
{
test: /\.(sqlite)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
]},
After that, you just import your database to get the URL on your server. I did it this way :
之后，只需导⼊数据库即可在服务器上获取URL。 我这样做是这样的：
import database from '../assets/database.sqlite';
加载数据库 (Load the database)
Now that we have our SQL.js initialized and our database packed with our application we need to load it as SQL.js do not provide database loading by URL. shows you how to do it, I used the same code and specified the database path.
现在我们已经初始化了SQL.js ，并且数据库与应⽤程序⼀起打包 ，我们需要加载它，因为SQL.js不提供按URL加载数据库的功能。 显⽰了如何执⾏此操作，我使⽤了相同的代码并指定了数据库路径。
web浏览器在哪里打开var xhr = new XMLHttpRequest();
xhr.open('GET', database, true);
var uInt8Array = new sponse);
var db = new SQL.Database(uInt8Array);};
xhr.send();
请求数据库 (Request the database)
You can check the relevant code in the `Search.js` React component in . It will search based on requested extension and update the Redux store afterwards.
您可以在 Search.js React组件中检查相关代码。 它将根据请求的扩展名进⾏搜索，然后更新Redux存储。
观看演⽰ (See the demo)
Hoping that it will be useful for those who wants to embedded little databases within their web browser applications. Moreover I was thinking that by not accessing an API to request the database on a server, this removes server security breach through SQL injection.
希望对那些希望在其Web浏览器应⽤程序中嵌⼊少量数据库的⼈有⽤。 此外，我还认为，通过不访问API来请求服务器上的数据库，这可以消除SQL注⼊导致的服务器安全漏洞。
I also wanted to thanks Cory House for his starter kit with React + React-redux which I used to make this application.
我还想感谢Cory House提供的带有我的React + React-redux的⼊门套件，我曾⽤它来制作此应⽤程序。
sql.js sqlite

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。