NodeJS socket.io 实时显示来自 MySQL 的数据

Question

I'm working on NodeJS and socket.io .

The current function is working good to display data from mysql database to table.
Now I need the page view auto update/refresh (realtime) if there is a new data received.

Here is the HTML

<div id="display"> </div>
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  socket.on('connect', function() {
    document.getElementById("socketio").innerHTML = "socket connected";
  });
  socket.on('showrows', function(rows) {
    var html='';
    for (var i=0; i<rows.length; i++) {
      html += rows[i].product_name + ' ' + rows[i].product_price + '<br>';
    }  
    document.getElementById("display").innerHTML = html;
    console.log(rows);
  });
</script>

and index.js

var mysql = require("mysql");
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('testsql.html');
  //res.sendfile('/login/');
});
http.listen(3000, function(){
  console.log('listening on *:3000');
});
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "crud_db"
});

io.on('connection', function (socket) {

    console.log('a client connected');

    con.query('SELECT * FROM product',function(err,rows){
      if(err) throw err;
      console.log('Data received from Db:\n');
      console.log(rows);
      socket.emit('showrows', rows);
    });
 });

My question, how to make a realtime function to web page if there is a new data received?

Answer 1

I never try it before, but I think you can do something like this

1.first listen an event when there is new submitted data

io.on('connection', function (socket) {
    socket.on('new data', function (data) {
       socket.emit('broadcast', data) // send it to the client
    })
})

2.store the io instance to app.locals:

app.locals.io = io

3.then, consider you have an endpoint to create a new data:

app.post('/product', function (req, res) {
    const sql = `INSERT INTO products (name, price) VALUES (${req.body.name}, 
    ${req.body.price})`
    
    con.query(sql, function (err, result) {
        if (err) throw err;
        const io = req.app.locals.io
        io.emit('new data', { data: result })
    })
})