咨询SWR-subscription功能：实时数据源订阅解析、示例及应用

一、功能核心解释 #

useSWRSubscription 是SWR专门为实时数据源订阅设计的钩子，和普通SWR依赖「轮询/手动触发重新获取」的模式不同，它能直接对接主动推送数据的服务（比如WebSocket、Server-Sent Events、第三方实时推送API），一旦数据源有新数据，就自动更新组件状态，不用手动调用mutate或者设置轮询。

简单说：普通SWR是「我主动问服务器有没有新数据」，而useSWRSubscription是「服务器有新数据主动告诉我，我直接更页面」。

二、简单示例（WebSocket场景） #

假设我们要对接一个返回实时消息的WebSocket服务，用useSWRSubscription实现：

import { useSWRSubscription } from 'swr'

function RealTimeChat() {
  const { data: message, error } = useSWRSubscription(
    // 唯一标识订阅的key，类似普通SWR的key
    'ws://localhost:8080/chat',
    // 订阅函数：负责建立连接、监听数据、清理资源
    (key, { next }) => {
      // 建立WebSocket连接
      const ws = new WebSocket(key)
      
      // 收到消息时，调用next把新数据传给SWR
      ws.onmessage = (event) => {
        next(JSON.parse(event.data))
      }
      
      // 连接出错时，把错误传给SWR
      ws.onerror = (err) => {
        next(null, err)
      }
      
      // 返回清理函数：组件卸载或key变化时关闭连接
      return () => {
        ws.close()
      }
    }
  )

  if (error) return <div>连接出错：{error.message}</div>
  if (!message) return <div>等待消息...</div>

  return <div>最新消息：{message.content}</div>
}

这里的next函数是核心——它负责把实时收到的数据传递给SWR，让SWR自动更新组件的data状态，无需手动处理状态更新逻辑。

三、实际场景应用方法 #

1. 实时聊天应用 #

• 用useSWRSubscription对接WebSocket服务，订阅当前聊天房间的消息推送
• 收到新消息时自动更新聊天列表，同时可结合普通SWR的mutate处理自己发送的消息（避免等待服务器推送）

2. 实时行情/数据监控 #

• 对接金融API的WebSocket推送（比如股票价格、加密货币行情）
• 订阅指定标的的实时价格变动，自动更新页面行情展示，无需轮询刷新

3. 协作编辑工具 #

• 多人协作编辑文档时，订阅文档的实时变更推送
• 收到其他用户的编辑操作后，自动同步到本地文档内容，保证所有协作者看到的内容一致

4. 实时通知系统 #

• 订阅用户的通知推送服务（比如新订单、新评论）
• 收到通知后自动更新页面的通知徽章和列表，无需用户手动刷新

内容的提问来源于stack exchange，提问作者Joe