Update
You can now use client/server connections over UDP (SCTP) in your HTML5 Multiplayer Games using geckos.io.
Real-Time Multiplayer Games over UDP
Although this topic is not only related to Phaser 3, I decided to put it here, since I use it and like it.
I do not know if you have seen the phaser-3-real-time-multiplayer-game-with-physics example I built a while ago. There, I use socket-io to communicate between the client and the server.
This was the first Real-Time Mulitplayer game I built. At that time, I did not know potential issues related to HTML5 Real-Time games, until @pyxld_kris asked âHave you done anything special to account for tcp?â.
Today I know what he meant. TCP is just not meant to be used for Real-Time gaming because of how it works. You should use UDP instaed! But does this work in the browser? Yes and no. You could use something like https://peerjs.com/ which uses WebRTC to communicate from client to client over WebRTCâs DataChannel. But what if you want to use a authoritative server with RTCDataChannel communication? There is no way to do this. At least as far as I know based on what I read online.
So why am I telling you all of this? Because I made it WORK! At the moment Iâm programming a nice library to use it with any type of HTML5 game.
Please note that I am very new to this stuff. If anyone knows already a easy way to do it, please share. This will safe me a lot of work building a complex library. Also please share your thoughts on potential issues that might occur.
I have set up a chat app on http://18.184.1.123:8080/. Of cource UDP is not good for chat apps, but it shows that it works. If you are using chrome you can check the connection on chrome://webrtc-internals/
The goal is to build an simple API like socket-io has. This is how the source of the chat app looks right now. Itâs very clean and easy to use.
// client.ts
import LibNameClient from '../lib/client'
let url = location.origin
let libName = new LibNameClient(url)
libName.connectSync(() => {
console.log('connected')
let button = document.getElementById('button')
let text = document.getElementById('text') as HTMLInputElement
let list = document.getElementById('list')
if (button)
button.addEventListener('click', e => {
if (text) {
let content = text.value
if (content && content.trim().length > 0) {
// send a new message to the server
libName.emit('sendMessage', content.trim())
text.value = ''
}
}
})
// receives messages from other clients through the server
// and adds the message to the list
libName.on('sendMessage', data => {
if (list && typeof data === 'string') {
let li = document.createElement('li')
li.innerHTML = data
list.appendChild(li)
}
})
})
// server.ts
import LibNameServer from '../lib/server'
// starts the webrtc signaling server on port 8080
let libName = new LibNameServer(8080)
// receives a message from one client
libName.on('sendMessage', data => {
// send that message to all clients
libName.emit('sendMessage', data)
})
This project is in very early stage. But I just want to know your thoughts about it. I will of course publish the source code once I have implemented everything I want.
Also, this project does not have a name yet. If you could think of a suitable name, please share it.
