WebSocket connection to ...ws://localhost:9000/.. failed: Insufficient resources

[rogersanick]

I'm having an issue:

• The Peer JS client is throwing a non blocking error when the websocket connection fails to peerjsserver
• 1.4.7 and Peer Server latest
• Nodejs version - 16.15.0
• Mac

$31d11a8d122cb4b7$export$4798917dbf149b792.start | @ | socket.ts:42
-- | -- | --
  | $26088d7da5b03f69$export$ecd1fc136c4224482._initialize | @ | peer.ts:279
  | (anonymous) | @ | peer.ts:230
  | Promise.then (async) |   |  
  | $26088d7da5b03f69$export$ecd1fc136c4224482 | @ | peer.ts:230
  | PeerConnections | @ | PeerContext.tsx:37
  | renderWithHooks | @ | react-dom.development.js:16305
  | updateFunctionComponent | @ | react-dom.development.js:19588
  | beginWork | @ | react-dom.development.js:21601
  | beginWork$1 | @ | react-dom.development.js:27426
  | performUnitOfWork | @ | react-dom.development.js:26557
  | workLoopSync | @ | react-dom.development.js:26466
  | renderRootSync | @ | react-dom.development.js:26434
  | performConcurrentWorkOnRoot | @ | react-dom.development.js:25738
  | workLoop | @ | scheduler.development.js:266
  | flushWork | @ | scheduler.development.js:239
  | performWorkUntilDeadline```

[jonasgloning]

Transferred to the client repository.
I don’t think this is a server issue, as the error seems to be browser-specific (MDN doesn’t know this type of exception)

Just a wild guess, as there’s not enough information to reproduce this:
Do you use PeerJS in the body of a React component without useEffect?
Then after each rerender a new Peer object gets created. Every Peer opens up a new socket to the server until a limit in the Browser is reached, and the operation fails.

[rogersanick]

Hey @jonasgloning - thanks for getting back to me. You are correct, I definitely do that. I'm assigning a listener for 'data' but I'm also removing it when the component is removed. See the snippets below.

import Peer, { DataConnection } from 'peerjs';
import { createContext, ReactNode, useEffect, useState } from 'react';

// Connection Statis
enum ConnectionStatus {
  CLOSED = 'CLOSED',
  CONNECTING = 'CONNECTING',
  OPEN = 'OPEN',
}


// This is the interface for the context
interface PeerConnectionsContextType {
  id: string;
  peerClient: Peer;
  peerConnections: {[key: string]: DataConnection};
  peerConnectionStatus: {[key: string]: ConnectionStatus };
  addPeer: (peerId: string) => void;
  sendMessage: (peerId: string, message: any) => void;
  setPeerDataHandler: (data: any) => void;
}

// Instantiate context for tracking peers
const PeerConnectionsContext = createContext<PeerConnectionsContextType>({
  id: '',
  peerClient: {} as any,
  peerConnections: {},
  peerConnectionStatus: {},
  addPeer: (_: string) => {},
  sendMessage: (_: string, __: any) => {},
  setPeerDataHandler: () => (_: any) => {},
});

const PeerConnections: React.FC<{ children: ReactNode }> = ({ children }) => {

  // Setup current users peer client
  const [ peerClient ] = useState<Peer>(new Peer({host: "/", port: 9000})) // This is a local dev server;
  const [ id, setId ] = useState<string>('UNKNOWN');

  // Define storage for connections to peers
  const [ peerConnections, setPeerConnections ] = useState<{[key: string]: DataConnection}>({});
  const [ peerConnectionStatus, setPeerConnectionStatus ] = useState<{[key: string]: ConnectionStatus}>({});

  // Define the callback function for receiving messages
  const [ peerDataHandler, setPeerDataHandler ] = useState<(data: any) => void>(() => (_: any) => {
    console.log("No peer data handler has been set.")
  })

  // Set ID when it becomes available, listen for INCOMING connections
  useEffect(() => {
    peerClient.on('open', (id) => {
      setId(id);
    });
    peerClient.on('connection', (connection) => {
      setPeerConnections({ ...peerConnections, [connection.peer]: connection });
      setPeerConnectionStatus({ ...peerConnectionStatus, [connection.peer]: ConnectionStatus.OPEN });
    });    
    () => {
      peerClient.removeAllListeners('connection');
      peerClient.removeAllListeners('open');
    }
  }, []);

  useEffect(() => {
    // Listen for messages from peers
    Object.values(peerConnections).forEach((connection) => {
      connection.on('data', peerDataHandler);
    })
    return () => { 
      Object.values(peerConnections).forEach((connection) => {
        connection.removeAllListeners('data');
      })
     }
  }, [peerConnections, peerDataHandler])

  // Add a peer
  const addPeer = (peerId: string) => {

    // If the client is already a peer, log an error 
    if (peerConnections[peerId]) {
      console.log("That peer has already been added.")
      return
    }

    // Connect to the client using the provided ID
    const connection = peerClient.connect(peerId, { reliable: true });
    setPeerConnections({ ...peerConnections, [peerId]: connection });
    setPeerConnectionStatus({ ...peerConnectionStatus, [peerId]: ConnectionStatus.CONNECTING })

    connection.on('open', () => {
      setPeerConnections({ ...peerConnections, [peerId]: connection });
      setPeerConnectionStatus({ ...peerConnectionStatus, [peerId]: ConnectionStatus.OPEN })
    })

    connection.on('close', () => {
      const newPeerConnections = { ...peerConnections };
      delete newPeerConnections[connection.peer];
      setPeerConnections(newPeerConnections);
      setPeerConnectionStatus({ ...peerConnectionStatus, [connection.peer]: ConnectionStatus.CLOSED });
    });
  };

  const sendMessage = (peerId: string, message: any) => {
    peerConnections[peerId].send(message);
  }

  return (
    <PeerConnectionsContext.Provider value={{ peerClient, id, peerConnections, peerConnectionStatus, addPeer, sendMessage, setPeerDataHandler }}>
      {children}
    </PeerConnectionsContext.Provider>
  );
};

export { PeerConnections, PeerConnectionsContext };

[jonasgloning]

So there’s quite a lot of code, and I haven’t looked closely at it, but I think replacing the following lines should do it:

const [ peerClient ] = useState<Peer>(new Peer({host: "/", port: 9000})) // This is a local dev server;

// with

const [ peerClient, setPeerClient ] = useState<Peer|undefined>()

and

useEffect(() => {
    peerClient.on('open', (id) => {

// with

useEffect(() => {
    setPeerClient(new Peer({host: "/", port: 9000}) // This is a local dev server;
    peerClient.on('open', (id) => {

It’s important that new Peer() only get’s called inside the useEffect hook.