使用Electric同步前后端数据

前后端数据同步

后端

后端使用 PostgreSQL 数据库存储数据，通过 RESTful API 提供数据接口。并开启 sse 连接用于实时数据推送。

前端

前端使用 Electric 实现本地数据的存储和管理，通过 RESTful API 获取后端数据，可通过 sse 连接接收实时数据推送。前端使用的Electric库：@electric-sql/client 主要会用到 Shape、ShapeStream

ts 复制代码

import { Shape, ShapeStream } from '@electric-sql/client'

export interface IElectricShapeOption {
  authorization: string
  table: string
  where: string
  subscribe?: boolean
  columns?: string[]
}

export const createShapeStreamOptions = (option: IElectricShapeOption) => {
  const { subscribe = true } = option
  return {
    // 后端接口地址
    url: `${import.meta.env.VITE_APP_API_BASEURL}api/v1/shape`,
    headers: {
      Authorization: option.authorization,
    },
    params: {
      table: option.table, // 同步的表名
      where: option.where, // 同步的条件
      columns: option.columns, // 需要同步的列，不设置就是同步所有的 设置了就只同步指定的列
    },
    subscribe, // 是否订阅实时数据推送，默认为 true
    liveSse: true, // 是否使用 sse 连接，默认为 true 开启 sse 连接后会自动处理连接断开和重连逻辑
  }
}

async function useElectricShape<T>(option: IElectricShapeOption) {
  const rows = ref<T[]>()

  const stream = new ShapeStream(createShapeStreamOptions(option))
  const shape = new Shape(stream)
  rows.value = await shape.rows as T[]

  shape.subscribe((callback) => {
    rows.value = callback.rows as T[]
  })

  const destroy = async () => {
    shape.unsubscribeAll()
  }

  return { rows, destroy }
}

为什么选择 Electric

实时数据同步：通过 sse 连接实现后端数据的实时推送
本地数据管理：提供 Shape 和 ShapeStream 方便前端管理本地数据
易用性：提供简单的 API 供前端使用，减少开发复杂度

实际应用场景

CRM 系统：客户数据的实时同步和管理
电商平台：订单数据的实时同步和管理
数据分析平台：数据的实时同步和分析

存在的问题

数据量较大时可能会有性能问题，需要合理设计数据同步的条件和频率

优化方案

数据懒加载
- 对于数据量大的列，可以在需要时才调用api懒加载，而不是一开始就同步所有数据