Skip to content
Sign upLog in
← Back to Community

What's the best way to make online multiplayer in HTML/JS?

Profile icon
EpicRaisin

I want to make a game with HTML/JS that is multiplayer, but I have no clue how to start. At the simplest point, I want to be able to send the XY coordinates of each player to each computer, so that the characters can be drawn locally. I've seen people use node.js on repl.it to create really cool multiplayer games, but I have no knowledge of how they did it. Any advice or help on how to make a multiplayer game is highly appreciated.

Answered by BrutalBucket [earned 5 cycles]
View Answer
Voters
Profile icon
MartsPoreiters
Profile icon
BrutalBucket
Profile icon
EpicRaisin
Comments
hotnewtop
Profile icon
BrutalBucket

Using Nodejs or Python Flask you can host the same html code in it. socket.io is a module for nodejs and python flask that allows the code to become a server like this code
Server Code:

// Imports Everything var express = require("express"); var app = express(); var http = require("http").createServer(app); var io = require("socket.io")(http); // Gets HTML Code // app.get("/",(req,res) => { res.sendFile(__dirname+"/index.html"); // change the file to your file // }); // This is time for sockets // io.sockets.on("connection",socket => { // listen for x and y // socket.on("pos",data => { // Parse the json sent xy = JSON.parse(data); // DO what you want in JS like // io.emit("pose",JSON.stringify(xy)); }) }); // Listens on *:8080(Well Only If You Are Not Using Repl.it) // http.listen(8080,() => { console.log("Listening on *:8080") });

Client(HTML) Code:

<html> <head> <title>Multiplayer Game</title> </head> <body> <script src="/socket.io/socket.io.js"> var io = io(); io.on("connect",() => { sendX = prompt("Send X"); sendY = prompt("Send Y"); io.emit("pos",JSON.stringify({"x":sendX,"y":sendY})); }); send = prompt() io.on("pose",data => { alert(JSON.parse(data)); }); </script> </body> </html>

You can edit that code and it will work. Also import socket.io in the packages.

Profile icon
EpicRaisin

@BrutalBucket
Thanks for the answer! I'll try this code and see if it works for me.

Profile icon
[deleted]

Yes I agree

@DynamicSquid
try nodejs(with express or without)
\and socket.io

Profile icon
[deleted]

@idrgplayer
if this helps, please mark my answser correct!

Profile icon
EpicRaisin

@idrgplayer
Ok, so use node.js. Got it. But how do I actually make a server?

Profile icon
[deleted]

@EpicRaisin
here is a tutorial
https://www.skysilk.com/blog/2018/online-javascript-game-tutorial/
https://hackernoon.com/how-to-build-a-multiplayer-browser-game-4a793818c29b
https://medium.com/@MichalMecinski/architecture-of-a-node-js-multiplayer-game-a9365356cb9
https://www.w3schools.com/nodejs/
Hopefully these can help if yes please mark my answer correct.

Profile icon
xxpertHacker

Ignore what everyone is saying about sockets, ws, servers, and all of that.
I recommend looking into WebRTC.

Also, if you create a server, Python will inevitably be simpler than Node.js.

Profile icon
19wintersp

@xxpertHacker
Multiplayer games usually have a server, don't they? WebRTC is great for 2-person communication, but using WebRTC requires you to either get everyone to talk to everyone (network-intensive) or setup a server amongst the peers (complicated).

Profile icon
xxpertHacker

@19wintersp
I'm surprised that a single person on Repl has heard of the term. But yes, that is correct.

If you want multiple people playing together, you'll need a way to keep them in sync.
Generally, servers are used for that, although, I believe some companies use a mix of P2P and server side for performance and safety.

Peer-to-peer connections should be faster than sending something to a server, then the server sending it to the other peer, which is where P2P is helpful.

Someone ought to look into how a gaming company actually handles connections, like Epic Games or something.

Profile icon
19wintersp

@xxpertHacker
I agree that P2P provides faster connections in most cases, but it doesn't scale well if lots of people need to know lots of things very fast. (eg, constantly updating player positions) The advantage of a server is that it can perform processing on the raw client data before it gets to the others: for example, you could compute certain interactions on the server, and then distribute one larger update to the clients.

My main reason for advocating WebSockets is that it's just simpler to set up. WebRTC was designed for communicating streamed data - video and audio - between clients. If you're building a videochat application, great: WebRTC was designed for you. Games just don't work the same way.

Profile icon
xxpertHacker

@19wintersp
What about games that steam audio? Take, for example, speaking to your friends while playing a game?

(At that point, a few threads would be helpful)

I am not against WebSockets, but socket.io is something else.

Profile icon
19wintersp

@xxpertHacker
If you're streaming audio? Yes, WebRTC definitely, but with some kind of server to help with identification and stuff. Other than that, P2P connections suit audio very well. My own project uses WebSockets to communicate audio, and it is... suboptimal.

My opinion is similar: I'm not against WebRTC, it's just that for this specific situation of someone making a basic JS game using web technologies, WebSockets are probably easier.

I agree with you on socket.io.

Profile icon
Coder100

here's a good socket.io chat tutorial:
https://socket.io/get-started/chat/

Profile icon
Coder100

You can't

Profile icon
badst

Nodejs. socket.io or raw ws.

Profile icon
19wintersp

You'll need a server: node.js is probably the best option. Also, look up WebSockets.

Profile icon
19wintersp

@EpicRaisin
Here is an example: https://simplemultiplayer.19wintersp.repl.co/ code: repl.it/@19wintersp/simplemultiplayer

Profile icon
RYANTADIPARTHI

I think you can do it in js, but try HTML, and node.js, those work. You can multiplayer games with them.

Here's a link:

https://www.smashingmagazine.com/2019/10/multiplayer-text-adventure-engine-node-js-part-2/

Profile icon
DynamicSquid

You can post a question without attaching a repl

Also try looking into nodejs