如何在 Blazor WASM 中读取/导入 Sqlite 数据库？答案

【问题标题】：How to read/import a Sqlite database in Blazor WASM?如何在 Blazor WASM 中读取/导入 Sqlite 数据库？
【发布时间】：2022-11-26 01:48:35
【问题描述】：

它甚至可行吗？我所能找到的只是如何让它从应用程序内部运行，没有任何方法可以导入文件，该文件将是一个 byte[] 文件并制作它，以便可以实例化客户端并在其上读/写（在记忆中）。

【问题讨论】：

你不能在 blazor WASM 中执行文件 io。有一个内存模拟文件系统，但您只能读取您已经写入的内容。您可以通过对服务器的 AJAX（AJAJ？）调用加载数据
@MrCakaShaunCurtis - 浏览器领域正试图演变成一个通用平台。 WASM 就是其中的一个组成部分。服务器端、浏览器端、云边缘等。问题是你能不能，是的。我不一定会为数据库选择该路径 (WASM)，但 AI/ML/数据科学/数据收集应用程序将成为下一个杀手级技术。数据库只是其中的一个组成部分。我编写了使用浏览器中的数据库进行离线访问 (PWA) 的应用程序。然后定期与服务器重新同步。 SQLite 可以很好地用作这些类型应用程序的内存缓存数据库。
@约翰汉利。请原谅我的愤世嫉俗，但在我 66 岁时，我以前见过几次这样的事情。一个承诺的客户乌托邦，所有的东西都给所有人，瞬间下载并像 F1 赛车一样运行
@MrCakaShaunCurtis - 我在 Stack Overflow 上的工作中排除了政治因素。你能在 Wasm 中运行 SQLite 吗？是的。这是灵丹妙药吗？那是别人来决定的。从技术上讲，Wasm 有很多我们之前在各种架构中看到的弱点。 Wasm 甚至没有字符串的概念。您必须编写大量创可贴代码才能使任何事情变得严肃起来。那个恕我直言是设计中的一个大错误。我有丰富的语言和编译经验，在设计字节码格式时应该请教过那些比较了解的人。
@MrCakaShaunCurtis - 我们以前从未见过几家大公司绝对主导技术领域。谷歌、微软等决定我们明天将使用什么。以浏览器为例，开发人员对其未来的影响为零。浏览器现在在财务上占据主导地位，以至于公司必须服从谷歌的任何决定。该空间中没有选项。由于那个财务痛点，那个技术到处流传下来。 Wasm 会成功吗，是的，我们怎么想都没有关系。

标签： c# sqlite blazor webassembly

【解决方案1】：

这是可能的，但不是很可行，因为当您根据我的拙劣实验添加更多数据/表格时，它会导致现在出现一些奇怪的行为/错误。

首先，您通过 HTTP 调用将文件作为流读取并将其转换为 base64 字符串，如下所示：

var stream = await Http.GetStreamAsync("sqlite.db"); // file in the wwwroot
var buffer = new byte[stream.Length];
using var ms = new MemoryStream(buffer, 0, buffer.Length);
await stream.CopyToAsync(ms);

string base64 = Convert.ToBase64String(ms.ToArray());
await JS!.InvokeVoidAsync("fn.writeToCache", base64);

那么，这就是JavaScript功能实现：

window.fn = {
  writeToCache: async function (buffer) {
    const cachePath = `/data/cache/sqlite.db`;
    const cache = await caches.open('your-cache-name');
    const resp = await cache.match(cachePath);

    if (resp && resp.ok) {
      return false;
    } 

    const fileUrl = "data:application/octet-stream;base64," + buffer;
    const res = await fetch(fileUrl);
    const blob = await res.blob();

    const headers = new Headers({
      'content-length': blob.size
    });

    const response = new Response(blob, {
      headers
    });

    await cache.put(cachePath, response);

    console.log("Data cached.");

    location.Reload(); // Necessary step to be able to see the cache
  }
}

只是一些额外的注意事项：

/** Available only in secure contexts. */
declare var caches: CacheStorage; // <-- HTTPS only
declare var crossOriginIsolated: boolean;
declare var crypto: Crypto;
declare var indexedDB: IDBFactory;
// ...

安全上下文：此功能仅在安全上下文 (HTTPS) 中可用，在某些或所有支持的浏览器中可用。
标头: 缓存 API 不支持 HTTP 缓存标头。
键匹配密钥匹配算法取决于值中的VARY header。因此，匹配新键需要查看 Cache 对象中条目的键和值。因此，请确保按名称对缓存进行版本控制，并仅使用它们可以安全操作的脚本版本中的缓存。这是一个例子摩斯拉关于如何通过香草摆脱旧缓存JavaScript: Deleting old caches

【讨论】：