search

yjs / y-webrtc

WebRTC Connector for Yjs
MIT License
448 stars 109 forks source link

Library fails with missing global declarations when run inside nodejs (ES6) #36

Open lukebayes opened 2 years ago

lukebayes commented 2 years ago

I'm attempting to run a Webrtc client within browsers and nodejs.

The browser build seems to work well. The nodejs (ES6 modules) side is having some problems.

Here is some sample code that triggers the first error from nodejs (in a file named, demo.js).

import {WebrtcProvider} from 'y-webrtc';
import * as Y from 'yjs';

const id = 1;
const config = {
  signaling: ['ws://localhost:4444'],
  maxConns: 50 + Math.floor(Math.random() * 15),
  peerOpts: {},
};

const doc = new Y.Doc();
const webrtc = new WebrtcProvider(id, doc, config);

Running this with node demo.js fails with the following error:

file:///[proj]/node_modules/lib0/websocket.js:25
    const websocket = new WebSocket(wsclient.url)
                      ^

ReferenceError: WebSocket is not defined
    at setupWS (file:///[proj]/node_modules/lib0/websocket.js:25:23)
    at new WebsocketClient (file:///[proj]/node_modules/lib0/websocket.js:122:5)
    at new SignalingConn (file:///[[proj]/node_modules/y-webrtc/src/y-webrtc.js:473:5)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:610:75
    at Module.setIfUndefined (file:///[proj]/node_modules/lib0/map.js:49:24)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:610:33
    at Array.forEach (<anonymous>)
    at WebrtcProvider.connect (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:609:24)
    at new WebrtcProvider (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:595:10)
    at file:///proj]/demo.js:19:16

I was able to work around this issue by adding the following to the top of my application entry point (above any imports).

import WebSocket from 'ws';
Object.assign(global, {WebSocket});

This allows the service to start, but whenever a connection is made from a separate browser client, the following error is thrown:

Exit with: Error: Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11
    at t.exports (/[proj]/node_modules/simple-peer/simplepeer.min.js:6:37193)
    at new p (/[proj]/node_modules/simple-peer/simplepeer.min.js:6:79527)
    at new WebrtcConn (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:183:17)
    at file:///[proj]/teak/node_modules/y-webrtc/src/y-webrtc.js:513:68
    at Module.setIfUndefined (file:///proj]/node_modules/lib0/map.js:49:24)
    at execMessage (file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:513:23)
    at file:///[proj]/node_modules/y-webrtc/src/y-webrtc.js:530:13
    at file:///[proj]/node_modules/lib0/observable.js:73:90
    at Array.forEach (<anonymous>)
    at SignalingConn.emit (file:///[proj]/node_modules/lib0/observable.js:73:77)

After digging a little bit, it looks like y-webrtc is loading a pre-minified build of simple-peer that may have been built for the browser and not nodejs.

I was unable to get a similar global hack working for this issue, and instead forked the y-webrtc repo into a vendor folder, loaded as a git submodule and referred to that version from my node application and the npm published version from my browser client code.

I also had to add the following to my imports and update the peerOpts object:

import wrtc from 'wrtc';

const config = {
  signaling: ['ws://localhost:4444'],
  maxConns: 50 + Math.floor(Math.random() * 15),
  peerOpts: {
    wrtc,
  },
};

Unfortunately, wrtc requires node-pre-gyp and node-gyp, which seem to be in a weird state at the moment, so I had to install those both globally, delete my node_modules folder and reinstall local modules in order to get the thing to work.

Expected behavior The library should work for either node or browser clients

Environment Information

FWIW 2, I also tried pointing into the unminified build of simple-peer, but that did not want to build successfully for the browser (under esbuild with es6 modules) as there were nodejs modules being required in that dependency.

I understand that these issues probably aren't going to be trivial to solve from y-webrtc, so thought I'd post here in case others have the same problems, at least we can discuss workarounds.

dmonad commented 2 years ago

Hi @lukebayes ,

It would be possible to provide two different bundles in y-webrtc: one for the browser and one for node. These separate bundles could be exported using conditional imports like I'm doing in isomorphic.js, for example.

I can't import the main import from simple-peer, because it can only be bundled with browserify (and probably some esoteric webpack configuration).

The y-webrtc node bundle should import the main import, the y-webrtc browser import should continue importing the pre-bundled version.

I'm sorry, but this is not a high priority for me. I'll leave this ticket open and will accept a PR that implements what I described above.

lukebayes commented 2 years ago

Hey @dmonad,

Thanks for the response.

I definitely understand how difficult it can be to get work like this into the top of a priority queue. No problem here.

My main hope is to get a place online where anyone else bumping into these issues may find a workaround.

I'd like to see if I can't get simple-peer to build more appropriately across their supported environments.

I believe that would remove some (nearly all) of the work that showed up here.

Thanks!

omawhite commented 2 years ago

I also ran into this issue while trying to set up this library in a next.js project. For anyone running into this issue, make sure your code containing the WebrtcProvider is only running on the client side.

asmodehn commented 1 year ago

Hi, just a quick note that I ran into this while (loosely) following https://syncedstore.org/docs/svelte/ to setup y-webrtc in my svelte app with syncedstore.

When I ll find some time, I'll try to dig a bit deeper, and post updated information if I find any.

needs commented 1 year ago

I also ran into this issue while trying to set up this library in a next.js project. For anyone running into this issue, make sure your code containing the WebrtcProvider is only running on the client side.

This works on my side:

store.ts

export const store = syncedStore<Store>({ ... });

export function initStore() {
  const doc = getYjsDoc(store);
  const webrtcProvider = new WebrtcProvider("my-room", doc)
  return () => {
    webrtcProvider.destroy();
  }
}

_app.tsx

function CustomApp() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      return initStore();
    }
  }, []);

  return (
      ...
  );
}