Skip to main content

Next.js

Before anything, you'll need to be registered in socketless.ws and already have a project created.

Setting up project​

  1. Installing packages​

    bash npm install socketless.ws @socketless/react

  2. Setting environment variables​

    Create a .env file in the root of your project and add the following variables:

    .env
    # ...your existing variables
    SOCKETLESS_CLIENT_ID=...
    SOCKETLESS_TOKEN=...

    # This one is optional. If you deploy to Vercel, you won't need it.
    SOCKETLESS_URL=...
    info

    You can get the SOCKETLESS_CLIENT_ID and SOCKETLESS_TOKEN from the socketless.ws dashboard.

Setting up Socketless on Next.js​

  1. Create the server​

    Create a new file somewhere safe, like server/socketless.ts. This file will only be used in the server-side.

    src/server/socketless.ts
    import { createSocketless } from "socketless.ws/server";

    export const socketless = createSocketless({
      clientId: process.env.SOCKETLESS_CLIENT_ID!,
      token: process.env.SOCKETLESS_TOKEN!,

      url: process.env.SOCKETLESS_URL!,

      // Here go your functions
      onConnect(context, identifier) {
        console.log("User connected", identifier);
        context.toFeed("demo").send(`${identifier} connected`);
      },
      onDisconnect(context, identifier) {
        console.log("User disconnected", identifier);
        context.toFeed("demo").send(`${identifier} disconnected`);
      },
      onMessage(context, identifier, message) {
        console.log("Message received", message);
        context.toFeed("demo").send(`${identifier}: "${message}"`);
      },
    });

    Here we've create a Socketless server with our environment variables. Here you also add the functionality of your "server". We're sending a message to a feed called demo when a user connects, disconnects or sends a message.

  2. Creating the API route​

    Now you need to create the route where socketless will connect to your website. We recommend it to be under /api/socketless.

    src/app/api/socketless/route.ts
    import { socketless } from "@/server/socketless";

    export const { POST } = socketless.generateRoutes();

Nice! You're now ready to use Socketless on your Next.js project.

Using Socketless on Next.js​

Now that you have your server and route set up, you can start using Socketless on your pages. Here's an example on how to use it:

src/app/page.tsx
import { socketless } from "@/server/socketless";

export default async function Page() {
  // Obtain a way to identify the user. If anonymous, you can use a random string (and maybe store to cookies).
  const { userId } = await authenticate();

  const { url } = await socketless.getConnection(userId);

  return <LiveDashboard websocketUrl={url} />;
}
src/components/LiveDashboard.tsx
import { useSocketlessWebsocket } from "@socketless/react";

export default function LiveDashboard({
  websocketUrl,
}: {
  websocketUrl: string;
}) {
  const { client, lastMessage } = useSocketlessWebsocket(websocketUrl);

  useEffect(() => {
    console.log("New Message", lastMessage);
  }, [lastMessage]);

  return (
    <button onclick={() => client.send("Message sent from NextJS")}>
      Send Message
    </button>
  );
}

Next steps​

Check out the following recommended guides: