7 ms·

Make any site multiplayer in a few lines. Serverless WebRTC matchmaking

223 points by haxiomic 1y ago

philipallstar 1y ago
I remember cloning the twilio code for video conferencing for webrtc and it working instantly. Very cool.
- dudefeliciano 1y ago
  On the other hand setting up the turn servers and so on for signaling before the webrtc connection is established can be a nightmare, if not using a third party service like twilio
  - philipallstar 1y ago
    Yes definitely. It's much simpler with a hosted service. Cloudflare offers one as well[0]. [0] https://developers.cloudflare.com/realtime/turn https://developers.cloudflare.com/realtime/turn
jsomedon 1y ago
This is so fun. You know what, you should change the picture of cursor from hand to something like, bee, or even fly, that should make it even more hilarious :-p
kamranjon 1y ago
Awesome way to demonstrate exactly what your library does - also the library itself is a great concept - was just looking for something just like this the other day.
evbogue 1y ago
I use Trystero as one of the transfer methods on wiredove. it's super cool. it doesn't always work because punching thru NAT is a pain, but when it does work it's awesome. Trystero is also cool if you want to hook up a webcam or a video meeting with the minimal amount of code.
jojohack 1y ago
Love it
Reubend 1y ago
WOW this is cool! I love this, but as a nitpick, how scalable is it to do each connection peer to peer? Doesn't that mean that I have to keep a stream connection open for everyone who I want to include in the room?
- kabes 1y ago
  It's not very scalable. Regular rules of webrtc apply, so once you go to a certain number of users, you would have to use an SFU approach.
- bhaney 1y ago
  > how scalable is it Considering the site just spams my error console with DOMException: Failed to construct 'RTCPeerConnection': Cannot create so many PeerConnections I'd say not very.
- michaelt 1y ago
  > how scalable is it to do each connection peer to peer? I can tell you roughly how it works for webrtc video calls. If you're in a 5-person peer-to-peer webrtc video call where you receive 4 streams of video, you also need to send 4 streams of video. This is scalable in a sense; the uplink and downlink requirements are equal. The problem comes if you're in a 100-person meeting, and the application logic has hidden 95 people's video to save on bandwidth. In that case, while you'd only receive 4 streams of video you'd have to send 99. In practice, webrtc video calling often uses an 'SFU' or 'Selective Forwarding Unit' where you send one video stream to the vendor's cloud server and they forward it to the other people in the meeting. This also benefits people on asymmetric connections, and mobile users where uploading costs battery life, and users behind highly restrictive firewalls where webrtc's NAT traversal fails to work.
  - Wowfunhappy 1y ago
    > This is scalable in a sense; the uplink and downlink requirements are equal. But don't most home connections have a slower uplink than downlink? Mine certainly does.
  - 1y ago
kabes 1y ago
This isn't serverless. It's just using someone else's servers for the SDP signaling. And in a production app you'd likely also need turn servers and maybe SFU servers. There are some true serverless approaches out there for the signaling, e.g. where both peers scan each other's QR code, but that obviously has very limited use.
- kaoD 1y ago
  I've always been obsessed with true P2P WebRTC with QR codes but, at least back in the day, Firefox fails the offer under a very short timeout (~5 secs IIRC) which made out of band signaling completely impossible.
  - aketsu 1y ago
    I have done this a couple of weeks ago on firefox and it worked fine even with a 1 minute delay. An even easier way to share the SDP offer, at laest when the clients are in physical proximity, is using a data over sound library like ggwave.
    - LtdJorge 1y ago
      We've circled back to dial-up modems :D
- haxiomic 1y ago
  You're not wrong! Serverless is a funny term. Cloud companies use serverless to mean you don't have to provision and manage the server yourself, but it is still very much serverful technically speaking. This is neat in that you don't even need to setup anything with a cloud provider yourself to enable p2p connections
  - _heimdall 1y ago
    I've always seen the distinction as "serverless" meaning there wasn't a set group of servers always on and instead they provision up and down on demand. Only avoiding provisioning and managing the server just means you are renting rather than self-hosting.
dsign 1y ago
Just a reminder that this kind of user-to-user interaction feature makes your website a "social network" according to UK regulation (and Mississippi's, and more jurisdictions coming soon), and therefore you must get copies of government ID of your users so that you can deny them access if they are underage, and rattle them to the police if you suspect they are committing thought crime by sending certain fruits. Obey the law.
- andai 1y ago
  I made a little multiplayer arcade game last year. I added a chat feature with TTS. About an hour after launch it was just the n word over and over again. (Also zalgo text, which somehow strained the browser more than a video game!) I removed the chat feature. At any rate, getting banned by OFCOM is starting to sound like a badge of honor these days.
- ronsor 1y ago
  Do those laws even apply to P2P apps without central servers?
  - shakna 1y ago
    Yes. Its defined without a technical requirement - just legal ones. Each host will carry a legal responsibility for both what they push, and what they pull.
  - drawfloat 1y ago
    They do, but unlike what the OP claims, you do not need to age verify your site just because you added a social element. If the purpose is not to distribute pornography/other age restricted materials and you are able to moderate the site (ie: are not facebook scale), this is not required. The law sucks but the misinformation around it is getting out of hand.
    - koolala 1y ago
      So if a site is completely p2p, it's illegal because it is unmoderatable?
sotspecatcle 1y ago
Cool, not working in Safari for me though.
- quietfox 1y ago
  It worked for me in Safari for a while, but then the entire browser stopped working.
- pacha3000 1y ago
  it's laggy as hell on firefox. but works nice on chrome. won't use it
florians 1y ago
Sweet API design!
Razengan 1y ago
It'd be cool if you could easily publish multiplayers games to itch.io or similar websites from Godot or Unity and have automatic matchmaking: the first player to visit the game pages gets matched automatically with the next, and so on. Is there anything like that?
- tasuki 1y ago
  I've been looking for this too! I'd love to use an existing protocol to get (distributed?) user accounts and chat and stuff, and just build my game as a plugin for that. Or something.
- jckahn 1y ago
  I used Trystero in exactly this way for https://www.farmhand.life/ https://www.farmhand.life/!
- numpad0 1y ago
  You can't find the first one without the first one having static IP found from something in the page, which this thing solves using external services of developer choice, including commercial Supabase and Firebase systems. But the docs says it supports Bittorrent for that, so it's probably good.
jehnnysmith 1y ago
HN should add downvote option.
- deleted 1y ago
  [deleted]
kookamamie 1y ago
> Serverless uses someone else's network for signaling
wewewedxfgdf 1y ago
I wanted to throw objects at others and to make things explode. That's just what it brought up in me.
kzrdude 1y ago
I wonder if we can make a live heatmap of text selections on the page, smoothed and decaying with time.
allknowingfrog 1y ago
I've been exploring PeerJS (https://peerjs.com/ https://peerjs.com/) recently. This seems like a similar concept. Would it give me anything that PeerJS doesn't?
- dmotz 1y ago
  I'm the Trystero author and I'd say both libs attempt to accomplish the same goal but with very different APIs. One key difference is PeerJS uses a single centralized server by default for matchmaking, whereas Trystero offers lots of flexibility and redundancy, using various signaling connections in parallel.
peterleiser 1y ago
The site says "Right now youʼre the only person with the page open, but you can cheat and just open this URL in another tab to see what itʼs like with others." I'm using Firefox and Chrome on Ubuntu. When I try a second tab or one in Firefox and one in Chrome my computer's network connection locks up (pings stop). I have to close the tabs and then pings to google.com come back at 30 seconds and slowly come back to normal. It appears that http://playground.nostrcheck.me/relay http://playground.nostrcheck.me/relay is the problem.
jjangkke 1y ago
Few things 1) Serverless isn't really serverless and we are sick of this AWS speak. The trend lasted briefly but it isn't appealing when you are metered for every little thing and unable to SSH into a host and resolve issues 2) You can already do matchmaking easily with FOSS self-hosted solutions. These don't cost a lot of computing or bandwidth but some developers think its a chaotic and resource heavy problem.
dmotz 1y ago
https://github.com/dmotz/trystero https://github.com/dmotz/trystero Direct link to the underlying source code.
zknowledge 1y ago
to the person who's cursor I chased around for more than a couple of minutes, I don't know why I did that and I apologize.
Paedor 1y ago
Hey cool! I once hacked together a serverless game like this using firebase as an intermediary. https://github.com/amdson/rtcpvp https://github.com/amdson/rtcpvp / https://amdson.github.io/rtcpvp https://amdson.github.io/rtcpvp. I remember wishing this existed, setting up ICE p2p was truly not enjoyable.
maxlin 1y ago
This is mad, I love it. Way more "serverless" than what the term is commonly used for!
araes 1y ago
Small nitpick. Tried logging in simultaneously with a desktop and a phone to make it wasn't BSing, and it was actually sending moves/fruit correctly. Yes, appears to. However, found out phones don't update on touchmove. Only on final touch. Be nice if it used: const [sendMove, getMove] = room.makeAction('pointerMove') window.addEventListener('pointermove', e => sendMove([e.clientX, e.clientY])) It's part of the Pointer Events API and provides a unified event model for handling mouse, pen/stylus, and touchscreens. If necessary it can then use "PointerEvent.pointerType" to find the actual type. https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event https://developer.mozilla.org/en-US/docs/Web/API/Element/poi... Otherwise, neat capability, and there's at least several different concepts it seems like it would be enabling of. Mapping / GIS, you could see where other people are browsing on somewhere like Google Maps. Maybe leave little markers that fade with time. Temporary file sharing where you broadcast a list of available files after logging on and peers can send requests. Dropbox-esque send yourself stuff with a home system that's always logged on. Computer-aided design (CAD/CAE/CAM) or stuff like blender/photoshop, work on models/images together. Obvious stuff like word/excel. Field Service Management, collaborative service calls. Admittedly, also enabling of botnets, darkweb, and other such ideas. However, such is the nature of a lot of these types of technologies.
- araes 1y ago
  Made a site to try out the framework. Mostly just testing that it works and actually produces something. Swapped over to having birds instead. Little bit confusing how to actually implement some of the functionality and how some of the functions work. Otherwise, relatively easy to set up and have working. https://araesmojo-eng.github.io/trystero_test/ https://araesmojo-eng.github.io/trystero_test/
efilife 1y ago
This is so fun! It feels kinda sad to disconnect from the site and lose my two cursor friends

223 points by haxiomic 1y ago

philipallstar 1y ago

I remember cloning the twilio code for video conferencing for webrtc and it working instantly. Very cool.

dudefeliciano 1y ago
On the other hand setting up the turn servers and so on for signaling before the webrtc connection is established can be a nightmare, if not using a third party service like twilio
- philipallstar 1y ago
  Yes definitely. It's much simpler with a hosted service. Cloudflare offers one as well[0]. [0] https://developers.cloudflare.com/realtime/turn https://developers.cloudflare.com/realtime/turn

jsomedon 1y ago

This is so fun. You know what, you should change the picture of cursor from hand to something like, bee, or even fly, that should make it even more hilarious :-p

kamranjon 1y ago

Awesome way to demonstrate exactly what your library does - also the library itself is a great concept - was just looking for something just like this the other day.

evbogue 1y ago

I use Trystero as one of the transfer methods on wiredove. it's super cool. it doesn't always work because punching thru NAT is a pain, but when it does work it's awesome. Trystero is also cool if you want to hook up a webcam or a video meeting with the minimal amount of code.

jojohack 1y ago

Love it

Reubend 1y ago

WOW this is cool! I love this, but as a nitpick, how scalable is it to do each connection peer to peer? Doesn't that mean that I have to keep a stream connection open for everyone who I want to include in the room?

kabes 1y ago
It's not very scalable. Regular rules of webrtc apply, so once you go to a certain number of users, you would have to use an SFU approach.
bhaney 1y ago
> how scalable is it Considering the site just spams my error console with DOMException: Failed to construct 'RTCPeerConnection': Cannot create so many PeerConnections I'd say not very.
michaelt 1y ago
> how scalable is it to do each connection peer to peer? I can tell you roughly how it works for webrtc video calls. If you're in a 5-person peer-to-peer webrtc video call where you receive 4 streams of video, you also need to send 4 streams of video. This is scalable in a sense; the uplink and downlink requirements are equal. The problem comes if you're in a 100-person meeting, and the application logic has hidden 95 people's video to save on bandwidth. In that case, while you'd only receive 4 streams of video you'd have to send 99. In practice, webrtc video calling often uses an 'SFU' or 'Selective Forwarding Unit' where you send one video stream to the vendor's cloud server and they forward it to the other people in the meeting. This also benefits people on asymmetric connections, and mobile users where uploading costs battery life, and users behind highly restrictive firewalls where webrtc's NAT traversal fails to work.
- Wowfunhappy 1y ago
  > This is scalable in a sense; the uplink and downlink requirements are equal. But don't most home connections have a slower uplink than downlink? Mine certainly does.
- 1y ago

kabes 1y ago

This isn't serverless. It's just using someone else's servers for the SDP signaling. And in a production app you'd likely also need turn servers and maybe SFU servers. There are some true serverless approaches out there for the signaling, e.g. where both peers scan each other's QR code, but that obviously has very limited use.

kaoD 1y ago
I've always been obsessed with true P2P WebRTC with QR codes but, at least back in the day, Firefox fails the offer under a very short timeout (~5 secs IIRC) which made out of band signaling completely impossible.
- aketsu 1y ago
  I have done this a couple of weeks ago on firefox and it worked fine even with a 1 minute delay. An even easier way to share the SDP offer, at laest when the clients are in physical proximity, is using a data over sound library like ggwave.
  - LtdJorge 1y ago
    We've circled back to dial-up modems :D
haxiomic 1y ago
You're not wrong! Serverless is a funny term. Cloud companies use serverless to mean you don't have to provision and manage the server yourself, but it is still very much serverful technically speaking. This is neat in that you don't even need to setup anything with a cloud provider yourself to enable p2p connections
- _heimdall 1y ago
  I've always seen the distinction as "serverless" meaning there wasn't a set group of servers always on and instead they provision up and down on demand. Only avoiding provisioning and managing the server just means you are renting rather than self-hosting.

dsign 1y ago

Just a reminder that this kind of user-to-user interaction feature makes your website a "social network" according to UK regulation (and Mississippi's, and more jurisdictions coming soon), and therefore you must get copies of government ID of your users so that you can deny them access if they are underage, and rattle them to the police if you suspect they are committing thought crime by sending certain fruits. Obey the law.

andai 1y ago
I made a little multiplayer arcade game last year. I added a chat feature with TTS. About an hour after launch it was just the n word over and over again. (Also zalgo text, which somehow strained the browser more than a video game!) I removed the chat feature. At any rate, getting banned by OFCOM is starting to sound like a badge of honor these days.
ronsor 1y ago
Do those laws even apply to P2P apps without central servers?
- shakna 1y ago
  Yes. Its defined without a technical requirement - just legal ones. Each host will carry a legal responsibility for both what they push, and what they pull.
- drawfloat 1y ago
  They do, but unlike what the OP claims, you do not need to age verify your site just because you added a social element. If the purpose is not to distribute pornography/other age restricted materials and you are able to moderate the site (ie: are not facebook scale), this is not required. The law sucks but the misinformation around it is getting out of hand.
  - koolala 1y ago
    So if a site is completely p2p, it's illegal because it is unmoderatable?

sotspecatcle 1y ago

Cool, not working in Safari for me though.

quietfox 1y ago
It worked for me in Safari for a while, but then the entire browser stopped working.
pacha3000 1y ago
it's laggy as hell on firefox. but works nice on chrome. won't use it

florians 1y ago

Sweet API design!

Razengan 1y ago

It'd be cool if you could easily publish multiplayers games to itch.io or similar websites from Godot or Unity and have automatic matchmaking: the first player to visit the game pages gets matched automatically with the next, and so on. Is there anything like that?

tasuki 1y ago
I've been looking for this too! I'd love to use an existing protocol to get (distributed?) user accounts and chat and stuff, and just build my game as a plugin for that. Or something.
jckahn 1y ago
I used Trystero in exactly this way for https://www.farmhand.life/ https://www.farmhand.life/!
numpad0 1y ago
You can't find the first one without the first one having static IP found from something in the page, which this thing solves using external services of developer choice, including commercial Supabase and Firebase systems. But the docs says it supports Bittorrent for that, so it's probably good.

jehnnysmith 1y ago

HN should add downvote option.

deleted 1y ago
[deleted]

kookamamie 1y ago

> Serverless uses someone else's network for signaling

wewewedxfgdf 1y ago

I wanted to throw objects at others and to make things explode. That's just what it brought up in me.

kzrdude 1y ago

I wonder if we can make a live heatmap of text selections on the page, smoothed and decaying with time.

allknowingfrog 1y ago

I've been exploring PeerJS (https://peerjs.com/ https://peerjs.com/) recently. This seems like a similar concept. Would it give me anything that PeerJS doesn't?

dmotz 1y ago
I'm the Trystero author and I'd say both libs attempt to accomplish the same goal but with very different APIs. One key difference is PeerJS uses a single centralized server by default for matchmaking, whereas Trystero offers lots of flexibility and redundancy, using various signaling connections in parallel.

peterleiser 1y ago

The site says "Right now youʼre the only person with the page open, but you can cheat and just open this URL in another tab to see what itʼs like with others." I'm using Firefox and Chrome on Ubuntu. When I try a second tab or one in Firefox and one in Chrome my computer's network connection locks up (pings stop). I have to close the tabs and then pings to google.com come back at 30 seconds and slowly come back to normal. It appears that http://playground.nostrcheck.me/relay http://playground.nostrcheck.me/relay is the problem.

jjangkke 1y ago

Few things 1) Serverless isn't really serverless and we are sick of this AWS speak. The trend lasted briefly but it isn't appealing when you are metered for every little thing and unable to SSH into a host and resolve issues 2) You can already do matchmaking easily with FOSS self-hosted solutions. These don't cost a lot of computing or bandwidth but some developers think its a chaotic and resource heavy problem.

dmotz 1y ago

https://github.com/dmotz/trystero https://github.com/dmotz/trystero Direct link to the underlying source code.

zknowledge 1y ago

to the person who's cursor I chased around for more than a couple of minutes, I don't know why I did that and I apologize.

Paedor 1y ago

Hey cool! I once hacked together a serverless game like this using firebase as an intermediary. https://github.com/amdson/rtcpvp https://github.com/amdson/rtcpvp / https://amdson.github.io/rtcpvp https://amdson.github.io/rtcpvp. I remember wishing this existed, setting up ICE p2p was truly not enjoyable.

maxlin 1y ago

This is mad, I love it. Way more "serverless" than what the term is commonly used for!

araes 1y ago

Small nitpick. Tried logging in simultaneously with a desktop and a phone to make it wasn't BSing, and it was actually sending moves/fruit correctly. Yes, appears to. However, found out phones don't update on touchmove. Only on final touch. Be nice if it used: const [sendMove, getMove] = room.makeAction('pointerMove') window.addEventListener('pointermove', e => sendMove([e.clientX, e.clientY])) It's part of the Pointer Events API and provides a unified event model for handling mouse, pen/stylus, and touchscreens. If necessary it can then use "PointerEvent.pointerType" to find the actual type. https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event https://developer.mozilla.org/en-US/docs/Web/API/Element/poi... Otherwise, neat capability, and there's at least several different concepts it seems like it would be enabling of. Mapping / GIS, you could see where other people are browsing on somewhere like Google Maps. Maybe leave little markers that fade with time. Temporary file sharing where you broadcast a list of available files after logging on and peers can send requests. Dropbox-esque send yourself stuff with a home system that's always logged on. Computer-aided design (CAD/CAE/CAM) or stuff like blender/photoshop, work on models/images together. Obvious stuff like word/excel. Field Service Management, collaborative service calls. Admittedly, also enabling of botnets, darkweb, and other such ideas. However, such is the nature of a lot of these types of technologies.

araes 1y ago
Made a site to try out the framework. Mostly just testing that it works and actually produces something. Swapped over to having birds instead. Little bit confusing how to actually implement some of the functionality and how some of the functions work. Otherwise, relatively easy to set up and have working. https://araesmojo-eng.github.io/trystero_test/ https://araesmojo-eng.github.io/trystero_test/

efilife 1y ago

This is so fun! It feels kinda sad to disconnect from the site and lose my two cursor friends