Using Namespaces with Wasp WebSocket

client-MainPage.jsx

import { useEffect } from "react";
import "./Main.css";

import { useMessagesSocket, useSocketListener } from "./websockets";

const MainPage = () => {
  const { socket, isConnected } = useMessagesSocket();
  useSocketListener(socket, "chatMessage", (message) => {
    console.log("message received: ", message);
  });
  return (
    <div className="container">
      <main>
        <button onClick={() => socket.emit("chatMessage", "hello")}>
          Send message {isConnected ? "connected" : "disconnected"}
        </button>
      </main>
    </div>
  );
};
export default MainPage;

client-websockets.ts

import { useEffect, useState } from "react";
import config from "@wasp/config";
import { io, Socket } from "socket.io-client";

let messagesSocket: Socket = io(`${config.apiUrl}/messages`);
export function useMessagesSocket() {
  const [isConnected, setIsConnected] = useState(messagesSocket.connected);

  useEffect(() => {
    function onConnect() {
      setIsConnected(true);
    }

    function onDisconnect() {
      setIsConnected(false);
    }

    messagesSocket.on("connect", onConnect);
    messagesSocket.on("disconnect", onDisconnect);

    return () => {
      messagesSocket.off("connect", onConnect);
      messagesSocket.off("disconnect", onDisconnect);
    };
  }, []);
  return {
    socket: messagesSocket,
    isConnected,
  };
}

export function useSocketListener(
  socket: Socket,
  event: string,
  handler: (...args: any[]) => void
) {
  useEffect(() => {
    socket.on(event, handler);
    return () => {
      socket.off(event, handler);
    };
  }, [event, handler]);
}

main.wasp

app websocketTest {
  wasp: {
    version: "^0.11.5"
  },
  title: "websocket-test",
  webSocket: {
    fn: import { webSocketFn } from "@server/websocket.js",
    autoConnect: false
  }
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import Main from "@client/MainPage.jsx"
}

server-websocket.ts

import type { WebSocketDefinition } from "@wasp/webSocket";
import { v4 as uuidv4 } from "uuid";

export const webSocketFn: WebSocketDefinition = (io) => {
  const messagesNamespace = io.of("/messages");
  messagesNamespace.on("connection", (socket) => {
    socket.on("chatMessage", (msg) => {
      console.log("message: ", msg);
      messagesNamespace.emit("chatMessage", {
        id: uuidv4(),
        username: "Same",
        text: msg,
      });
    });
  });
};