Обрабатывать HTML событие в Node-js - PullRequest
Новая
       52

Обрабатывать HTML событие в Node-js

0 голосов
/ 25 февраля 2020

Как я могу обработать событие, которое произошло в HTML, в Node-js? Я хочу, чтобы каждый раз, когда ввод нажимался в HTML, узел работал: console.log("An element clicked").

HTML: 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="1" name="first" value="Tap here ..."/>
</body>
</html>

app. js: 

var express=require('express');
var app=express();
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended:false}));
    app.use(express.static('E:/Alireza/src/js'));
    app.listen(1408, err=>{console.log("Processing ...")});

Может быть, некоторые коды в app.js не нужны, я не знаю. Пожалуйста, предоставьте соответствующий код.

1 Ответ

1 голос
/ 26 февраля 2020

Для этого требуется клиент-сервер связь, что легко может быть выполнено с помощью Socket IO

Socket IO - это двунаправленная и основанная на событиях связь между браузером и сервером.

Вы можете установить его, используя npm, 

npm i --save socket.io

или просто использовать глобально, 

npm i socket.io

В конце (node js) мы инициализируем сокет, передавая объект сервера (http) затем прослушивает входящие сокеты 

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('click', (data) => {
    console.log("An element clicked")
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

, в вашем случае вы хотите информировать сервер каждый раз, когда нажимаете в html

см. строку, io.on ('click', (data) => {

'click' - это имя события щелчка, оно может быть любым, например 'onclick' или 'click мыши' или 'mouse'

С этим настроенным

в переднем конце (html) загрузите клиент сокета io и затем инициализируйте его выведите событие click, как показано ниже 

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  window.onload = () => {
    const socket = io();
    $('#btn').click(() => {
      e.preventDefault(); // prevents page reloading
      socket.emit('click', 'hello server!'));
      return false;
    });
  });
</script>

, как вы можете видеть, используя 

socket.emit(event, data);

, эта строка будет выдавать click ' событие w сервер слушает.

Надеюсь, это поможет;)

Посетите https://socket.io для получения дополнительной информации

...