RedwoodJS实时功能终极指南：WebSocket与实时数据同步的完整实现方案

【免费下载链接】redwood RedwoodGraphQL 项目地址: https://gitcode.com/gh_mirrors/re/redwood

RedwoodJS作为现代全栈框架，提供了强大的实时数据同步能力，让开发者能够轻松构建实时聊天、实时仪表盘和实时通知等功能。本文将详细介绍RedwoodJS的实时功能实现，包括WebSocket与Server-Sent Events(SSE)的应用、实时数据同步的核心组件，以及如何在项目中快速集成这些功能。

RedwoodJS实时功能概述

RedwoodJS的实时解决方案基于GraphQL和长期运行的服务器连接，支持两种主要的实时更新方式：GraphQL订阅和实时查询(Live Queries)。这两种方式各有优势，适用于不同的应用场景。

RedwoodJS的GraphQL服务器采用GraphQL over Server-Sent Events规范的"distinct connections mode"来处理订阅，相比传统的WebSocket方案具有多项优势：

• 通过标准HTTP传输，无需自定义协议
• 内置重连和事件ID支持
• 协议更简单，易于实现和维护
• 避免企业防火墙的数据包检测问题

图：RedwoodJS实时数据传输架构示意图，展示了事件队列与多客户端之间的实时通信流程

实时功能核心组件

RedwoodJS的实时功能自动处理了许多复杂的实现细节，让开发者可以专注于业务逻辑：

• 订阅处理：自动合并订阅类型并映射处理函数
• 身份验证集成：使用@requireAuth指令保护订阅请求
• 实时查询支持：添加@live查询指令和相关插件
• 存储管理：内置内存和Redis存储，用于PubSub传输和实时查询
• 上下文注入：将pubSub和liveQueryStore添加到GraphQL上下文

这些组件共同构成了RedwoodJS强大的实时功能体系，支持从简单通知到复杂实时协作的各种应用场景。

快速开始：Redwood实时功能设置

要在现有Redwood项目中启用实时功能，只需执行以下命令：

yarn rw setup server-file
yarn rw setup realtime

这两条命令将为项目添加必要的文件和配置，包括：

• api/server.ts：Fastify服务器配置文件
• api/lib/realtime.ts：实时功能配置文件，包含订阅和存储设置
• 实时查询、订阅、延迟和流的使用示例

设置完成后，需要在GraphQL处理器中添加实时配置：

+ import { realtime } from 'src/lib/realtime'

  export const handler = createGraphQLHandler({
    // ...
+   realtime,
  })

实时配置详解

RedwoodJS实时功能支持两种存储方式，适用于不同的环境：

• 内存存储：适用于开发和测试环境
• Redis存储：适用于生产环境，支持多服务器扩展

以下是典型的实时配置示例：

import { RedwoodRealtimeOptions } from '@redwoodjs/realtime'
import subscriptions from 'src/subscriptions/**/*.{js,ts}'

// 生产环境Redis配置示例
// import { Redis } from 'ioredis'
// const publishClient = new Redis()
// const subscribeClient = new Redis()

export const realtime: RedwoodRealtimeOptions = {
  subscriptions: {
    subscriptions,
    store: 'in-memory',
    // 生产环境使用Redis
    // store: { redis: { publishClient, subscribeClient } },
  },
  liveQueries: {
    store: 'in-memory',
    // 生产环境使用Redis
    // store: { redis: { publishClient, subscribeClient } },
  },
  // 启用延迟和流功能
  enableDeferStream: true,
}

通过上下文对象，开发者可以在服务、订阅解析器或其他地方使用pubSub和liveQueryStore：

• context.pubSub.publish('topic', data)：发布事件
• context.liveQueryStore.invalidate(key)：使实时查询失效并重新执行

GraphQL订阅：响应事件变化

GraphQL订阅是GraphQL规范的一部分，适用于监听特定事件并获取详细的变化信息。RedwoodJS提供了一流的GraphQL订阅开发体验。

聊天应用示例

以下是一个简单的聊天应用订阅实现：

type Subscription {
  newMessage(roomId: ID!): Message! @requireAuth
}

当有新消息发送到特定房间时，通过pubSub发布事件：

context.pubSub.publish('newMessage', roomId, { from, body })

订阅者将收到包含发件人和消息内容的实时更新。

图：GraphiQL界面中的订阅示例，展示了如何订阅新消息事件

倒计时定时器示例

订阅还可以用于创建主动推送数据的场景，如下列倒计时定时器：

subscription CountdownFromInterval {
  countdown(from: 100, interval: 10)
}

这个订阅会从指定数值开始，按照设定的间隔递减并推送更新，展示了订阅如何主动生成和推送数据。

实时查询：监听数据变化

实时查询不是GraphQL规范的一部分，但提供了一种简单有效的方式来监听数据变化。通过在查询上添加@live指令，RedwoodJS会自动在数据变化时重新执行查询并推送更新。

拍卖应用示例

以下是一个拍卖应用的实时查询示例：

query GetCurrentAuctionBids @live {
  auction(id: "1") {
    bids {
      amount
    }
    highestBid {
      amount
    }
    id
    title
  }
}

当有新的出价时，通过使相关数据失效来触发实时查询更新：

const key = `Auction:${auctionId}`
context.liveQueryStore.invalidate(key)

实时查询会自动重新执行，获取最新的拍卖和出价信息并推送给客户端。

延迟与流指令：优化数据传输

RedwoodJS支持GraphQL的@defer和@stream指令，允许优化数据传输，提高客户端响应速度。

@defer指令：延迟加载非关键数据

@defer指令允许推迟传输一个或多个（较慢的）字段，优先加载关键数据：

query SlowAndFastFieldWithDefer {
  ... on Query @defer {
    slowField
  }
  fastField
}

这个查询会立即返回fastField的数据，待slowField准备好后再传输其数据，提高了用户体验。

@stream指令：流式传输列表数据

@stream指令允许将列表类型字段的各个项在可用时流式传输：

query StreamAlphabet {
  alphabet @stream
}

服务端实现使用Repeater来安全地流式传输数据：

export const alphabet = async () => {
  return new Repeater<string>(async (push, stop) => {
    const values = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
    const publish = () => {
      const value = values.shift()
      if (value) push(value)
      if (values.length === 0) stop()
    }
    const interval = setInterval(publish, 1000)
    stop.then(() => clearInterval(interval))
    publish()
  })
}

图：终端中的流式传输示例，展示了数据如何逐段到达

订阅与实时查询：如何选择？

在选择使用订阅还是实时查询时，需要考虑以下因素：

• 更新频率：用户需要多快的更新？是需要不到1-2秒的实时更新，还是10-60秒的近实时更新？
• 数据关键性：数据更新的重要性如何？是低优先级的状态更新，还是高优先级的价格变动？
• 基础设施成本：维护连接和跟踪更新的成本是否合理？
• 部署方式：是使用无服务器架构还是有状态服务器？

一般来说，如果不需要真正的实时更新，可以考虑使用轮询。如果需要实时更新，订阅适合关注特定事件，而实时查询适合关注数据整体变化。

实际应用场景

RedwoodJS的实时功能可用于构建各种应用，包括：

• 实时聊天：通过订阅实现房间内消息实时推送
• 拍卖系统：使用实时查询展示最新出价
• 实时仪表盘：监控数据变化并即时更新
• 通知系统：推送用户通知和提醒
• 协作编辑：多人实时编辑文档
• 位置追踪：实时更新用户或资产位置

RedwoodJS提供了示例脚本，可以模拟这些场景：

# 模拟聊天消息
./scripts/simulate_chat.sh -r [roomId] -n [num_messages]

# 模拟拍卖出价
./scripts/simulate_bids.sh -a <auctionId> -n <num_bids>

结语

RedwoodJS提供了强大而灵活的实时功能，使开发者能够轻松构建各种实时应用。通过GraphQL订阅、实时查询、延迟和流指令，结合简单的设置和配置，RedwoodJS简化了实时数据同步的复杂性。

无论你是构建简单的通知系统还是复杂的实时协作平台，RedwoodJS的实时功能都能满足你的需求，让你专注于创造出色的用户体验。

要开始使用RedwoodJS的实时功能，只需克隆仓库并按照本文的指南进行设置：

git clone https://gitcode.com/gh_mirrors/re/redwood
cd redwood
yarn install

探索RedwoodJS的实时功能，开启你的实时应用开发之旅吧！

【免费下载链接】redwood RedwoodGraphQL 项目地址: https://gitcode.com/gh_mirrors/re/redwood