ElectricSQL 快速入门：实现Postgres实时数据同步-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00701/article/details/148440538

ElectricSQL 快速入门：实现Postgres实时数据同步

electric electric-sql/electric: 这是一个用于查询数据库的JavaScript库，支持多种数据库。适合用于需要使用JavaScript查询数据库的场景。特点：易于使用，支持多种数据库，具有灵活的查询构建和结果处理功能。项目地址: https://gitcode.com/gh_mirrors/el/electric

前言

在现代应用开发中，实时数据同步是一个关键需求。ElectricSQL 作为一个创新的数据同步解决方案，能够将PostgreSQL数据库中的数据实时同步到前端应用。本文将带你快速上手ElectricSQL，体验Postgres数据的实时同步能力。

环境准备

1. 创建项目目录

首先创建一个新的工作目录：

mkdir my-first-electric
cd my-first-electric

2. 使用Docker Compose启动服务

ElectricSQL 提供了Docker Compose配置文件，可以一键启动PostgreSQL和Electric服务：

curl -O https://electric-sql.com/docker-compose.yaml
docker compose up

这个命令会启动两个关键服务：

PostgreSQL数据库
ElectricSQL同步服务

基础HTTP API体验

1. 尝试获取数据

ElectricSQL提供了低级的HTTP API接口，我们可以先用curl测试：

curl -i 'http://localhost:3000/v1/shape?table=scores&offset=-1'

这里有几个关键参数：

table=scores：指定要同步的表名
offset=-1：表示获取完整数据（初次同步）

2. 处理表不存在问题

初次请求会返回错误，因为数据库中还没有scores表。我们需要先创建这个表。

3. 创建数据库表结构

使用PostgreSQL客户端连接数据库：

psql "postgresql://postgres:password@localhost:54321/electric"

然后创建表结构并插入测试数据：

-- 创建表
CREATE TABLE scores (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255),
  value FLOAT
);

-- 插入测试数据
INSERT INTO scores (name, value) VALUES
  ('Alice', 3.14),
  ('Bob', 2.71),
  ('Charlie', -1.618),
  ('David', 1.414),
  ('Eve', 0);

4. 再次尝试获取数据

退出psql后，再次执行curl命令，这次应该能成功获取到数据。

构建React实时应用

1. 创建React项目

npm create --yes vite@latest react-app -- --template react-ts
cd react-app
npm install @electric-sql/react

2. 修改App组件

编辑src/App.tsx文件，使用ElectricSQL的React Hook：

import { useShape } from '@electric-sql/react'

function Component() {
  const { data } = useShape({
    url: `http://localhost:3000/v1/shape`,
    params: {
      table: `scores`
    }
  })

  return (
    <pre>{ JSON.stringify(data, null, 2) }</pre>
  )
}

export default Component

3. 启动开发服务器

npm run dev

访问应用后，你将看到从PostgreSQL同步过来的数据。

体验实时同步

现在，尝试在PostgreSQL中修改数据：

UPDATE scores SET name = 'James' WHERE id = 2;

你会发现前端应用中的数据会立即更新，无需刷新页面！

技术原理解析

ElectricSQL的工作原理基于以下几个关键概念：

Shape（数据形状）：定义了需要同步的数据范围和结构
Offset（偏移量）：用于跟踪数据变更的位置
实时同步：通过监听PostgreSQL的变更事件，将变更实时推送到前端

常见问题解答

Q: 为什么初次请求会返回400错误？ A: 因为请求的表不存在，需要先在PostgreSQL中创建对应的表结构。

Q: 如何同步多个表的数据？ A: 可以为每个表创建独立的Shape，或者使用更复杂的查询条件定义Shape。

Q: 数据变更的实时性如何保证？ A: ElectricSQL通过PostgreSQL的变更捕获机制，能够近乎实时地将变更推送到前端。

总结

通过本教程，你已经学会了：

如何使用Docker Compose快速搭建ElectricSQL环境
通过HTTP API直接与ElectricSQL交互
在React应用中集成ElectricSQL实现实时数据同步

ElectricSQL的强大之处在于它将PostgreSQL变成了一个实时数据库，为构建响应式应用提供了简单可靠的解决方案。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考