在 Node-js 中处理 HTML 事件答案

【问题标题】：Handle HTML event in Node-js在 Node-js 中处理 HTML 事件
【发布时间】：2020-02-25 12:51:15
【问题描述】：

如何在 Node-js 中处理 HTML 中发生的事件？我希望只要在 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 中的某些代码是不必要的，我不知道。请提供适当的代码。

【问题讨论】：

被点击的输入元素是客户端事件。您的 node.js 文件 app.js 是服务器代码。为了出现在服务器中，您必须在客户端中侦听 click 事件，并在该事件处理程序中向服务器发送一些请求。在服务器中，您必须以某种方式对其做出反应（最简单的方法是使用 app.get() 为该事件注册一个 URL 并放置日志代码）

标签： javascript html node.js events dom-events

【解决方案1】：

这需要客户端到服务器通信，这可以使用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' 或 'mouse click' 或 'mouse'

配置完成后，

在前端（html）中，加载socket io客户端并初始化它，然后发出如下点击事件

<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' 事件。

希望这会有所帮助；）

访问https://socket.io了解更多信息

【讨论】：