爱智应用开发进阶一、3 WebSyncTable 示例

EdgerOS 2021-10-15 10:34:25

WebSyncTable 示例

安装导入

前端通过 script 标签引入 vue.js 和 WebSyncTable

<!-- 引入vue-->
<script src="./vue/vue.min.js"></script>
<!-- 引入webSyncTable-->
<script src="./synctable/synctable.min.js"></script>

后端引入SyncTable 和 WebSyncTable

  • SyncTable 用于创建本地同步表。
  • WebSyncTable 用于客户端服务端的表同步。
var WebSyncTable = require('websynctable');
var SyncTable = require('synctable');

#创建同步表

前端获取协议类型拼接服务端访问地址,创建一个名为 table1 的表:

var proto = location.protocol === 'http:' ? 'ws:' : 'wss:';
var server = `${proto}//${window.location.host}`;
const auth = {
	'token': this.token,
	'srand': this.srand
};
this.table = new SyncTable(server, 'table1', auth);

后端同步创建,先创建一个与客户端相同的 SyncTable , 然后通过创建 WebSyncTable 同步前后端的表:

var table = new SyncTable('table1');
// Create SyncTable server
var server = new WebSyncTable(app, table);

添加变量

前端可通过 table.set() 方法向表中设置属性,会自动同步后端:

this.table.set(this.key, this.value).then(v => {
	console.log('ok');
}).catch(e => {
	console.error('set error!');
});

后端会自动同步数据,服务也会有一份相同的数据。

获取变量

此方法会优先从本地表中拿数据,所以不会去请求后端,这样可以节省网络资源。

this.table.get(this.key).then(value => {
	console.log('k1 value is:', value);
	this.value = value;
}).catch(error => {
	console.error('get k1 value error!');
});
...全文
126 回复 2 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
爱智开发者社区
创建于2021-08-16

241

社区成员

爱智开发者平台是一个开放的物联网平台,通过爱智世界,应用开发者可以把自己的应用分发到亿万用户的设备上,硬件开发者能够把设备能力开放给海量的开发者,让优质的应用脱颖而出,为用户提供更优秀的使用体验。
帖子事件
创建了帖子
2021-10-15 10:34
社区公告
暂无公告