I will try to explain a process in step-by-step how to prepare server but it will be good if you will watch this video tutorial in parallel: Setup & Sending Files. Node.js Tutorial Guide
At first test let's create a very simple server script locally that will write in the console terminal "client connected" when client will be connected to the server.
You need to download and install Node.js: https://nodejs.org/en/download/
Create a folder for your project and go to the folder using CMD. Write this command in the console terminale to create package.json: npm init -y
Install "socket.io" and "express" to a local "node_modules" folder. Enter the command for this: npm install --save socket.io express
Now we are ready to write a simple server script and a client script. I use VSCode editor: https://code.visualstudio.com/
Open your prefered code editor. If you use VSCode you can run in the console terminal this command from your project folder: code . (you need note that it is "code" word and dot ".")
Create two folders in your project: "server" and "client". Create the "server.js" file in the "server" folder. Create the "client.js" file in the "client" folder. Create the "index.html" file in the "client" folder.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Multiplayer Snake</title> </head> <body> <h1>Hello, World</h1> </body> </html>
Create the file: "app.js" in the root of your project:
app.js
var express = require("express"); var app = express(); var server = require("http").Server(app); app.get("/", function(req, res) { res.sendFile(__dirname + "/client/index.html"); }); app.use("/client", express.static(__dirname + "/client")); var port = 8080; server.listen(port); console.log("Server started. Port = " + port);
You can run this script from the console terminal by the command: node app.js
You will see a message: "Server started. Port = 8080"
Write the address in the browser: localhost:8080
You will see "Hello, World" on the web page.
Let's find "cnd socket.io" url in the Internet. Add this code to the index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> <title>Multiplayer Snake</title> </head> <body> <h1>Hello, World</h1> <script> var socket = io(); </script> </body> </html>
Create a socket callback in app.js:
app.js
var express = require("express"); var app = express(); var server = require("http").Server(app); app.get("/", function(req, res) { res.sendFile(__dirname + "/client/index.html"); }); app.use("/client", express.static(__dirname + "/client")); var port = 8080; server.listen(port); console.log("Server started. Port = " + port); var io = require("socket.io")(server, {}); io.sockets.on("connection", function(socket) { console.log("socket connection"); });
Run the server: node app.js
Write the address in the browser: localhost:8080
You will see the message "socket connection" in the console.
Next part: Emit and Broadcast JSON