在 EdgerOS 应用中使用 WebSyncTable，进行简单快捷的数据同步

leecactus0 2022-06-08 17:41:07

什么是多任务？

对于多任务，这里举一个实际的应用场景让大家有一个初步了解：假设我们要开发一款人脸识别的 APP，不使用多任务的情况下 APP 的运行流程一般是一个主进程完成图像监测-视频流解码-检测数据中有没有人脸-人脸是不是预期结果-对结果的响应等等操作，而有了多任务模块之后，我们可以在主任务进行图像监测，将监测到的图形交给子任务处理，子任务完成后续的人脸识别操作，这样就提高了 APP 的运行效率。

SyncTable

SyncTable 一个 Key/Value 数据库，我们可以使用该数据库在 EdgerOS 的内存中保存和修改一些数据，达到快速为处于多任务状态中的数据提供同步功能的目的。SyncTable 的接口和大多数 Key/Value 数据库类似，这里简略说一下常用的接口。


const SyncTable = require('synctable');
const table = new SyncTable('table1');

/* set: 往表中添加一组 key 为爱智，value 为 EdgerOS 的数据*/
table.set('爱智'，'EdgerOS'); 
/* get: 通过 key 获取 value */
console.log(table.get('爱智')); // '爱智'
/* has: 是否存在与 key 对应的 value */
console.log(table.get('翼辉')); // false
/* delete: 通过 key 删除表中的数据*/
table.delete('爱智');
/* clear : 删除表中所有的数据 */
table.clear();
/* size : 得到表中的大小 */
table.size()
/* on: 订阅事件 
* 表中数据发生变化的时候，会生成 update 事件 
*/
table.on('update', function(key, value) {
        if (value) {
                console.log('k:', key, 'has a new value!');
        } else {
                console.log('k:', key, 'has been deleted!');
        }
});
/* close: 关闭数据库实例时必须显式调用此接口来回收数据库资源 */
table.close();

`WebSyncTable`

WebSyncTable 模块是专为 SyncTable 服务的，它的内部封装了 WebSocket 用于客户端服务端的通信，它的功能主要是用于完成客户端服务端的本地表数据同步。

在多任务中，客户端服务端完成不同任务的多个表的同步实际上复用的是同一个 websocket 连接，这样极大减少了网络资源的浪费。在实际场景中，客户端对于 SyncTable 数据库的表格进行增删改查等操作，会优先从本地表进行操作，再用 WebSyncTable 进行数据同步，这样避免了不断的发送请求，可以节省网络资源。

WebSyncTable 的 API

new WebSyncTable(server, table[, opt])

用于创建一个 WebSyncTable 对象

server ：Network server，本案例使用的是 webapp 实例
table ：一个 SyncTable 的对象

opt ：可选参数，这里使用的 onclient 函数，用于监视客户端连接和断开连接事件。


const WebApp = require('webapp');
const SyncTable = require('synctable');

const app = WebApp.createApp(/* ... */);
const table = new SyncTable('table1');
// Create SyncTable server with onclient
const server = new WebSyncTable(app, table, {
        onclient: function(event, client) {
                if (event === 'connect') {
                        console.log('New client connect!');
                } else {
                        console.log('Client lost!');
                }
        }
});

server.close( )

关闭连接，不再响应客户端的请求

server.reverse(event， arg[， client])

向指定客户端发送自定义消息或广播自定义消息到所有客户端。

event ：自定义消息
arg：事件消息的参数
client：指定客户端，不写默认使用广播的方式。


server.reverse('say_hello', { msg: '你好！' });

server.clients（）

获取连接到 WebSyncTable 服务端的所有客户端个数。

我们在前端创建 WebSyncTable 的客户端之后，除了对同步表的增删改查功能之外，还有以下功能

table.fetch(command[, arg[, delay[, delta]]])

向服务器发送命令事件，然后异步等待服务器回复。

command：事件名称。
arg：事件参数
delay：是否采取延迟发送。
delta：延迟发送的时间

table.onmessage(event， arg)

监听服务端发送的事件

event：事件名称
arg：事件参数

table.addEventListener(event， listener)

创建事件侦听器，在 WebSyncTable 工作时会有如下事件：

table.removeEventListener(event， listener)

删除之前的创建的事件侦听器。

应用

通过 VSCode 插件，使用 Simple 模板创建应用。

将 main.js 修改为以下代码


/*server code */

/* Import system modules */
const WebApp = require('webapp');

/* Import routers */
const myrouter = require('./routers/rest');

/* Import websynctable */
const WebSyncTable = require('websynctable');
/* Import synctable */
const SyncTable = require('synctable');

/* Create App */
const app = WebApp.createApp();

/* Set static path */
app.use(WebApp.static('./public'));

/* Set test rest */
app.use('/api', myrouter);

/* Rend test */
app.get('/temp.html', function(req, res) {
  res.render('temp', { time: Date.now() });
});

const table = new SyncTable('table1');

// Create SyncTable server with onclient
const server = new WebSyncTable(app, table, {
  onclient: function(event, client) {
    if (event === 'connect') {
      console.log('New client connect!');
    } else {
      console.log('Client lost!');
    }
  }
});

/* 向同步表添加两组数据*/
table.set('k1', 'edgeros');
table.set('k2', 'SylixOS');

/* 获取 k3，将k3的 value 修改为 world */
setTimeout(() => {
  const ret = table.get('k3')
  console.log('>>', ret);
  table.set('k3', 'world')
}, 3000)


/* Start App */
app.start();

/* Event loop */
require('iosched').forever();

将 /public/index.html 修改为以下代码：


/* client code */
<html>
<body style="background: #fff;">Hello EdgerOS!</body>
</html>
<!-- 引入webSyncTable-->
<script src="./synctable.js"></script>

<script type="text/javascript">
  let opt = {};
  let table = null;
  const proto = location.protocol === 'http:' ? 'ws:' : 'wss:';
  const server = `${proto}//${window.location.host}`;
  const auth = {
    'token': this.token,
    'srand': this.srand
  };

  table = new SyncTable(server, 'table1', auth);

  table.addEventListener('connect', function () {
    console.log('connected!');
  });

  table.addEventListener('disconnect', function () {
    console.log('disconnected!');
  });

  table.addEventListener('clear', function () {
    console.log('clear!');
  });

  table.addEventListener('update', function (key, value) {
    console.log('update!', key, value);
  });

  table.addEventListener('error', function (error) {
    console.error('error:', error);
  });

  table.get('k1').then(value => {
    console.log('k1 value is:', value);
  }).catch(error => {
    console.error('get k1 value error!');
  });
  table.get('k2').then(value => {
    console.log('k2 value is:', value);
  }).catch(error => {
    console.error('get k2 value error!');
  });

  // use async function
  async function setValue() {
    try {
      const value = await table.set('k3', 'hello');
    } catch (error) {
      console.error('Error:', error.message);
      return;
    }
    console.log('k3 value is:', value);
  }
  setValue();

  setTimeout(() => table.get('k3').then(value => {
    console.log('k3 value is:', value);
  }).catch(error => {
    console.error('get k3 value error!');
  }), 5000);
</script>

前面我们介绍了大概的接口使用，这里我们使用一下。我们在客户端服务端都创建了 table1 同步表，并分别创建了 websynctable 的客户端服务端用于数据的同步。

我们在服务端向同步表添加了设两组数据 k1 和 k2 ，并在客户端添加了一组数据 k3，并且创建了事件侦听器。运行应用的时候，和我们预期的一样，WebSyncTable 会为客户端服务端的同步表进行同步。

客户端有以下输出：