Next.js中OpenAI Realtime API的RealtimeSession.connect() Promise永不resolve问题

问题概述 #

我在Next.js（App Router/客户端组件）应用中使用OpenAI Realtime API开发语音通话功能，目前遇到的问题是RealtimeSession.connect()会无限挂起，await之后的代码完全不执行，"after connect"日志从未打印。

问题代码细节 #

以下代码中，await p之后的日志始终无法输出：

"use client";

import { useState } from "react";
import { Mic, PhoneOff } from "lucide-react";
import { weatherAgent } from "@/agent";
import { RealtimeSession } from "@openai/agents-realtime";

interface VoiceCallButtonProps {
  sessionApiKey: string;
}

export function VoiceCallButton({ sessionApiKey }: VoiceCallButtonProps) {
  const [inCall, setInCall] = useState(false);

  const toggleCall = async () => {
    try {
      const session = new RealtimeSession(weatherAgent, { 
        model: "gpt-4o-realtime-preview-2025-06-03",
      });

      if (inCall) {
        session.close();
      } else {
        console.log("session instance:", session);

        const res = await fetch("/api/session", { method: "POST" });

        if (!res.ok) {
          const text = await res.text();
          console.error("API error:", text);
          throw new Error("API failed");
        }

        const data = await res.json();

        console.log("before mic");

        await navigator.mediaDevices.getUserMedia({ audio: true });

        console.log("mic OK");

        const p = session.connect({
          apiKey: data.clientSecret,
          model: "gpt-4o-realtime-preview-2025-06-03",
        });

        console.log("connect returned promise");

        await p;

        console.log("after connect"); // 从未打印

        setInCall(true);
      }
    } catch (err) {
      console.error("toggleCall error:", err);
    }
  };

  return (
    <button onClick={toggleCall}>
      {inCall ? <PhoneOff /> : <Mic />}
    </button>
  );
}

行为表现 #

• "connect returned promise"能正常打印，说明session.connect()已被调用并返回Promise
• 执行流程卡在await p处，后续代码完全不执行
• "after connect"从未打印，setInCall(true)也未执行
• 没有触发catch块，无任何错误抛出或捕获

问题推断 #

"after connect"无法打印说明：

• session.connect()返回的Promise始终处于pending状态，既不resolve也不reject
• 连接流程在内部卡住，从未完成初始化或触发就绪事件

API路由代码（/api/session） #

export async function POST() {
  const apiKey = process.env.OPENAI_API_KEY;

  const res = await fetch("https://api.openai.com/v1/realtime/client_secrets", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${apiKey}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      session: {
        type: "realtime",
        model: "gpt-4o-realtime-preview-2025-06-03",
      },
    }),
  });

  const text = await res.text();

  if (!res.ok) {
    return new Response(text, { status: 500 });
  }

  const data = JSON.parse(text);

  return Response.json({
    clientSecret: data.value,
  });
}

Agent定义代码 #

import { tool, RealtimeAgent } from '@openai/agents/realtime';
import { z } from 'zod';

const getWeather = tool({
  name: 'get_weather',
  description: 'Return the weather for a city.',
  parameters: z.object({ city: z.string() }),
  async execute({ city }) {
    return `The weather in ${city} is sunny.`;
  },
});

export const weatherAgent = new RealtimeAgent({
  name: 'Weather assistant',
  instructions: 'Answer weather questions.',
  tools: [getWeather],
});

预期与实际行为 #

• 预期：session.connect()成功完成，"after connect"正常打印
• 实际：执行卡在await p处，后续代码无响应，无错误输出

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