Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Socket.io Connection, JS/ES5

Запись от 8Observer8 размещена 15.02.2019 в 17:59
Обновил(-а) 8Observer8 17.02.2019 в 21:07

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
Youtube


You need to download and install Node.js: https://nodejs.org/en/download/

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.

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 .
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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
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 in the console:

Цитата:
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:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.
Размещено в Без категории
Просмотров 137 Комментарии 1
Всего комментариев 1
Комментарии
  1. Старый комментарий
    Запись от 8Observer8 размещена 17.02.2019 в 19:29 8Observer8 вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru