在 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 会为客户端服务端的同步表进行同步。

客户端有以下输出:

 

 

服务端有以下输出,输出在 VSCode 插件的 Console 中

 

到这里我们已经对 SyncTable 数据库的基本操作和 WebSyncTable 的运行机制有了大概的了解,它具有简单快捷的数据同步和节约网络资源的优势。希望大家可以在此次学习之后,可以快速上手,利用此模块完成一些实用的APP。

 

项目地址:https://gitee.com/dengshihuasss/websynctable-demo

 

了解更多:

Synctable:https://www.edgeros.com/edgeros/api/BASIC%20COMPONENTS/Database/synctable.html

WebSyncTable:https://www.edgeros.com/edgeros/api/BASIC%20COMPONENTS/Application%20Framework/websynctable.html

 

...全文
381 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
发帖
爱智开发者社区

1524

社区成员

爱智开发者平台是一个开放的物联网平台,通过爱智世界,应用开发者可以把自己的应用分发到亿万用户的设备上,硬件开发者能够把设备能力开放给海量的开发者,让优质的应用脱颖而出,为用户提供更优秀的使用体验。
边缘计算物联网javascript 企业社区
社区管理员
  • EdgerOS
  • Lumos_zbj
  • dayinfinite
加入社区
帖子事件
编辑了帖子
2022-08-10 17:14
编辑了帖子 (查看)
2022-06-08 17:41
创建了帖子 (查看)
2022-06-08 17:41
社区公告
暂无公告