使用Socket.io在HTML页面上进行实时数据库视图

时间:2018-06-08 11:15:02

标签: mysql websocket socket.io

我有一个覆盆子Pi,它不断通过PHP将数据推送到MySQL数据库。我正在尝试创建一个网站,我可以在其中看到此数据库的内容实时

我一直在关注本教程:http://markshust.com/2013/11/07/creating-nodejs-server-client-socket-io-mysql,其中显示了使用socket.io实现此目的的示例。这可以从2个客户端正常工作,当我在两个浏览器上添加更新的新笔记时。问题是当我从mysql CLI手动将记录添加到数据库时,它不会更新。我猜这是因为没有排放物发生。我该如何实现呢?

Server.js:

var mysql = require('mysql')
// Let’s make node/socketio listen on port 3000
var io = require('socket.io').listen(3000)
// Define our db creds
var db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'node'
})

// Log any errors connected to the db
db.connect(function(err){
    if (err) console.log(err)
})

// Define/initialize our global vars
var notes = []
var isInitNotes = false
var socketCount = 0

console.log("connected");

io.sockets.on('connection', function(socket){
    // Socket has connected, increase socket count
    socketCount++
    // Let all sockets know how many are connected
    io.sockets.emit('users connected', socketCount)

    socket.on('disconnect', function() {
        // Decrease the socket count on a disconnect, emit
        socketCount--
        io.sockets.emit('users connected', socketCount)
    })

    socket.on('new note', function(data){
        // New note added, push to all sockets and insert into db
        notes.push(data)
        io.sockets.emit('new note', data)
        // Use node's db injection format to filter incoming data
        db.query('INSERT INTO notes (note) VALUES (?)', data.note)
    })

    // Check to see if initial query/notes are set
    if (! isInitNotes) {
        // Initial app start, run db query
        db.query('SELECT * FROM notes')
            .on('result', function(data){
                // Push results onto the notes array
                notes.push(data)
            })
            .on('end', function(){
                // Only emit notes after query has been completed
                socket.emit('initial notes', notes)
            })

        isInitNotes = true
    } else {
        // Initial notes already exist, send out
        socket.emit('initial notes', notes)
    }
})

Index.html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
$(document).ready(function(){
    // Connect to our node/websockets server
    var socket = io.connect('http://localhost:3000');

    // Initial set of notes, loop through and add to list
    socket.on('initial notes', function(data){
        var html = ''
        for (var i = 0; i < data.length; i++){
            // We store html as a var then add to DOM after for efficiency
            html += '<li>' + data[i].note + '</li>'
        }
        $('#notes').html(html)
    })

    // New note emitted, add it to our list of current notes
    socket.on('new note', function(data){
        $('#notes').append('<li>' + data.note + '</li>')
    })

    // New socket connected, display new count on page
    socket.on('users connected', function(data){
        $('#usersConnected').html('Users connected: ' + data)
    })

    // Add a new (random) note, emit to server to let others know
    $('#newNote').click(function(){
        var newNote = 'This is a random ' + (Math.floor(Math.random() * 100) + 1)  + ' note'
        socket.emit('new note', {note: newNote})
    })
})
</script>
<ul id="notes"></ul>
<div id="usersConnected"></div>
<div id="newNote">Create a new note</div>

1 个答案:

答案 0 :(得分:0)

这类似于a previous question,似乎没有简单的方法可以用MySQL做到这一点。

如果你处于足够早的开发阶段,你并不依赖于MySQL,那么我会指出你可以用postgresql来解决这个问题:

  • 通过PDO库从PHP推送(参见docs)。
  • 在Raspberry Pi上运行。
  • 可以通过触发器上的pg_notify检测命令行中任何位置推送的更新(请参阅docs)。
  • 可以通过pg包订阅NodeJS更新。

在技术层面上,这将有效,但数据库通常作为消息传递系统效率不高(注意Database-as-IPC anti-pattern)。当客户发生事件时,PHP客户端也可以通过消息队列,UDP套接字或其他方式发出自己的通知。