CD
Cloudflare Developers•6mo ago
$0

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
$0
$0OP•6mo ago
src/index.mjs

worker.mjs

$0
$0OP•5mo 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
Ryan | Cloneable.ai•3mo 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"

Did you find this page helpful?