For Workers & Pages, what is the name of the domain?
engaged-parent-phone.miyamasuco.workers.dev
What is the error message?
HTTP 403 forbidden
What is the issue or error you’re encountering
Unable to create a WebSocket connection where the WSS server requires HTTP Header Auth
What steps have you taken to resolve the issue?
I have tried to use the npm ws package, but CF Workers does not support that package.
I have tried to use fetch() but that does not handle WSS
What are the steps to reproduce the issue?
Try to connect to OpenAI Realtime API via websocket (wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-12-17) directly from a cloudflare worker using the vanilla javascript new WebSocket(url) and you will see that it is not possible since you cannot pass in the required header values [Authorization=Bearer , OPENAI-BETA=realtime=v1]
I watched Craig Dennis’s YT video connecting WebRTC to the OpenAI Realtime API. Exciting stuff!
However, I tried my own Worker solution and was not as successful.
Why? Cloudflare workers does not support NPM WS library. Why can’t I just use the Worker-supported WebSocket class? Well, because the OpenAI realtime API requires HTTP header Authorization : Bearer $OAI_API_KEY and a few other headers.
On OAI Realtime API Docs page, they just added this code to establish vanilla javascript WebSocket connection. Thank the higher powers! I was stuck on this for a week!!
Note that in client-side environments like web browsers, we recommend
using WebRTC instead. It is possible, however, to use the standard
WebSocket interface in browser-like environments like Deno and
Cloudflare Workers.
*/
const ws = new WebSocket(
"wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-12-17",
[
"realtime",
// Auth
"openai-insecure-api-key." + OPENAI_API_KEY,
// Optional
"openai-organization." + OPENAI_ORG_ID,
"openai-project." + OPENAI_PROJECT_ID,
// Beta protocol, required
"openai-beta.realtime-v1"
]
);
ws.on("open", function open() {
console.log("Connected to server.");
});
ws.on("message", function incoming(message) {
console.log(message.data);
});```