// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

發(fā)送函數(shù)調用的結果。

請求響應。
2. 我們通過將以下情況添加到Handemessage（）函數(shù)中的Switch語句：>來處理此操作。
3. 如果我們現(xiàn)在運行腳本并請求添加兩個數(shù)字的結果，則該模型應調用該功??能并提供結果。
>此功能相對簡單，但是由于該函數(shù)是由客戶端執(zhí)行的，因此可能是任何東西。在下一部分中，我們將看到兩個更復雜功能的示例。

此示例的完整代碼可在此處找到。

>今天建立MLOPS技能

>

不需要React知識才能使其啟動并運行。但是，您需要熟悉反應以修改或擴展它。

他們的應用在此存儲庫中托管。要設置它，請使用以下git命令克隆開始：

npm init -y && touch index.js

要安裝該應用程序，我們使用以下NPM（節(jié)點軟件包管理）命令：>

安裝完成后，在項目的根文件夾中創(chuàng)建一個名為.env的文件，然后粘貼以下內容：

npm install ws dotenv

替換＆lt; openai_api_key＆gt;使用OpenAI API鍵。

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

一個由應用程序的Web用戶界面組成的React前端。>

>要啟動應用程序，有必要同時啟動繼電器服務器和前端。要啟動繼電器服務器，請使用以下命令：>

啟動React前端使用命令：>

完成加載后，將在瀏覽器上打開一個選項卡，并在其上運行該應用程序。

ws.on(<event>, <function>);

// Add inside the main() function of index.js after creating ws
async function handleOpen() {
  console.log("Connection is opened");
}
ws.on("open", handleOpen);

我們首先單擊“連接”按鈕。這將向實時API發(fā)送“ Hello”消息，我們將收到一個問候。

>使用它，按和交談而無需釋放按鈕。釋放按鈕時發(fā)送消息。

該應用程序還具有VAD（語音活動檢測）模式，在該模式中，我們不需要按任何按鈕。在此模式下，應用程序將不斷收聽，使我們能夠與助手進行積極的對話。要使用它，只需按“ VAD”按鈕并說話。

函數(shù)

>有時我請求天氣報告，而響應表明當時無法訪問它。但是，這些信息始終顯示在右側。作為演示應用程序，它并不是要成為功能齊全的產品，而是用于展示API的功能。

了解客戶端

本節(jié)需要對REACT的高級了解才能遵循，因為我們介紹了應用程序的一些實現(xiàn)詳細信息。

>

在此useFect（）調用中定義了與API的集成。最初呈現(xiàn)控制臺頁面時，執(zhí)行此useFect（）中的代碼。與我們的node.js腳本類似，它概述了如何響應API事件。主要的區(qū)別是其使用RealtimeClient客戶端包裝器。>

npm init -y && touch index.js