Подзадача передачи команды с сайта на сервер и вывода переданной команды в консоль севера. Про сокет нам нужно знать только, что мы можем его создать и отправлять через него сообщения. Базовый GUI-элемент создан (кнопка), обработчик написан. Вместо вывода во консоль браузера нужно написать команду отправки сообщения через сокет. На стороне сервера нужно написать обработчик события “connection”. Это событие срабатывает один раз, когда клиент подсоединяется к серверу. В этот момент сервер создаёт сокет. Этот сокет можно настроить на приём различный сообщений. Названия сообщения пишем сами. Раз на сайте две кнопки, то сообщения пусть носят имена: “first_button” и “second_button”.
Решение данной подзадачи. Скриншот клиента, скриншот результата работы сервера и исходник сервера и клиента:
Клиент (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
<h1>Client</h1>
<button onclick="onFirstButton()">First Button</button>
<button onclick="onSecondButton()">Second Button</button>
<script>
var socket = io();
function onFirstButton() {
socket.emit("first_button", { message: "First Button" });
}
function onSecondButton() {
socket.emit("second_button", { message: "Second Button" });
}
</script>
</body>
</html>
Сервер (server.js):
var port = process.env.PORT || 3000;
var io = require("socket.io");
var app = require("express")();
var http = require("http").createServer(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/public/index.html');
});
io.on("connection", function (socket) {
console.log("Client connected");
socket.on("first_button", function (msg) {
console.log("From a client: ", msg);
});
socket.on("second_button", function (msg) {
console.log("From a client: ", msg);
});
});
http.listen(3000, function () {
console.log("Server started. Port = " + port);
});
