GithubHelp home page GithubHelp logo

dmotz / trystero Goto Github PK

View Code? Open in Web Editor NEW
925.0 13.0 71.0 1.11 MB

๐Ÿค Build instant multiplayer webapps, no server required โ€” Magic WebRTC matchmaking over BitTorrent, Nostr, MQTT, IPFS, and Firebase

Home Page: https://oxism.com/trystero

License: MIT License

JavaScript 99.77% HTML 0.23%
webrtc p2p peer-to-peer chat pairing matchmaking ipfs bittorrent webtorrent serverless

trystero's Issues

support Hypercore

any plans to support hypercore? there is hyperswarm-web that you can use.

WebRTC: ICE failed

Hi,
Thanks a lot for making this abstract handy library !!!

As for the results, I already had it running without problems, then all of a sudden I'm having:

WebRTC: ICE failed, add a TURN server and see about:webrtc for more details

So when I check I have the followings:

image

I don't know anything about bittorrent network, any help is so much appreciated !!

Edit:
All I'm doing is the basic example of one server joinRoom and same for clients. I'm using client sessions (chrome, firefox)

Thanks a lot

Session descriptor signing and verification support

Hi! I just found this project recently and it seems super useful. The symmetric encryption scheme mentioned in https://github.com/dmotz/trystero#encryption looks very nice for preventing MITM attacks when the room password is private. However, I'm looking into building a system with public rooms, so the symmetric encryption is not viable for me. What I'd like is a scheme where each peer generated a public/private keypair and uses that to encrypt the SDPs, like what SaltyRTC does except decentralized (https://saltyrtc.org).

When a new peer B is found, peer A would need to encrypt it's SDP offer with peer B's public key. Peer B would then decrypt the SDP, make an answer and encrypt it with peer A's public key, sending it back. These public keys could either be gossipped or known in advance.

How possible is it for something like this to be implemented? I don't know a lot about how the BitTorrent tracker websocket works. Would it allow sending messages like this?

Edit: I'm re-opening this as support for session descriptor signing. See #19 (comment).

Uncaught Error: Service database is not available

I have a confusing issue - currently I have trystero working with all services but firebase.

<script type="module">import {joinRoom} from 'https://cdn.skypack.dev/trystero/firebase'; 

    const config = {appId: '*****-*****-default-rtdb'} // starred out exact database instance
    const room = joinRoom(config, 'yoyodyne')
    room.onPeerJoin(peerId => console.log(`${peerId} joined`))
    room.onPeerLeave(peerId => console.log(`${peerId} left`))
 
// this object can store audio instances for later
const peerAudios = {}

// get a local audio stream from the microphone
const selfStream = await navigator.mediaDevices.getUserMedia({
  audio: true,
  video: false
}).catch(function(err) {
    //log to console first 
    console.log(err); /* handle the error */
    if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
        //required track is missing 
    } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
        //webcam or mic are already in use 
    } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
        //constraints can not be satisfied by avb. devices 
    } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
        //permission denied in browser 
    } else if (err.name == "TypeError" || err.name == "TypeError") {
        //empty constraints object 
    } else {
        //other errors 
    }
});

// send stream to peers currently in the room
room.addStream(selfStream)

// send stream to peers who join later
//room.onPeerJoin(peerId => room.addStream(selfStream, peerId))

// handle streams from other peers n

room.onPeerStream((stream, peerId) => {
  // create an audio instance and set the incoming stream
  const audio = new Audio()
  audio.srcObject = stream
  audio.autoplay = true

  // add the audio to peerAudio object if you want to address it for something
  // later (volume, etc.)
  peerAudios[peerId] = audio
})
</script>

I'm getting the following error:

Uncaught Error: Service database is not available
    getImmediate https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2019,mode=imports/optimized/@firebase/component.js:111
    getDatabase https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2019,mode=imports/optimized/@firebase/database.js:9780
    init https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/trystero/firebase.js:18
    joinRoom https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/trystero/firebase.js:21
    initGuard https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/common/crypto-79d472b6.js:30
    <anonymous> https://buysomeonecoffee.com/:200
[component.js:111:15](https://cdn.skypack.dev/-/@firebase/[email protected]/dist=es2019,mode=imports/optimized/@firebase/component.js)

My firebase database rules are:

{
  "rules": {
    ".read": false,
    ".write": false,
    "__trystero__": {
      ".read": false,
      ".write": false,
      "$room_id": {
        ".read": true,
        ".write": true
      }
    }
  }
}

There was some suggestion on StackOverflow similar issues could be due to incompatible versions of Firebase. I just created my Firebase instance today, so it should not be outdated.

Any suggestions? Appreciated very frustrating issue as Firebase is the most reliable WebRTC connector and it's simply not working for me.

Callbacks and leave() seem unreliable?

Callbacks like onPeerLeave and onPeerJoin dont seem to be firing reliably? Especially onPeerLeave. Is this a known bug or issue?

I also notice that sometimes when trying to move a peer from one room to another, by calling room.leave() on the current room and then joinRoom() for the new one, that sometimes the user get stuck in both and continues to receive messages/data from both? To the point that even after calling leave() on a room, if other peers do a room.getPeers() call, it will continue to show the peer that should have been removed?

For a project about private/direct/secure comms, why's it so impossible to self host?

I have tried a bazillion ways to get the cloned repo to perform as the CDN does. Or to wget all the CDN files and host them locally. Why is it such a convoluted series of imports from a remote server?

Why do the instructions omit how to host locally?

If the project is about private and secure comms, wouldn't the ability to host the code yourself be at the forefront?

What is needed to self-host with custom BT trackers?

Trystero looks amazing. I'm evaluating it as a solution for p2p "rooms" that span different blockchain nodes in a new blockchain network.

Suppose every node in my blockchain network would be hosting a torrent tracker, can Trystero be configured to use these as opposed to the hardcoded public ones?

Firebase - Service database is not available

When trying to intialise a Firebase setup:

component.js:111 Uncaught Error: Service database is not available
    at Provider.getImmediate (component.js:111:15)
    at getDatabase (database.js:9780:45)
    at init (firebase.js:18:34)
    at firebase.js:21:14
    at crypto-36a3f9c0.js:30:10

I tried using the app ID, as well as the realtime database url, but to no avail.

According to this stack overflow it may be because the version of the Firebase SDK this project uses is out of date?

https://stackoverflow.com/questions/70823077/uncaught-error-service-database-is-not-available-firebase-javascript

Example Complement

Hi! I tried following your example to create a voice chat, but it doesn't work. Peers are connected, but there is no audio. Should I add a track? How it works?

import {joinRoom} from 'trystero';

const config = {appId: 'test08658'};

const room = joinRoom(config, 'vox');

room.addStream(navigator.mediaDevices.getUserMedia({audio: true, video: false}));

stripped zoom example

Hi,

First of all: thanks!

Thanks for leading us out of the dark ages of p2p/webrtc which require plumbing a signalling-server together.
This has really been holding back the p2p movement in a certain sense (people don't like too much moving parts).
With all the common good online infrastructure (bittorrent e.g.), a signaling 'commons' was really something I was hoping for (but didn't had the skills to develop something like this).

Anyways, it works like a charm.
I've re-created the README.md example-snippets into a stripped zoom-client:

https://gist.github.com/coderofsalvation/b70d635061220f2860f21eb69c8e5918

Feel free to use it.

Idea: put it in the repo as example/zoom.html and add the following .github/workflows/website.yml:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2
  • activate github pages in settings
  • Optionally put an index.html landingpage in the root of the repo

Boom..you have a project/demos which people can check out with one click

Reconnection Logic

Wonderful little library you're building here!

I was playing with the demo and comparing it to our DAM/GUN approach using the bittorrent strategy, and while everything seems to work as advertised once the mesh is established, I noticed the bittorrent websocket connections are quite fragile and close quite quickly, without an obvious reconnection logic to restart announceAll and staying advertised to the trackers

WebSocket is already in CLOSING or CLOSED state.
announce @ torrent.js:102

The immediate effects is peers are not discovered when they join the page far apart in time. Did i miss anything obvious for those scenarios and/or can one be discussed to form a code contribution?

Thanks!

Node.js support

Support for Trystero running in a Node.js environment could enable some really interesting use cases. @dmotz would you be interested in supporting Node? If so, then I'd be happy to work on a PR to explore this!

Re-connect

I'm getting some re-connection difficulties.

  1. Two clients connect (one is a phone).
  2. Phone display is turned off.
  3. 2 minutes later the connection is broken and the other browser shows this error in console.
crypto-254fb80e.js:232 Error: Connection failed.
    at Peer._onConnectionStateChange (simple-peer-light.js:550:28)
    at Peer._pc.onconnectionstatechange (simple-peer-light.js:105:12)

I attempted various combinations of .leave() and .joinRoom without luck.

question: project status

Hi,

thanks for your amazing work on trystero. I am trying to build a project that will synchronize data of one or few users on multiple devices.
I've played around with webRTC, but I've always been put off by the need to run servers that kind of defeat the idea of p2p communication.

I tried syncing across multiple devices today and it works perfectly. Is this project production ready?

I would like to create a few PRs if it is okay with you:

  • there are no tests, but at least some utils functions can be easily tested
  • project has d.ts files but is written in JavaScript. Do you mind if I rewrite project to TypeScript?
  • current version works only on local network. I think it can be fixed by adding STUN servers. There are free public STUN servers which can be used in default configuration same way as you added default torrent trackers.

room.onPeerStream not firing

Hi @dmotz ,

When I room.addStream on one peer, I do not see the onPeerStream firing.

room = joinRoom(config, ns);
[sendAudio, getAudio] = room.makeAction("audio");
room.onPeerStream((stream, id) => console.log(`got stream from ${id}`, stream));

That's how I set the room up. room.onPeerStream doesn't fire for me.

Click function that is supposed to create stream below

      talking = await navigator.mediaDevices.getUserMedia({audio: true, video: false});
      console.log('ship out',talking)
      room.addStream(talking,selfId);

Add stream is called, in one peer, but the other does not see the stream or add the stream

[Question]: Detecting incorrect passwords

I'm using joinRoom from trystero/firebase , but I'm having trouble detecting if the user's inputted password successfully connected them to the room. It seems that the library throws this error internally when failing to connect: firebase.js:122 Trystero: received malformed SDP JSON . But I'm not sure how to reliably detect that.

Binary/Blob truncation on receiver

The "binary" pipeline example using makeAction appears to be only presenting a chunk of actual data to the get client:

const [sendPic, getPic] = room.makeAction('pic')

// blobs are automatically handled, as are any form of TypedArray
canvas.toBlob(blob => sendPic(blob))

// binary data is received as raw ArrayBuffers so your handling code should
// interpret it in a way that makes sense
getPic((data, id) => (imgs[id].src = URL.createObjectURL(new Blob([data]))))

This seems easy to reproduce by sending anything (image or else) larger than a few KBs over to see it truncated using the bittorrent strategy room. Interestingly enough, the overall blob size on the receiver seems correct, but filled with 0/null values past the first valid chunk.

Did anyone succeed in transmitting full Blobs with the above (and/or any variation)?

Thanks in advance!

Customizable requirements to join room

Hi, first of all great library & great docs, I'm using it as a core component of a complex webapp I'm building and I'm very satisfied ๐Ÿ‘

I was thinking, would it be difficult to implement customizable requirements to join the room?

Like, an option that can take a function as value, and that function must evaluates to true to join; maybe another option that takes a custom form in object/json format, so that the function can use its values as args.

I'm thinking of using PGP under the hood for P2P user verification, but it seems to me that atm I could only use it to flag users as impostors . The options I proposed would make it super easy to filter people at the user level & stopping them from joining the room altogether (it would be useless against someone who's tampering with the code tho)

Would it be difficult to implement it with the current structure of the library?

Reconnecting doesn't work properly with Firebase

Repro steps:

  • User 1 creates a room with a hardcoded app ID and room ID
  • User 2 joins the room
  • User 2 calls room.leave()
  • User 2 attempts to join the room again, without refreshing. Same app ID, room ID, and peer ID.
  • The onPeerJoin function does not execute for User 1.
  • If I switch the backend to bittorrent, it works fine. It also works fine on a refresh when a new peer ID is generated.

I'm guessing this has something to do with entries in connectedPeers or peerMap not being properly evicted on a disconnect, but I haven't had a chance to familiarize myself with the Firebase API or everything trystero/firebase.js is doing.

non web dev version

Is there a possibility to use the same technique to for example a native app in android or other operating system?
I know that node js could be encapsulated in an app or run alongside as a relay but Im more into tightly integrating it into one app code.

using a tracker swarm module for redundancy and fall backs

this is a package i worked on, it creates a swarm of trackers using the bittorrent-dht package and if 1 tracker is busy or is overloaded with connections and resource usage, then that 1 tracker can send the connection to another tracker in the swarm.

it does this by sending a relay property along with the ['failure reason'] in returned object
if the client receives ['failure reason'] === 'Relaying', then the client can use the ['relay'] property, which is the announce url for another tracker in the swarm that the client can use since the original tracker is busy

https://github.com/ducksandgoats/bittorrent-relay

the tracker swarm creates redundancy, so i think it can be very complimentary to trystero

i made a fork of trystero to show what it looks like
https://github.com/ducksandgoats/trystero/blob/main/src/torrent.js#L91

here are two bittorrent-relay trackers i am running online
ws://retested.club:10509/announce and ws://retested.shop:10509/announce
also has http routes, try the http route /address.json it will show all the other trackers in the swarm in the form of host:port

just a small change to trystero since all we are doing is checking the ['failure reason'] to see if a ['relay'] property has been sent to us, what do you think about using this change?

Can all peers see each others IP addresses?

Just wondering how secure/anonymous trystero is.

If I create a room and a number of users join, can they all see the IP addresses of the other people? And if so how easy is that to access?

WebRTC connection takes 5~10 seconds and multiple ICE TURN servers fail

Last week my code did work but currently multiple WebRTC signalling server seems to be broken. Which means I can messages send to other peers arrive with a 10 second delay. I assume it may be related to the simple-peer-light WebRTC dependency.

Code:

const createRoom = (roomConfig: BaseRoomConfig, roomId: string) => {
  return joinRoom(roomConfig, roomId);
};
const roomConfig = {
  appId: '<Your APP ID here>',
};
const roomId = <Your ROOM ID here>;
const room = createRoom(roomConfig, roomId);
room.onPeerJoin(peerId => console.log(`${peerId} joined`));

Reproducible example:

  1. Create a room.
  2. Let 1 user join the room.
  3. Let another user join the same room.

Expected behaviour:
Users in the same room get an update of the joined users.

Current behaviour:
ICE Turn Server failed. Multiple ICE TURN servers seem to fail until it finally succeeds with a backup server.
image
image

Extra details

I've tried different internet networks (Netherlands - EU):

  • home network
  • work network
  • 4G network

Room providers:

  • IPFS
  • BitTorrent
  • FireBase

trystero version

  • 0.16.0

OS:

  • MacOS 14.0

Browsers:

  • Edge
  • Safari
  • LibreWolf (hardened FireFox)
  • Chrome

P2PT as a fallback for Trystero? Or does Trystero already do exact the same?

Does Trystero basically what P2PT does as well? It creates a torrent based on a 'topic' and peers interested in that topic swarm around that torrent and connect to each other?

If not, whats the difference? How exactly does Trystero do it?

I like to use P2PT as a fallback for Trystero, but maybe Trystero does already, was P2PT does?

Every client is also a tracker itself, so its able to fetch connection adresses (DHT)

  1. direct (webrtc) and indirect (torrents, IPFS) (webrtc prioritized, Trystero reconnects through torrents and ipfs as a fallback)
  2. indirect/fallback (torrent/magnetlink) (P2PT) reconnect, than back to 1. (direct)

maximum connections, full mesh vs partial mesh

what is the maximum connections we can have?

webrtc will not be able to handle too many connections at the same time since you have to connect to each peer separately, lots of usage of resource.

there is "partial mesh" where you forward data to your peers, so if you are indirectly connected with a common peer, then the data and messages still gets sent across the network.

like this https://github.com/lazorfuzz/liowebrtc or https://github.com/geut/discovery-swarm-webrtc

any thoughts on this or scalability? do we know around how many connections trystero can do, is there any maximum limit we know of with trystero?

[Question] `trackerRedundancy` maximum of 3

Hi, per the documentation for trackerRedundancy:

Integer specifying how many torrent trackers to connect to simultaneously in case some fail. Defaults to 2, maximum of 3.

However, I'm not seeing this maximum limit reflected in the code. Here's the only place in the code where trackerRedundancy seems to be read:

trystero/src/torrent.js

Lines 39 to 44 in 1602156

const trackerUrls = (config.trackerUrls || defaultTrackerUrls).slice(
0,
config.trackerUrls
? config.trackerUrls.length
: config.trackerRedundancy || defaultRedundancy
)

Is the maximum of 3 enforced in some less obvious way? If not, is there any reason one couldn't set trackerRedundancy to a higher number?

Custom IPFS Gateway

We are currently looking into using Trystero for our decentralised gaming client.

Is it possible to use our custom IPFS gateway instead of a public one to guarantee uptime?

Uncaught TypeError: crypto.subtle is undefined

Hi ,
before anything else let me tell you how awesome found this project!
For sure deserves more attention than currently has...

To the issue now
Steps followed :

  • Cloned repo
  • runned locally ( with serve npm module)

So no further peer connection utilized after that i suppose.

image

Vulnerability warnings about `ipfs-core` dependency

Hi ๐Ÿ‘‹ Thanks for creating this lib!

After installing it with NPM, I've got a lot of warnings due to vulnerabilities found on sub-dependencies of [email protected].

As I'm not using the ipfs strategy, I've set an override for it as a workaround and confirmed that using the latest version ([email protected]) resolves all the warnings.

"overrides": {
  "ipfs-core": "latest"
}

Could you update it in the lib dependencies, so we don't need the workaround anymore?

"ipfs-core": "0.9.0",

Webpack issue with simple-peer-light

Hi there, I have an on-going webpack issue with simple-peer-light. To fix this I've had to clone the repo and publish my own NPM package with the dependency swapped to just good ole' simple-peer.

The issue is as follow, with Trystero latest installed I get this issue:

/Users/nicholasrogers/Downloads/Coding/flourish_and_decay/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24) {
  page: '/'
}
 โจฏ /Users/nicholasrogers/Downloads/Coding/flourish_and_decay/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'

For additional context these are my dependencies:

{
  "name": "flourish-and-decay-next-v2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --check --ignore-path .gitignore .",
    "format:fix": "prettier --write --ignore-path .gitignore .",
    "typecheck": "tsc -b",
    "update:check": "npx taze"
  },
  "dependencies": {
    "@dnd-kit/sortable": "^8.0.0",
    "@funtech-inc/use-shader-fx": "^1.1.5",
    "@react-three/drei": "9.105.1",
    "@react-three/fiber": "8.16.1",
    "@react-three/postprocessing": "^2.15.12",
    "@types/three": "^0.160.0",
    "@vercel/analytics": "^1.1.1",
    "dat.gui": "^0.7.9",
    "eslint-config-prettier": "^9.0.0",
    "ethers": "^6.8.0",
    "fs-extra": "^11.2.0",
    "geist": "^1.1.0",
    "gsap": "^3.12.2",
    "lodash": "^4.17.21",
    "next": "13.5.6",
    "openai": "^4.28.4",
    "postprocessing": "^6.34.1",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "r3f-perf": "^7.1.2",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-icons": "^4.11.0",
    "react-slick": "^0.29.0",
    "react-swipeable": "^7.0.1",
    "react-transition-group": "^4.4.5",
    "tailwindcss-animated": "^1.0.1",
    "three": "^0.160.0",
    "trystero": "^0.18.0",
    "uuid": "^9.0.1",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@types/fs-extra": "^11.0.4",
    "@types/lodash": "^4.14.200",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-dom": "^18",
    "@types/react-slick": "^0.23.12",
    "@types/react-transition-group": "^4.4.8",
    "@types/uuid": "^9.0.6",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.6",
    "postcss": "^8",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

Demo is not working for me

For some reason, in the demo nothing happens for me : I simultaneously opened it on 2 computers (both Linux OS), on multiple different browsers (Firefox, Chromium, Brave) many tabs, turned off extensions and Firefox protections, and still nothing. In each tab my arrow is alone, next to the text "Try it, I dare you" :(
(I can move my arrow around, click and drop fruits, though)

I wonder what is wrong with my computers/browsers/etc. ?

Unable to import trystero

hi, Please help me with an issue.

The following error is raised when i try to import trystero

Framework: sveltekit + vite

(node:29562) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
6:24:07 pm [vite] Error when evaluating SSR module /src/routes/index.js: failed to import "trystero"
|- /home/kar/my/projects/mayasabha/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

6:24:07 pm [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/routes/index.js"
|- /home/kar/my/projects/mayasabha/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

/home/kar/my/projects/mayasabha/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
/home/kar/my/projects/mayasabha/node_modules/simple-peer-light/index.js:1171
export default Peer
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v18.18.0

[feature request] Demos for all connection strategies

Hey there! Thanks for sharing this awesome library. It's one of the coolest projects I've seen recently! I've only experimented with it so far but I'm evaluating it for use in a game I'm developing.

I'd prefer to use the BitTorrent strategy because my heart yearns for decentralization. ๐Ÿ˜‰ The official demo only uses the Firebase strategy, and it would be great if the alternative strategies could be toggled between to see how their behavior compares. So far I've just been hacking docs/site.js file to do this. Having this functionality on the demo site could also serve as a reference implementation for others who might want to use a decentralized strategy.

Thanks again for sharing the awesome work!

IPFS configuration/example?

What a beautiful piece of art and I am sad, that I did not discover it earlier ... All the examples/connections work like charm, but I could not create a working IPFS connection. Maybe this needs some additional configuration that I am not aware of? I would like to embed your work into our OER (Open Educational Resource) - Project, which is called LiaScript. It is an extension to markdown, that is directly interpreted within the browser. Here is a little demo of how we create classrooms, that sync the states (quizzes, survey, collaborative editors, chats...) between browsers ...

https://www.youtube.com/watch?v=Kjk6OblugXI

and I would like to have a running IPFS solution ๐Ÿ™ˆ

Thank you anyways for this great project ...

TypeScript Question: How to use room.makeAction when room is possible null?

Hi there I am using the custom useRoom hook from the readme example to create a room. I modified it slightly to work with Next.JS SSR.

'use client';

import { type BaseRoomConfig, joinRoom } from 'trystero';
import { useCallback, useEffect, useRef } from 'react';
import { useAppDispatch } from '../redux/store';
import { updatePokerRoomId } from '../redux/feature/poker-room/pokerRoomSlice';

export const useMultiplayerRoom = (
  roomConfig: BaseRoomConfig,
  roomId: string
) => {
  const createRoom = useCallback(
    (roomConfig: BaseRoomConfig, roomId: string) => {
      if (typeof window !== 'undefined') {
        return joinRoom(roomConfig, roomId);
      }
    }, []
  );

  const roomRef = useRef(createRoom(roomConfig, roomId));

  useEffect(() => {
    if (typeof window !== 'undefined') {
      roomRef.current = createRoom(roomConfig, roomId);
      return () => {
        if (roomRef.current) {
          roomRef.current.leave();
        }
      };
    }
  }, [createRoom, roomConfig, roomId, setupMultiplayerRoomConnection]);

  return roomRef.current;
};

TypeScript gives me an error saying the room may be possibly null when I try to make an action using the room connection

 const [sendUser, getUser] = multiplayerPokerRoomConnection?.makeAction('user');

Error: Type '[ActionSender<unknown>, ActionReceiver<unknown>, ActionProgress] | undefined' is not an array type.

Any tips for solving this error? Does makeAction always need to be called as a hook or can I just check for the existence of a room in a function and register the event listener once in a function?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.