Handle HTML event in Node-js

Question

How can I handle an event that occurred in HTML, in Node-js? I want whenever an input clicked in HTML, node operates: 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 ...")});

Maybe some codes in app.js is unnecessary, I don't know. Please provide an appropriate code.

The input element being clicked is a client-side event. You node.js file app.js is server code. In order to appear in the server, you'll have to listen to the click event in the client and in that event handler, send some request to the server. In the server you'll have to react to it somehow (the easiest is registering a URL for that event with app.get() and there put the log code) — Jaime Blázquez
– Jaime Blázquez, Commented Feb 25, 2020 at 13:29

Aidil · Accepted Answer · 2020-02-26 13:09:01Z

This requires client to server communication, which easily can be done using Socket IO

Socket IO is bidirectional and event-based communication between the browser and the server.

You can install it using npm,

npm i --save socket.io

or just have it globally,

npm i socket.io

In back end (node js), we initialize the socket by passing the server object (http) then listen for incoming sockets

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');
});

in your case, you want to inform the server each time you clicks in the html

see the line, io.on('click', (data) => {

the 'click' is the click event name, it can be anything, like 'onclick' or 'mouse click' or 'mouse'

With that configured,

in front end (the html), load the socket io client and initialize it then emit the click event like below

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

as you can see, im using

socket.emit(event, data);

this line will emit 'click' event which the server is listening to.

Hope this helps ;)

Visit https://socket.io for more information

Collectives™ on Stack Overflow

Handle HTML event in Node-js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related