Skip to main content
Version: Next

wasp/server/webSocket

Types for implementing your app's WebSocket server with Socket.IO. Only available if your app sets the webSocket field of the app spec.

Interfaces​

WaspSocketData​

The data Wasp attaches to each socket, in socket.data. Extend it to type your own socket data.

Wasp automatically sends the user's session with the connection, and if it's valid, the server adds the user to the socket.

Properties​

user?​

optional user?: AuthUser | null

The logged-in user. It's undefined if the connection has no session, and null if the session is invalid, so check it with if (!socket.data.user). Only present if your app uses auth.

Type Aliases​

WebSocketDefinition​

WebSocketDefinition<ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData> = (io, context) => Promise<void> | void

The type of the function you pass to the webSocket.fn field of the app spec. Wasp calls it on server start to define your WebSocket server's events and handlers.

It receives two arguments:

  1. io: The Socket.IO Server. Use it to register callbacks for all the regular Socket.IO events. If a user is logged in, socket.data.user has their data.
  2. context: Gives you access to all the Entities in your app, in context.entities.

Typing your function with the event types lets you get full-stack type safety: the client's useSocket and useSocketListener hooks, from wasp/client/webSocket, use the same event types.

Type Parameters​

ClientToServerEvents​

ClientToServerEvents extends EventsMap = DefaultEventsMap

The events the client sends to the server, as a map from event names to listener functions.

ServerToClientEvents​

ServerToClientEvents extends EventsMap = DefaultEventsMap

The events the server sends to the client, as a map from event names to listener functions.

InterServerEvents​

InterServerEvents extends EventsMap = DefaultEventsMap

The events sent between servers.

SocketData​

SocketData extends WaspSocketData = WaspSocketData

The type of socket.data.

Parameters​

io​

Server<ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData>

context​

WebSocketContext

Returns​

Promise<void> | void

Example​

import { v4 as uuidv4 } from "uuid";
import {
  type WebSocketDefinition,
  type WaspSocketData,
} from "wasp/server/webSocket";

export const webSocketFn: WebSocketFn = (io, context) => {
  io.on("connection", (socket) => {
    const username = socket.data.user?.getFirstProviderUserId() ?? "Unknown";
    console.log("a user connected: ", username);

    socket.on("chatMessage", async (message) => {
      console.log("message: ", message);
      io.emit("chatMessage", { id: uuidv4(), username, text: message });
      // You can also use your Entities here:
      // await context.entities.SomeEntity.create({ someField: message })
    });
  });
};

type WebSocketFn = WebSocketDefinition<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>;

interface ServerToClientEvents {
  chatMessage: (message: {
    id: string;
    username: string;
    text: string;
  }) => void;
}

interface ClientToServerEvents {
  chatMessage: (message: string) => void;
}

interface InterServerEvents {}

// Data that is attached to the socket.
interface SocketData extends WaspSocketData {}

See​

The webSocketFn function

Referenced Types​

WebSocketContext​

WebSocketContext = object

The context Wasp passes to your WebSocketDefinition function.

Properties​

entities​

entities: object

The Prisma API for each Entity in your app, keyed by the Entity's name. For example, context.entities.Task exposes prisma.task from Prisma's CRUD API.

Index Signature​

[EntityName: string]: any