cube.js 基于http 通道的数据实时更新
机制实际上与webscoket 类似，从原理上是使用了有个定时拉取的处理
配置方法
cube.js
module.exports = {
orchestratorOptions: {
queryCacheOptions: {
refreshKeyRenewalThreshold: 4,
}
},
processSubscriptionsInterval:2,
};cubejs-websocket
web app
实际上就是普通的http 链接，只是使用了subscribe
import React from 'react';
import { Table } from 'antd';
import { useCubeQuery } from '@cubejs-client/react';
import cubejs from '@cubejs-client/core';
import WebSocketTransport from '@cubejs-client/ws-transport';
import 'antd/dist/antd.css';
// const cubejsApi = cubejs({
// transport: new WebSocketTransport({
// authorization: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MzI2Njc5NzcsImV4cCI6MTYzMjc1NDM3N30.ki5AokHM6cgRAK7XUaZbOk27PDzu0vPRImzM442eoM0",
// apiUrl: 'ws://localhost:4000/cubejs-api/v1',
// }),
// });
// http poll 模式链接
const cubejsApi = cubejs(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MzI2Njc5NzcsImV4cCI6MTYzMjc1NDM3N30.ki5AokHM6cgRAK7XUaZbOk27PDzu0vPRImzM442eoM0",
{apiUrl: 'http://localhost:4000/cubejs-api/v1'}
);
function Demo() {
const { resultSet, isLoading, error, progress } = useCubeQuery(
{"dimensions":["testapi.a","testapi.b"]},{
cubejsApi,
subscribe: true, // http poll 模式数据处理
});
if (isLoading) {
return <div>{progress && progress.stage && progress.stage.stage || 'Loading...'}</div>;
}
if (error) {
return <div>{error.toString()}</div>;
}
if (!resultSet) {
return null;
}
function demoapp(item){
return item["shortTitle"]
}
const dataSource = resultSet.tablePivot();
const columns = resultSet.tableColumns().map((item)=>{
let info = {
// fixed:item.shortTitle=="count",
title:`${item.shortTitle}||测试`,
shortTitle:`${item.title}`
}
return info
})
console.log(columns)
return <div >
<Table columns={columns} dataSource={dataSource} scroll={{ x: 1000, y: 300 }} />;
</div>
}
// Create Document Component
export default Demo;
说明
目前http poll 有个不太好的地方是当后端服务不可用的时候会造成poll 失效哪怕服务可用了之后也不行，需要刷新界面（属于bug，后边会尝试修复）
参考资料
https://www.cnblogs.com/rongfengliang/p/15341020.html
https://github.com/rongfengliang/cubejs-websocket/
