开发 WebSyncTable 接口
本章介绍 WebSyncTable 的安装导入和使用步骤。
概述
WebSyncTable 模块是专为 SyncTable 服务的，它在内部封装了 WebSocket 用于客户端服务端的通信，主要用于完成客户端和服务端的本地表数据同步，以下介绍 WebSyncTable 的安装导入和操作方法。
安装导入
以 Vue 为例，从 vue.min.js 获取 vue.min.js，从 synctable.min.js 获取 synctable.min.js。
参考以下示例，在前端通过 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");
操作步骤
以下介绍 WebSyncTable 的使用步骤。
步骤 1：创建同步表
- 参考以下示例，在前端获取协议类型拼接服务端访问地址,创建一个名为 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 同步前后端的表。
const table = new SyncTable('table1')
// Create SyncTable server
const server = new WebSyncTable(app, table, {
onclient: function (event, client) {
const userInfo = client.eos.user // 提取用户信息
return true
}
})
步骤 2：添加变量
参考以下示例，在前端通过 table.set() 方法向表中设置属性，后端会自动同步数据，服务也会有一份相同的数据。
this.table
.set(this.key, this.value)
.then((v) => {
console.log("ok");
})
.catch((e) => {
console.error("set error!");
});
步骤 3：获取变量
参考以下示例，在前端获取变量。此方法会优先从本地表中拿数据，所以不会去请求后端，这样可以节省网络资源。
this.table
.get(this.key)
.then((value) => {
console.log("k1 value is:", value);
this.value = value;
})
.catch((error) => {
console.error("get k1 value error!");
});
userInfo 数据结构
| 字段名称 | 类型 | 说明 |
|---|---|---|
| nickname | string | 用户昵称（默认为手机号码） |
| exp | number | 用户过期时间 |
| acoid | string | 翼辉 ID |
陕公网安备61019002002605号