WebSqlSync

自动将本地WebSql数据库（浏览器的SQLite）与服务器同步：

• 2 路同步：客户端 <-> 服务器
• 增量同步（只发送必要的数据）
• 离线工作。一旦连接恢复，所有数据更改都会被跟踪并与服务器同步
• 支持将更改复制到多个设备
• 支持基本身份验证
• 可与任何 JS Web 应用程序或 PhoneGap 应用程序（iOS、Android 等）配合使用，无需更改代码
• 只有 4kb gzip 压缩（并且没有依赖项）
• 麻省理工学院许可证

非常易于集成和使用（调用 2 个函数：initSync 和syncNow），不会干扰您现有的代码。

安装中

• 只需复制项目中的 src/webSqlSync.js 文件并将其包含在 html 中：

  <span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code> script src="lib/webSqlSync.js" type="application/x-javascript" charset="utf-8">/script>"
  </code></span></span></span>

用法

初始化

您需要初始化该库（例如在每次启动时）。

它将自动创建 2 个表（如果它们尚不存在）。表new_elem用于存储所有新的或修改的元素，表sync_info用于存储上次同步的日期。它还将创建 SQLite 触发器，以便监视要同步的表上的 INSERT 或 UPDATE（自动将修改后的元素插入 new_elem 表中）：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>DBSYNC.initSync(TABLES_TO_SYNC, webSqlDb, sync_info, 'http://www.myserver.com', callBackEndInit);
</code></span></span></span></span>

或者当您的服务器需要基本身份验证时，请提供用户名/密码

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>DBSYNC.initSync(TABLES_TO_SYNC, webSqlDb, sync_info, 'http://www.myserver.com', callBackEndInit, 'username','password');
</code></span></span></span></span>

其中 TABLES_TO_SYNC 是您要与服务器同步的数据库表的列表，例如：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>TABLES_TO_SYNC = [
    {tableName : 'table1', idName : 'the_id'},
    {tableName : 'table2'} //if idName not specified, it will assume that it's "id"
];
</code></span></span></span></span>

并且sync_info可以是你想要的一切。识别客户端很有用，因为它将被发送到服务器（可以是用户电子邮件或登录名、设备 UUID 等）tp钱包下载

同步

要开始同步，您需要调用syncNow函数。您可以每隔 X 秒调用一次，或者在进行一些更改后调用它，例如：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>DBSYNC.syncNow(callBackSyncProgress, function(result) {
     if (result.syncOK === true) {
         //Synchronized successfully
     }
});
</code></span></span></span></span>

其中 callBackSyncProgress 是在同步的每个步骤调用的函数（如果有大量数据需要同步，则可用于显示带有状态的进度条）：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>callBackSyncProgress: function(message, percent, msgKey) {
     $('#uiProgress').html(message+' ('+percent+'%)');
},
</code></span></span></span></span>

客户端/服务器通信

目前，没有通用的服务器代码（欢迎贡献），但您可以在目录 server_src_/ 中找到示例服务器代码（在 php 和 java 中）。或者您可以查看这个很酷的示例项目：GitHub - abeauseigle/TodoApp2: An improved webSqlApp (more robust multi DB browser) syncing with a php MySQL server (（由 @abeauseigle 使用 WebSQLSync 和 PHP/MySQL 用于服务器部分的 CRUD）。

您还可以运行 QUnit 测试来了解客户端（Web 应用程序）和服务器之间的通信，并最终测试服务器的实现。

以下场景展示了客户端和服务器之间输入/输出数据的示例：

客户端输出：

始终由客户端发起同步。因此，假设在客户端应用程序（例如移动应用程序）中，WebSqlSync 检测到表“card_stat”的 2 行已被修改（或创建）。因此，当调用syncNow方法时，WebSqlSync将向服务器发送以下JSON：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>clientData: {
    "info": {/* the info to identify the user. It's the obect "sync_info" passed previously in the parameters of the initSync method. You can put everything you need to identify the client */
        "userEmail": "testSafari2@gmail.com",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.52.7 (KHTML, like Gecko) Version/5.1.2 Safari/534.52.7",
        "lastSyncDate": 1326553035406,/* added automatically by WebSqlSync*/
    },
    "data": {/* WebSQLSync detect the 2 modified objects and send them. If there is no change on the client, data will be empty */
        "card_stat": [{
            "card_id": 100330,
            "firstViewTime": 1326845243.743,
            "previousInterval": 0,
            "interval": 4.091382259037346,
        },
        {
            "card_id": 100340,
            "firstViewTime": 1326845248.655,
            "previousInterval": 0,
            "interval": 4.197426769416779,
        }
    }
 }
</code></span></span></span></span>

服务器输出：

服务器接收先前的客户端数据，并将其保存在数据库中（插入或替换）。服务器端的数据库模式应该与客户端数据库几乎相同，除了您应该（至少）为每个要同步的表添加以下列：

• client_id（例如本例中的电子邮件地址，以便识别客户端，因为服务器端的表将包含不同客户端的所有数据）
• last_sync_date 与当前日期（现在）。所有同步日期均在服务器端管理，以避免时区问题或客户端日期错误。
• table_server_id ：服务器表上的唯一 ID（自动增量 ID）。当然，客户端表ID会有所不同，因为服务器管理多个客户端。

一旦服务器保存了客户端数据，它应该查看是否有更新的数据要发送到客户端。为此，它将使用他刚刚收到的 clientData.lastSyncDate 并与服务器列“last_sync_date”进行比较

前任。 SQL 请求： select * from card_stat where card_stat.last_sync_date > clientData.lastSyncDate

然后，它应该将当前的 JSON 发送到客户端：

<span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><span style="color:#1f2328"><span style="color:var(--fgColor-default, var(--color-fg-default))"><span style="background-color:var(--bgColor-muted, var(--color-canvas-subtle))"><code>serverAnswer: {/* Ex. of server answer : */
    result: 'OK',//or 'ERROR'
    message: 'Data updated sucessfuly in the server ' + self.serverUrl,//or a useful error message
    syncDate: '1327075596522',//The server return the current date that will be used for the next sync (the server handle the sync date to avoid pb with wrong date on the client)
    data: {/*data that has been changed since the last sync. If there is no changes in the server, data will be empty */
        card_stat: [{
            card_id: '123456789',//New Data on the server that is not on the client
            due: 1326592755.5729024,
            eFactor: 2.5,
            firstViewTime: 1326553031.718,
            interval: 0.4597668391498737
        }]
    }
}
</code></span></span></span></span>

我希望它能帮助您实现自己的服务器逻辑，或者提供另一种语言的服务器代码示例（欢迎贡献！）。

原文来自TP钱包--下载_最新TokenPocket钱包--|你的通用钱包