如何在 Next.js 中快速集成 @microsoft/signalr

最新推荐文章于 2025-07-21 12:31:36 发布

原创

最新推荐文章于 2025-07-21 12:31:36 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #microsoft #开发语言

如何在 Next.js 中快速集成 @microsoft/signalr

虽然只有少数项目需要集成 WebSockets 来在界面发生变化时实时响应而不重新获取数据，但这些项目仍然数量庞大。

这是一项必不可少的工作，我们不会讨论它们或者比较提供更好开发体验的第三方库。

我的目标是展示如何快速集成 @microsoft/signalr 到 Next.js 中，以及在开发过程中遇到的问题如何解决。

首先，我希望每个人都已经在本地安装和部署了 Next.js 项目。在我的案例中，版本是 13.2.4。让我们添加一些重要的库：swr（版本 2.1.5）用于数据获取以及与本地缓存进一步工作，以及 @microsoft/signalr（版本 7.0.5） - 用于 WebSockets 的 API。

npm install --save @microsoft/signalr swr

让我们从创建一个简单的 fetcher 函数和一个名为 useChatData 的新 hook 开始，以从我们的 REST API 获取初始数据。它返回了聊天消息列表、检测错误和加载状态的字段，以及允许更改缓存数据的 mutate 方法。

// hooks/useChatData.ts
import useSWR from 'swr';

type Message = {
   
   
    content: string;
    createdAt: Date;
    id: string;
};

async function fetcher<TResponse>(url: string, config: RequestInit): Promise<TResponse> {
   
   
    const response = await fetch(url, config);
    if (!response.ok) {
   
   
        throw response;
    }
    return await response.json();
}

export const useChatData = () => {
   
   
    const {
   
    data, error, isLoading, mutate } = useSWR<Message[]>('OUR_API_URL', fetcher);
    return {
   
   
        data: data || [],
        isLoading,
        isError: error,
        mutate,
    };
};

为了测试它是否按预期工作，让我们更新我们的页面组件。在顶部导入我们的 hook，并像下面的代码片段中那样从中提取数据。如果它工作正常，你将看到渲染的数据。如你所见，这很简单。

// pages/chat.ts
import {
   
    useChatData } from 'hooks/useChatData';

const Chat: NextPage = () => {
   
   
    const {
   
    data } = useChatData();

    return (
        <div>
            {
   
   data.map(item => (
                <div key={
   
   item.id}>{
   
   item.content}<

最低0.47元/天解锁文章