如何使用 node.js、socket.io 和 mysql 显示实时数据？

Posted 2023-03-07

【中文标题】如何使用 node.js、socket.io 和 mysql 显示实时数据？

【英文标题】：how to show real-time data using node.js, socket.io and mysql?

【发布时间】：2018-12-06 05:50:06

【问题描述】：

我是 Node.js 的新手，正在尝试向网页显示实时数据。我尝试做的是首先通过 URL 插入 mysql 数据库。这是 URL [http://localhost:4000/api/motor_details?deviceId=145&a=sdfa3&b=us&c=uds]。下面的代码能够插入到数据库中。数据仅在刷新页面时可见，但我想在不刷新的情况下查看插入到我的网页的数据。 这是我的 index.js（主文件）

<pre>
var express = require('express');
    var socket = require('socket.io');
    var mysql = require('mysql');
    var http = require("http");
    var app = express();
    var server = app.listen(4000,function()
        console.log('Listening 4000');
    );
    var io = socket(server);
    app.use(express.static('public'));

    var connectSql = mysql.createConnection(
        host: "localhost",
        user: "root",
        password: "root",
        database: "grid_component",
        socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
    );
    connectSql.connect();
    app.get('/api/motor_details', function(req, res) 
        var device_id = req.param('deviceId');
        var a = req.param('a');
        var b = req.param('b');  
        var c = req.param('c');  
        var entries = 
            device_id: device_id,
            a: a,
            b: b,
            c: c,
            date: '2018-06-27'
        
        var query = connectSql.query('insert into entries set ?', entries,function (err, result) 
            if(err)
                console.error(err);
                return;
              
        )
    );
    io.on('connection',function(socket)
        connectSql.query('SELECT * FROM entries',function(err,rows)
            if(err) throw err;
            socket.emit('showrows', rows);
        );
    );
</pre>

<pre>
var socket = io.connect('http://localhost:4000');
 socket.emit('showrows');
 socket.on('showrows', function(rows) 
     var html='';
     for(var i=0; i<rows.length; i++)
         html += rows[i].device_id + ' ' + rows[i].a + '<br>';
       
     document.getElementById("display").innerHTML = html;
 ); 
</pre>

[![Error Screenshot][1]][1]

我什至尝试使用 req.params、req.body 或 req.query 更改 req.param，但显示未定义

【参考方案1】：

因为您使用参数查询字符串 [http://localhost:4000/api/motor_details?deviceId=145&a=sdfa3&b=us&c=uds] 而不是基于路由的参数 [http://localhost:4000/api/motor_details/145/sdfa3/us/uds]，所以您应该使用 req.query 而不是 req.params 或 req.route。

在 Express 4+ 中，您需要使用 req.query.name-of-parameter 而不是 req.query('deviceId') https://expressjs.com/en/api.html#req.query

将数据输入数据库后，您需要通过 socket.io 从节点服务器向客户端网页发出一个事件，告诉它检索数据。

var express = require('express');
var socket = require('socket.io');
var mysql = require('mysql');
var http = require("http");
var app = express();
var server = app.listen(4000,function()
    console.log('Listening 4000');
);
var io = socket(server);
app.use(express.static('public'));

var connectSql = mysql.createConnection(
    host: "localhost",
    user: "root",
    password: "root",
    database: "grid_component",
    socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
);
connectSql.connect();
app.get('/api/motor_details', function(req, res) 
    var device_id = req.query.deviceId;
    var a = req.query.a;
    var b = req.query.b;  
    var c = req.query.c;  
    var entries = 
        device_id: device_id,
        a: a,
        b: b,
        c: c,
        date: '2018-06-27'
    
    var query = connectSql.query('insert into entries set ?', entries,function (err, result) 
        if(err)
            console.error(err);
            return;
          
    )
    //emit using socket io, you can name it whatever you want
    socket.emit('sendingMessage');
);

//set up route to retrieve motor details
app.get('/api/get-motor-details', function(req, res) 

    var query = connectSql.query('SELECT * FROM entries',function(err,rows)
        if(err) throw err;
        res.end(JSON.stringify(rows);
    );
);

//all this is doing is telling the server to retrieve the data upon every socket connection, which is not the behavior you wanted
/*io.on('connection',function(socket)
    connectSql.query('SELECT * FROM entries',function(err,rows)
        if(err) throw err;
        socket.emit('showrows', rows);
    );
);*/


//-----------------CLIENT--------------------------
/*on your client webpage you will need to set up socket.io and a listener for 
the sendingMessage event*/
var socket = io('http://localhost:4000');
socket.on('sendingMessage', () => 
    //use whatever library you want for ajax calls, this is just an example
    fetch('http://localhost:4000/api/get-motor-details')
    .then((response) => 
        var html='';
        for(var i=0; i<response.length; i++)
            html += response[i].device_id + ' ' + response[i].a + '<br>';
          
        document.getElementById("display").innerHTML = html;
    );
);

【讨论】：

感谢您的回答。但如果我试图运行一个 URL。它给我一个错误。 [无法获取 /api/motor_details/145/sdfa3/us/uds]。

看，将数据插入数据库不是问题。我希望插入的数据在不刷新页面的情况下反映在网页上。

不要使用 /api/motor_details/145/sdfa3/us/uds 作为您的 URL。我只是举例说明基于路由的 URL 的样子。使用您从一开始就使用的 URL。我确实编辑了我的答案，所以请看一下。您需要在插入数据库后立即使用 socket.io 发送一个事件。然后，您需要客户端上的事件侦听器，当套接字消息在服务器上发送时，它将检索电机详细信息。您还需要一条用于检索详细信息的路线，我包括在内。

我已经试过了。它给我一个错误，即未定义 socket.emit。可能是什么原因？

据我所知，我需要使其全球化，但不知道如何