Socket.io Connection, JS/ES5

Published February 17, 2019
Advertisement

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.

1 likes 1 comments

Comments

8Observer8

Next part: Emit and Broadcast JSON

 

February 17, 2019 04:12 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Advertisement