7 ms·

I think a lot of people don't realize it's possible to use UDP in browsers today with WebRTC DataChannel. I have a demo of multiplayer Quake III using peer-to-p

I think a lot of people don't realize it's possible to use UDP in browsers today with WebRTC DataChannel. I have a demo of multiplayer Quake III using peer-to-peer UDP here: https://thelongestyard.link/ https://thelongestyard.link/ Direct sockets will have their uses for compatibility with existing applications, but it's possible to do almost any kind of networking you want on the web if you control both sides of the connection.

winrid 2y ago
Runs smoother than the Android home screen. :)
mhitza 2y ago
Longest Yard is my favorite Q3 map, but for some reason I cannot use my mouse (?) in your version of the Quake 3 demo.
- modeless 2y ago
  Interesting, what browser and OS?
  - mhitza 2y ago
    Brave browser (Chromium via Flatpak) on the Steam Deck (Arch Linux) in Desktop mode with bluetooth connected mouse/keyboard.
    - topspin 2y ago
      Same browser on win10. Mouse works after you click in the window and it goes full screen. However, it hangs after a few seconds of game play. Stopped hanging... then input locks up somehow. Switched to chrome on win10, same issue: input locks up after a bit.
      - modeless 2y ago
        Yeah that issue I have seen, but unfortunately haven't been able to debug yet as it isn't very reproducible and usually stops happening under a debugger.
        topspin 2y ago
        Even with the problems, just the few seconds of playing before the crash+input hang got me hooked. So, off to GOG to get q3a for $15. Also, quake3e with all the quality, widescreen, aspect ratio and FPS tweaks... chatgpt 4o seems to know everything there is to know about quake3e, for some reason. Talk about getting nerd sniped.
    - modeless 2y ago
      Hmm, I bet the problem is my code expects touch events instead of mouse events when a touchscreen is present. Unfortunately I don't have a computer with both touchscreen and mouse here to test with so I didn't test that case. I did implement both gamepad and touch controls, so you could try them to see if they work.
  - mhitza 2y ago
    Works in Firefox, on the same system.
  - nmfisher 2y ago
    I can't use mouse either, macos/Chrome. Otherwise, cool!
nightowl_games 2y ago
Yeah we use WebRTC for our games built on a fork of Godot 3. https://gooberdash.winterpixel.io/ https://gooberdash.winterpixel.io/ tbh the WebRTC performance is basically the same network performance as websockets and was way more complicated to implement. Maybe the webrtc perf is better in other parts of the world or something...
- modeless 2y ago
  Yeah WebRTC is a bear to implement for sure. Very poorly designed API. It can definitely provide significant performance improvements over web sockets, but only when configured correctly (unordered/unreliable mode) and not in every case (peer-to-peer is an afterthought in the modern internet).
  - nightowl_games 2y ago
    We got it in unreliable/unordered and it still barely moves the needle on network perf over websockets from what we see in north america connecting to another server in north america
    - modeless 2y ago
      I wouldn't expect a big improvement in average performance but the long tail of high latency cases should be improved by avoiding head-of-line blocking. Also peer-to-peer should be an improvement over client-server-client in some situations. Not for battle royale though I guess. Edit: Very cool game! I love instant loading web games and yours seems very polished and fun to play. Has the web version been profitable, or is most of your revenue from the app stores? I wish I better understood the reasons web games (reportedly) struggle to monetize.
      - nightowl_games 2y ago
        Thanks! The web versions of both of our mobile/web games do about the same as the IAP versions. We dont have ads in the mobile versions, so the ad revenue is reasonble. We're actually leaning more into smaller web games as a result of that. Profit on this game specifically I think it deserves better. I think Goober Dash is a great game, but it's not crushing it like I'd hoped.
dboreham 2y ago
WebRTC depends on some message transport (using http) existing first between peers before the data channel can be established . That's far from equivalent capability to direct sockets.
- lifthrasiir 2y ago
  Not only that, but DTLS is mandated for any UDP connections.
  - modeless 2y ago
    Is that a problem? Again, I'm talking about the scenario where you control both sides of the connection, not where you're trying to use UDP to communicate with a third party service.
    - lifthrasiir 2y ago
      I think all three comments including mine are essentially saying the same but in different viewpoints.
- modeless 2y ago
  Yes, you do need a connection establishment server, but in most cases traffic can flow directly between peers after connection establishment. The reality of the modern internet is even with native sockets many if not most peers will not be able to establish a direct peer-to-peer connection without the involvement of a connection establishment server anyway due to firewalls, NAT, etc. So it's not as big of a downgrade as you might think.
  - huggingmouth 2y ago
    That changed (ahm.. will change) with ipv6. I was surprised to see that I can reach residential ipv6 lan hosts directly from the server. No firewalls, no nat. This remains true even with abusive isps that only give out /64 blocks. That said, I agree that peer to peer will never be seemless thanks mostly to said abusive isps.
ignoramous 2y ago
> Direct sockets will have their uses for compatibility with existing applications... In fact runtimes like Node, Deno, Cloudflare Workers, Fastly Compute, Bun et al run JS on servers, and will benefit from standardization of such features. [WICG] aims to provide a space for JavaScript runtimes to collaborate on API interoperability. We focus on documenting and improving interoperability of web platform APIs across runtimes (especially non-browser ones). https://wintercg.org/ https://wintercg.org/
- noduerme 2y ago
  Can you explain further... how does this improve upon websockets and socketIO for node?
  - arlort 2y ago
    Without a middleman you can only use web socket to connect to an http server. So, for instance if I want to connect to an mqtt server from a webpage I have to use a server that supports websocket endpoint. With direct sockets I could connect to any server using any protocol
- synctext 2y ago
  This slowly alters the essence of The Internet, due to the permissionless nature of running any self-organising system like Bittorrent and Bitcoin. This is NOT in Android, just isolated Web Apps at desktops at this stage[0]. The "direct socket access" creep moves forward again. First, IoT without any security standards. Now Web Apps. With direct socket access to TCP/UDP you can build anything! You loose the constraint of JS servers, costly WebRTC server hosting, and lack of listen sockets feature in WebRTC DataChannel. <self promotion>NAT puncturing is already solved in our lab, even for mobile 4G/5G. This might bring back the cyberpunk dreams of Peer2Peer... In our lab we bought 40+ SIM cards for the big EU 4G/5G networks and got the carrier-grade NAT puncturing working[1]. Demo blends 4G/5G puncturing, TikTok-style streaming, and Bittorrent content backend. Reading the docs, these "isolated" Web Apps can even do SMTP STARTTLS, IMAP STARTTLS and POP STLS. wow! [0] https://github.com/WICG/direct-sockets/blob/main/docs/explainer.md#security-considerations https://github.com/WICG/direct-sockets/blob/main/docs/explai... [1] https://repository.tudelft.nl/record/uuid:cf27f6d4-ca0b-4e20-be0e-638a7bcdcd9a https://repository.tudelft.nl/record/uuid:cf27f6d4-ca0b-4e20...
bpfrh 2y ago
You can also use WebTransport with streams for tcp and datagramms for udp https://developer.mozilla.org/en-US/docs/Web/API/WebTransport https://developer.mozilla.org/en-US/docs/Web/API/WebTranspor...
- IshKebab 2y ago
  Not peer to peer though presumably?
  - modeless 2y ago
    Yes and not in Safari yet either. Someday I hope that all parts of WebRTC can be replaced with smaller and better APIs like this. But for now we're stuck with WebRTC.
  - jauntywundrkind 2y ago
    There was some traction & interest in https://github.com/w3c/p2p-webtransport https://github.com/w3c/p2p-webtransport but haven't seen any activity in a while now. I'm pretty cocksure certain a whole industry of p2p enthusiasts would spring up building cool new protocols and systems on the web in rapid time if this ever showed up.
    - arthurcolle 2y ago
      Perfect timing with realtime AGI happening. Need lots of focus on realtime streaming protocols
  - bedatadriven 2y ago
    This a very early draft I'm following: https://wicg.github.io/local-peer-to-peer/ https://wicg.github.io/local-peer-to-peer/
flohofwoe 2y ago
There's also this new WebTransport thingie based on HTTP/3: https://developer.mozilla.org/en-US/docs/Web/API/WebTransport https://developer.mozilla.org/en-US/docs/Web/API/WebTranspor... I haven't tinkered with it yet though.
- modeless 2y ago
  Yeah, not in Safari yet and no peer-to-peer support. Maybe someday though! It will be great if all of WebRTC's features can be replaced by better, smaller-scoped APIs like this.
yesthisiswes 2y ago
Awesome demo. I’ve really missed that map it’s been too long.
typedef_struct 2y ago
This looks to use Web Sockets, not WebRTC, right? I don't see any RTCPeerConnection, and the peerServer variable is unused. I ask because I've spent multiple days trying to get a viable non-local WebRTC connection going with no luck. view-source:https://thelongestyard.link/q3a-demo/?server=Seveja https://thelongestyard.link/q3a-demo/?server=Seveja
- modeless 2y ago
  Web sockets are only used for WebRTC connection establishment. The code that creates the RTCPeerConnection is part of the Emscripten-generated JavaScript bundle. I'm using a library called HumbleNet to emulate Berkeley sockets over WebRTC. The code is here: https://github.com/jdarpinian/ioq3 https://github.com/jdarpinian/ioq3 and here: https://github.com/jdarpinian/HumbleNet https://github.com/jdarpinian/HumbleNet. For example, here is the file where the RTCPeerConnection is created: https://github.com/jdarpinian/HumbleNet/blob/master/src/humblenet/src/libwebrtc_asmjs.cpp https://github.com/jdarpinian/HumbleNet/blob/master/src/humb... I feel your pain. WebRTC is extremely difficult to use.
- evbogue 2y ago
  Check out Trystero[1], it makes WebRTC super simple to develop with. [1] https://github.com/dmotz/trystero https://github.com/dmotz/trystero
justin66 2y ago
Not really peer to peer though, is it? The q3 server is just running in the browser session that shares a URL with everyone else?
- modeless 2y ago
  Yes, it is. The first peer to visit a multiplayer URL hosts the Quake 3 server in their browser. Subsequent visitors to the same multiplayer URL send UDP traffic directly to that peer. The packets travel directly between peers, not bouncing off any third server (after connection establishment). If your clients are on the same LAN, your UDP traffic will be entirely local, not going to the Internet at all (assuming your browser's WebRTC implementation provides the right ICE candidates). It won't work completely offline unfortunately, as the server is required for the connection establishment step in WebRTC. A peer-to-peer protocol for connection establishment on offline LANs would be awesome, but understandably low priority for browsers. The feature set of WebRTC is basically "whatever Google Meet needs" and then maybe a couple other things if you're lucky.
  - justin66 2y ago
    This is neat. A little perverse, but neat.
eternityforest 2y ago
Doesn't WebRTC still require an secure server somewhere? Direct sockets will be amazing for IoT, because it will let you talk directly to devices. With service workers you can make stuff that works 100% offline other than the initial setup. Assuming anyone uses it and we don't just all forget it exists, because FF and Safari probably won't support it.

winrid 2y ago

Runs smoother than the Android home screen. :)

mhitza 2y ago

Longest Yard is my favorite Q3 map, but for some reason I cannot use my mouse (?) in your version of the Quake 3 demo.

modeless 2y ago
Interesting, what browser and OS?
- mhitza 2y ago
  Brave browser (Chromium via Flatpak) on the Steam Deck (Arch Linux) in Desktop mode with bluetooth connected mouse/keyboard.
  - topspin 2y ago
    Same browser on win10. Mouse works after you click in the window and it goes full screen. However, it hangs after a few seconds of game play. Stopped hanging... then input locks up somehow. Switched to chrome on win10, same issue: input locks up after a bit.
    - modeless 2y ago
      Yeah that issue I have seen, but unfortunately haven't been able to debug yet as it isn't very reproducible and usually stops happening under a debugger.
      - topspin 2y ago
        Even with the problems, just the few seconds of playing before the crash+input hang got me hooked. So, off to GOG to get q3a for $15. Also, quake3e with all the quality, widescreen, aspect ratio and FPS tweaks... chatgpt 4o seems to know everything there is to know about quake3e, for some reason. Talk about getting nerd sniped.
  - modeless 2y ago
    Hmm, I bet the problem is my code expects touch events instead of mouse events when a touchscreen is present. Unfortunately I don't have a computer with both touchscreen and mouse here to test with so I didn't test that case. I did implement both gamepad and touch controls, so you could try them to see if they work.
- mhitza 2y ago
  Works in Firefox, on the same system.
- nmfisher 2y ago
  I can't use mouse either, macos/Chrome. Otherwise, cool!

nightowl_games 2y ago

Yeah we use WebRTC for our games built on a fork of Godot 3. https://gooberdash.winterpixel.io/ https://gooberdash.winterpixel.io/ tbh the WebRTC performance is basically the same network performance as websockets and was way more complicated to implement. Maybe the webrtc perf is better in other parts of the world or something...

modeless 2y ago
Yeah WebRTC is a bear to implement for sure. Very poorly designed API. It can definitely provide significant performance improvements over web sockets, but only when configured correctly (unordered/unreliable mode) and not in every case (peer-to-peer is an afterthought in the modern internet).
- nightowl_games 2y ago
  We got it in unreliable/unordered and it still barely moves the needle on network perf over websockets from what we see in north america connecting to another server in north america
  - modeless 2y ago
    I wouldn't expect a big improvement in average performance but the long tail of high latency cases should be improved by avoiding head-of-line blocking. Also peer-to-peer should be an improvement over client-server-client in some situations. Not for battle royale though I guess. Edit: Very cool game! I love instant loading web games and yours seems very polished and fun to play. Has the web version been profitable, or is most of your revenue from the app stores? I wish I better understood the reasons web games (reportedly) struggle to monetize.
    - nightowl_games 2y ago
      Thanks! The web versions of both of our mobile/web games do about the same as the IAP versions. We dont have ads in the mobile versions, so the ad revenue is reasonble. We're actually leaning more into smaller web games as a result of that. Profit on this game specifically I think it deserves better. I think Goober Dash is a great game, but it's not crushing it like I'd hoped.

dboreham 2y ago

WebRTC depends on some message transport (using http) existing first between peers before the data channel can be established . That's far from equivalent capability to direct sockets.

lifthrasiir 2y ago
Not only that, but DTLS is mandated for any UDP connections.
- modeless 2y ago
  Is that a problem? Again, I'm talking about the scenario where you control both sides of the connection, not where you're trying to use UDP to communicate with a third party service.
  - lifthrasiir 2y ago
    I think all three comments including mine are essentially saying the same but in different viewpoints.
modeless 2y ago
Yes, you do need a connection establishment server, but in most cases traffic can flow directly between peers after connection establishment. The reality of the modern internet is even with native sockets many if not most peers will not be able to establish a direct peer-to-peer connection without the involvement of a connection establishment server anyway due to firewalls, NAT, etc. So it's not as big of a downgrade as you might think.
- huggingmouth 2y ago
  That changed (ahm.. will change) with ipv6. I was surprised to see that I can reach residential ipv6 lan hosts directly from the server. No firewalls, no nat. This remains true even with abusive isps that only give out /64 blocks. That said, I agree that peer to peer will never be seemless thanks mostly to said abusive isps.

ignoramous 2y ago

> Direct sockets will have their uses for compatibility with existing applications... In fact runtimes like Node, Deno, Cloudflare Workers, Fastly Compute, Bun et al run JS on servers, and will benefit from standardization of such features. [WICG] aims to provide a space for JavaScript runtimes to collaborate on API interoperability. We focus on documenting and improving interoperability of web platform APIs across runtimes (especially non-browser ones). https://wintercg.org/ https://wintercg.org/

noduerme 2y ago
Can you explain further... how does this improve upon websockets and socketIO for node?
- arlort 2y ago
  Without a middleman you can only use web socket to connect to an http server. So, for instance if I want to connect to an mqtt server from a webpage I have to use a server that supports websocket endpoint. With direct sockets I could connect to any server using any protocol
synctext 2y ago
This slowly alters the essence of The Internet, due to the permissionless nature of running any self-organising system like Bittorrent and Bitcoin. This is NOT in Android, just isolated Web Apps at desktops at this stage[0]. The "direct socket access" creep moves forward again. First, IoT without any security standards. Now Web Apps. With direct socket access to TCP/UDP you can build anything! You loose the constraint of JS servers, costly WebRTC server hosting, and lack of listen sockets feature in WebRTC DataChannel. <self promotion>NAT puncturing is already solved in our lab, even for mobile 4G/5G. This might bring back the cyberpunk dreams of Peer2Peer... In our lab we bought 40+ SIM cards for the big EU 4G/5G networks and got the carrier-grade NAT puncturing working[1]. Demo blends 4G/5G puncturing, TikTok-style streaming, and Bittorrent content backend. Reading the docs, these "isolated" Web Apps can even do SMTP STARTTLS, IMAP STARTTLS and POP STLS. wow! [0] https://github.com/WICG/direct-sockets/blob/main/docs/explainer.md#security-considerations https://github.com/WICG/direct-sockets/blob/main/docs/explai... [1] https://repository.tudelft.nl/record/uuid:cf27f6d4-ca0b-4e20-be0e-638a7bcdcd9a https://repository.tudelft.nl/record/uuid:cf27f6d4-ca0b-4e20...

bpfrh 2y ago

You can also use WebTransport with streams for tcp and datagramms for udp https://developer.mozilla.org/en-US/docs/Web/API/WebTransport https://developer.mozilla.org/en-US/docs/Web/API/WebTranspor...

IshKebab 2y ago
Not peer to peer though presumably?
- modeless 2y ago
  Yes and not in Safari yet either. Someday I hope that all parts of WebRTC can be replaced with smaller and better APIs like this. But for now we're stuck with WebRTC.
- jauntywundrkind 2y ago
  There was some traction & interest in https://github.com/w3c/p2p-webtransport https://github.com/w3c/p2p-webtransport but haven't seen any activity in a while now. I'm pretty cocksure certain a whole industry of p2p enthusiasts would spring up building cool new protocols and systems on the web in rapid time if this ever showed up.
  - arthurcolle 2y ago
    Perfect timing with realtime AGI happening. Need lots of focus on realtime streaming protocols
- bedatadriven 2y ago
  This a very early draft I'm following: https://wicg.github.io/local-peer-to-peer/ https://wicg.github.io/local-peer-to-peer/

flohofwoe 2y ago

There's also this new WebTransport thingie based on HTTP/3: https://developer.mozilla.org/en-US/docs/Web/API/WebTransport https://developer.mozilla.org/en-US/docs/Web/API/WebTranspor... I haven't tinkered with it yet though.

modeless 2y ago
Yeah, not in Safari yet and no peer-to-peer support. Maybe someday though! It will be great if all of WebRTC's features can be replaced by better, smaller-scoped APIs like this.

yesthisiswes 2y ago

Awesome demo. I’ve really missed that map it’s been too long.

typedef_struct 2y ago

This looks to use Web Sockets, not WebRTC, right? I don't see any RTCPeerConnection, and the peerServer variable is unused. I ask because I've spent multiple days trying to get a viable non-local WebRTC connection going with no luck. view-source:https://thelongestyard.link/q3a-demo/?server=Seveja https://thelongestyard.link/q3a-demo/?server=Seveja

modeless 2y ago
Web sockets are only used for WebRTC connection establishment. The code that creates the RTCPeerConnection is part of the Emscripten-generated JavaScript bundle. I'm using a library called HumbleNet to emulate Berkeley sockets over WebRTC. The code is here: https://github.com/jdarpinian/ioq3 https://github.com/jdarpinian/ioq3 and here: https://github.com/jdarpinian/HumbleNet https://github.com/jdarpinian/HumbleNet. For example, here is the file where the RTCPeerConnection is created: https://github.com/jdarpinian/HumbleNet/blob/master/src/humblenet/src/libwebrtc_asmjs.cpp https://github.com/jdarpinian/HumbleNet/blob/master/src/humb... I feel your pain. WebRTC is extremely difficult to use.
evbogue 2y ago
Check out Trystero[1], it makes WebRTC super simple to develop with. [1] https://github.com/dmotz/trystero https://github.com/dmotz/trystero

justin66 2y ago

Not really peer to peer though, is it? The q3 server is just running in the browser session that shares a URL with everyone else?

modeless 2y ago
Yes, it is. The first peer to visit a multiplayer URL hosts the Quake 3 server in their browser. Subsequent visitors to the same multiplayer URL send UDP traffic directly to that peer. The packets travel directly between peers, not bouncing off any third server (after connection establishment). If your clients are on the same LAN, your UDP traffic will be entirely local, not going to the Internet at all (assuming your browser's WebRTC implementation provides the right ICE candidates). It won't work completely offline unfortunately, as the server is required for the connection establishment step in WebRTC. A peer-to-peer protocol for connection establishment on offline LANs would be awesome, but understandably low priority for browsers. The feature set of WebRTC is basically "whatever Google Meet needs" and then maybe a couple other things if you're lucky.
- justin66 2y ago
  This is neat. A little perverse, but neat.

eternityforest 2y ago

Doesn't WebRTC still require an secure server somewhere? Direct sockets will be amazing for IoT, because it will let you talk directly to devices. With service workers you can make stuff that works 100% offline other than the initial setup. Assuming anyone uses it and we don't just all forget it exists, because FF and Safari probably won't support it.