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 = {
      ...item,
      // 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 失效哪怕服务可用了之后也不行,需要刷新界面

参考资料

https://www.cnblogs.com/rongfengliang/p/15341020.html
https://github.com/rongfengliang/cubejs-websocket/

上一篇:《Go程序设计语言》学习笔记之defer


下一篇:支持minio cubestore docker 镜像