WebSocket 与页面数据刷新

上节说道页面数据以及全局数据的传递和使用。但是这些数据都是服务端获取的，之后在客户端水合之后就变成了静态的数据，那么如何能够让这些数据能够根据后端数据的变化而变化呢。

实时刷新前端数据和服务器数据同步是目前 SaaS 平台中参见的提升 UX 的手段。

这里我们需要借助 WebSocket 的能力。

在开始之前，我们首先需要梳理下数据流。前面提到的三种方法：

把 RSC 中获取到的数据通过 props 透传到子组件，后续子组件都通过消费 props 获取数据源。
把 RSC 中获取到的数据通过 context 方式传递，后续子组件都通过消费 context 获取数据源
使用 cache 函数缓存数据源，后续 RSC 都可以复用缓存的数据源。此方式仅限于 RSC。

前两种可以理解为同一种方法，透传 props 的方式在结构比较复杂的场景中并不适用，更倾向于使用 context 传递。

而最后一种方式，你必须全部使用 RSC 去编写所有需要使用数据的组件，对于这些需要根据 WS 事件驱动数据更新的场景，也不是很好用。使用这个方式不仅写法复杂，也会造成数据的重复获取和滞后。

Next.js RSC 中的数据刷新

既然提到了 RSC，那么来说一说在这种业务下的 Next.js RSC 的使用。

Next.js 的 RSC 中驱动数据的更新的方式可以使用 revalidateTags 或者 revalidatePath。这里我们使用 revalidateTag 举例。

这个案例我们编写一个前端展示服务器时间的 Demo。利用 WebSocket 事件推送当前的服务器事件。在应用 SSR 时首先需要通过 API 获取当前的服务器时间，后续则通过 WS 事件。

Important
此为 Demo，在正式生成环境中此方法显示服务器时间是错误的，你可能需要考虑 NTP 协议对时的算法。

简单编写一个 WSS。

const wssServer = createServer()
const wss = new WebSocket.Server({ server: wssServer })
wssServer.listen(19998)

setInterval(() => {
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(
        JSON.stringify({
          type: 'update',
          now: Date.now(),
        }),
      )
    }
  })
}, 1000)

每 1 秒向 WS Client 发送 update 事件，并且附加当前时间。

// app/page.tsx
const ServerTime = async () => {
  const serverTime = await fetch('http://localhost:19988/api/sever-time', {
    // 首先通过 API 获取时间
    next: {
      tags: ['time'],
    },
  }).then((r) => r.text())
  return <>Server Time: {serverTime}</>
}

export default ServerTime

编写 WS 连接组件。

// app/ws.tsx
'use client'

import { useEffect } from 'react'

import { revalidateTime } from './revalidate'

export const WS = () => {
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:19998')
    ws.onmessage = (message) => {
      const payload = JSON.parse(message.data)
      if (payload.type === 'update') {
        revalidateTime()
      }
    }

    return () => {
      ws.close()
    }
  }, [])
  return null
}

编写 revalidateTime 方法，需要在 WS 事件触发。

'use server'

// 必须在 server 触发 revalidate
import { revalidateTag } from 'next/cache'

export const revalidateTime = () => {
  revalidateTag('time') // fetch 中的 tags
}

那么，我们可以看到这样的效果。当 WS 事件到达，浏览器就会重新请求 RSC payload 去刷新这个页面。

这样是无法直接消费 WS 事件的数据乐观更新页面数据，而是重新需要 RSC 造成了资源开销和数据更新滞后。

Excalidraw Loading...

但是注意的是，上面的方法仅限于使用 Next.js 提供的 fetch 方法，在一些场景中你可以还是会选择其他的请求库，例如 axios 或者 XHR 等等，对于这些时候此方法并不适用，局限性比较大。

Important
为了避免又要被某人喷，这里注明下。
revalidateTags 和 revalidatePath 其实并不是为这个场景准备的，这里只是提供一个思路。
这两个方法的使用场景基本都是在 Next.js 编写的 全栈应用 中的，在这些应用中不仅 API 和 DB 都在 Next.js 中管理，当 DB 数据变更就可以在调用 revalidateTags 或者 revalidatePath 刷新数据。
而在 WS 场景中使用此方法只能说投机取巧，因此我不建议使用，但是通过这个例子你可以了解这个方法的大致用法。

上面的 DEMO 位于： nextjs-book/tree/main/demo/ws

使用 Jotai 更新数据源粒度化组件重渲染

而这个场景，个人认为最好的方式就是通过 Context 方式去传递数据了，但是 Context 如果直接使用 React useState 托管的数据向下传递，那么在更新比较复杂的对象时，无法让使用到数据源的组件细粒度更新。所以这里选择 Jotai 作为 Store。你也可以使用其他状态库，如果依旧选择 Context 这里也提供建议使用 use-context-selector

我们需要的实现的数据流向大概为：

Excalidraw Loading...

页面在服务端渲染的数据，注入到 DataProvider 中，然后内部实现把数据扔到 Jotai Atom 去管理。子组件需要使用数据源则直接消费 Context 获取 Atom，再用 Jotai 提供的 selector 方法提取需要用到的字段，以实现细粒度更新。

那么在服务端渲染时给到的数据，在注入到 DataProvider 之后，就不会再使用了。所有需要用到这个数据源的地方都应该从 Jotai 中取用。

现在我们来编写一个 Demo 说明一下这个事。

首先编写一个 DataProvider。

'use client'

const useBeforeMounted = (fn: () => any) => {
  const effectOnce = useRef(false)

  if (!effectOnce.current) {
    effectOnce.current = true
    fn?.()
  }
}

export const createModelDataProvider = <Model,>() => {
  const ModelDataAtomContext = createContext(null! as PrimitiveAtom<Model>)
  const globalModelDataAtom = atom<Model>(null! as Model)
  const ModelDataAtomProvider: FC<
    PropsWithChildren<{
      overrideAtom?: PrimitiveAtom<Model>
    }>
  > = ({ children, overrideAtom }) => {
    return (
      <ModelDataAtomContext.Provider
        value={overrideAtom ?? globalModelDataAtom}
      >
        {children}
      </ModelDataAtomContext.Provider>
    )
  }
  const ModelDataProvider: FC<
    {
      data: Model
    } & PropsWithChildren
  > = memo(({ data, children }) => {
    const currentDataAtom =
      useContext(ModelDataAtomContext) ?? globalModelDataAtom

    const setData = useSetAtom(currentDataAtom)

    useBeforeMounted(() => {
      setData(data)
    })

    useEffect(() => {
      setData(data)
    }, [data])

    useEffect(() => {
      setData(data)
      return () => {
        setData(null!)
      }
    }, [])

    return children
  })

  ModelDataProvider.displayName = 'ModelDataProvider'

  const useModelDataSelector = <T,>(
    selector: (data: Model | null) => T,
    deps?: any[],
  ) => {
    const currentDataAtom =
      useContext(ModelDataAtomContext) ?? globalModelDataAtom
    const nextSelector = useCallback((data: Model | null) => {
      return data ? selector(data) : null
    }, deps || noopArr)

    return useAtomValue(selectAtom(currentDataAtom, nextSelector))!
  }

  const useSetModelData = () =>
    useSetAtom(useContext(ModelDataAtomContext) ?? globalModelDataAtom)

  const setGlobalModelData = (recipe: (draft: Model) => void) => {
    const jotaiStore = getGlobalStore()
    jotaiStore.set(
      globalModelDataAtom,
      produce(jotaiStore.get(globalModelDataAtom), recipe),
    )
  }

  const getGlobalModelData = () => {
    return getGlobalStore().get(globalModelDataAtom)
  }

  const useGetModelData = () => {
    const currentDataAtom =
      useContext(ModelDataAtomContext) ?? globalModelDataAtom
    const store = useStore()
    return () => {
      return store.get(currentDataAtom)
    }
  }

  const useModelData = () => {
    return useAtomValue(useContext(ModelDataAtomContext) ?? globalModelDataAtom)
  }

  return {
    ModelDataAtomProvider,
    ModelDataProvider,
    useModelDataSelector,
    useSetModelData,
    useGetModelData,
    useModelData,
    setGlobalModelData,
    getGlobalModelData,

    ModelDataAtomContext,
  }
}

这个 Providers 把初始数据输入到 ModelDataProvider 中，然后创建一个全局 atom 去托管这个数据，对外暴露一个方法可以修改这个数据。向下，利用 Context 隔离的特点，可以复写 Context 链上的 Atom，在同一个页面上可以同时展示不同的数据源，一个为全局数据，其他的为 Context 复写的 atom 数据。这个特征会在实战中讲解，这里只需要先关注 setGlobalModelData 即可。

上面代码的封装可以在这个仓库中找到：

首先，创建 ModelDataContext 相关：

'use client'

import type { Item } from './type'

import { createModelDataProvider } from '../../../lib/data-provider'

export const {
  ModelDataAtomContext,
  ModelDataAtomProvider,
  ModelDataProvider,
  getGlobalModelData,
  setGlobalModelData,
  useModelDataSelector,
  useGetModelData,
  useModelData,
} = createModelDataProvider<Item[]>()

在 layout.tsx 中，初始化 WS，和 jotai Provider。获取数据源，输入到 ModelDataProvider。

export default async ({ children }: PropsWithChildren) => {
  const data = (await fetch('http://localhost:19988/api/data/list').then((r) =>
    r.json(),
  )) as Item[]
  return (
    <Providers>
      <ModelDataProvider data={data}>{children}</ModelDataProvider>
      <WS />
    </Providers>
  )
}

在 WS 中这样去更新数据：

'use client'

import { useEffect } from 'react'

import { setGlobalModelData } from './context'

export const WS = () => {
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:19998')
    ws.onmessage = (message) => {
      const payload = JSON.parse(message.data)
      console.log('payload.data', payload)
      if (payload.type === 'create') {
        setGlobalModelData((prev) => [...prev, payload.data])
      }
    }

    return () => {
      ws.close()
    }
  }, [])
  return null
}

数据渲染组件：

'use client'

import { useModelData } from './context'

export const DataList = () => {
  const modelData = useModelData()

  return (
    <div>
      {modelData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  )
}

现在编写这个页面，模拟两个端，左侧模拟为 C 端，右侧为 CMS 管理平台，进行数据录入。

可以看到，WS 事件触发的数据更新。

上述代码位于：

codesandbox VM 会限流，建议拉代码到本地试试，另外貌似 codesandbox 不支持 ws 连接，还是建议本地执行。

下一节，讲讲请求那些事。

最后更新于 2024/7/26 16:15:59

更新历史

本书还在编写中..

前往 https://innei.in/posts/tech/my-first-nextjs-book-here#comment 发表你的观点吧。