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 失效哪怕服务可用了之后也不行，需要刷新界面（属于bug，后边会尝试修复）

参考资料

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