Cloudflare Developers•4mo ago

Unexpected end of JSON ( How to use Durable Objects with next-on-pages? )

I am trying to use Durable Objects with next-on-pages. From my understanding, Durable Objects cannot be used directly with next-on-pages, they must be created in a separate worker and bound to that worker. I created a separate worker from the page and it now works on its own. However, when I call it with the page, I get an error.

[wrangler:err] SyntaxError: Unexpected end of JSON input
[wrangler:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket
[wrangler:inf] GET /api/users/profiles/websocket 500 Internal Server Error (123ms)

[wrangler:err] SyntaxError: Unexpected end of JSON input
[wrangler:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket
[wrangler:inf] GET /api/users/profiles/websocket 500 Internal Server Error (123ms)

3 Replies

$0OP•4mo ago

src/index.mjs

worker.mjs

$0OP•4mo ago

src/app/api/users/profiles/websocket

export const runtime = "edge";

import { NextRequest } from "next/server";
import { getRequestContext } from "@cloudflare/next-on-pages";
import { getPrismaClient }from "@/lib/db";
import checkAuth from "@/utils/checkAuth";

export async function GET(req: NextRequest): Promise<Response> {
  try {
    const prisma = getPrismaClient();
    const { profileId } = await checkAuth(prisma) || {};
    if (!profileId) {
      console.log("User not authenticated.");
      return new Response("User not authenticated.", { status: 401 });
    };

    const url = new URL(req.url);
    url.pathname = `/${profileId}/websocket`;
    const request = new Request(url, req.clone());
    
    const workerResponse = await getRequestContext().env.WEBSOCKET.fetch(request);
    
    console.log("Worker response status:", workerResponse.status);
    console.log("Worker response headers:", Object.fromEntries(workerResponse.headers));

    return workerResponse;
  } catch (error) {
    console.log("Internal server error.");
    console.error(error);
    return new Response("Internal server error.", { status: 500 });
  };
};

export const runtime = "edge";

import { NextRequest } from "next/server";
import { getRequestContext } from "@cloudflare/next-on-pages";
import { getPrismaClient }from "@/lib/db";
import checkAuth from "@/utils/checkAuth";

export async function GET(req: NextRequest): Promise<Response> {
  try {
    const prisma = getPrismaClient();
    const { profileId } = await checkAuth(prisma) || {};
    if (!profileId) {
      console.log("User not authenticated.");
      return new Response("User not authenticated.", { status: 401 });
    };

    const url = new URL(req.url);
    url.pathname = `/${profileId}/websocket`;
    const request = new Request(url, req.clone());
    
    const workerResponse = await getRequestContext().env.WEBSOCKET.fetch(request);
    
    console.log("Worker response status:", workerResponse.status);
    console.log("Worker response headers:", Object.fromEntries(workerResponse.headers));

    return workerResponse;
  } catch (error) {
    console.log("Internal server error.");
    console.error(error);
    return new Response("Internal server error.", { status: 500 });
  };
};

I tried binding the DurableObject directly, but I still get the same error.

export const runtime = "edge";

import { NextRequest } from "next/server";
import { getRequestContext } from "@cloudflare/next-on-pages";
import { getPrismaClient }from "@/lib/db";
import checkAuth from "@/utils/checkAuth";

export async function GET(req: NextRequest): Promise<Response> {
  try {
    const prisma = getPrismaClient();
    const { profileId } = await checkAuth(prisma) || {};
    if (!profileId) {
      console.log("User not authenticated.");
      return new Response("User not authenticated.", { status: 401 });
    };

    const id = getRequestContext().env.WEBSOCKET.idFromName(profileId.toString());
    const roomObject = getRequestContext().env.WEBSOCKET.get(id);

    console.log("aaa");
    const response = await roomObject.fetch(`http://service-binding/websocket`, req);
    console.log("bbb");
    console.log(response.status);

    return response
  } catch (error) {
    console.log("Internal server error.");
    console.error(error);
    return new Response("Internal server error.", { status: 500 });
  };
};

export const runtime = "edge";

import { NextRequest } from "next/server";
import { getRequestContext } from "@cloudflare/next-on-pages";
import { getPrismaClient }from "@/lib/db";
import checkAuth from "@/utils/checkAuth";

export async function GET(req: NextRequest): Promise<Response> {
  try {
    const prisma = getPrismaClient();
    const { profileId } = await checkAuth(prisma) || {};
    if (!profileId) {
      console.log("User not authenticated.");
      return new Response("User not authenticated.", { status: 401 });
    };

    const id = getRequestContext().env.WEBSOCKET.idFromName(profileId.toString());
    const roomObject = getRequestContext().env.WEBSOCKET.get(id);

    console.log("aaa");
    const response = await roomObject.fetch(`http://service-binding/websocket`, req);
    console.log("bbb");
    console.log(response.status);

    return response
  } catch (error) {
    console.log("Internal server error.");
    console.error(error);
    return new Response("Internal server error.", { status: 500 });
  };
};

aaa bbb 101 [wrangler:err] SyntaxError: Unexpected end of JSON input [wrangler:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket [wrangler:inf] GET /api/users/profiles/websocket 500 Internal Server Error (68ms)

Ryan | Cloneable.ai•2mo ago

just had the same issue... check your wrangler.toml, you probably don't have WEBSOCKET set for the name like: [[durable_objects.bindings]] name = "WEBSOCKET"

Gaming

Programming

Unexpected end of JSON ( How to use Durable Objects with next-on-pages? )