Read Time:3 Minute, 15 Second
The sample process
- Send event to Web Socket for getting order id
- Web Socket connects MySQL orders table and get next order id
- Send event back to client with message and next order id
Sample Environment
- Node.js
- Modules: mysql, socket.io
- PHP
- MySQL
Filename: serverfile.js
// Open port 3000 var io = require('socket.io').listen(3000); // Load mysql module var mysql = require('mysql'); // Make connection with credentials var db = mysql.createConnection({ host: '127.0.0.1', user: 'root', password: 'root', database: 'orders', port: 8889 }); // Connect to database. If cannot connect, then die. db.connect(function(err){ if (err){ console.log("* Database connection error, die now"); console.log(err); process.exit(1); } else { console.log("* Database connected"); } }); // Test query is working fine. db.query('SELECT 1', function(err, rows) { // connected! (unless `err` is set) if (err){ console.log("* Database select error, die now"); console.log(err); process.exit(1); } else { console.log("* Success to test query"); } }); // Define users variable var users = 0; io.on('connection', function (socket) { // Increase user cnt users++; // Send event to connected client socket.emit('message_reply', { msg: 'Total Users ' + users }); // Bind message event socket.on('message', function (data) { // Send message_reply event to connected client socket.emit('message_reply', { msg: "emit " + data.msg }); // Send message_reply event to all connected clients, but connected client socket.broadcast.emit('message_reply', { msg: "broadcast " + data.msg }); }); // Bind message_order event socket.on('message_order', function(data) { // Get oid parameter which is sent from client var oid = data.oid; // Construct SQL statement to retrieve another order information var sql = 'SELECT order_id FROM orders WHERE order_id > '+oid+' ORDER BY order_id ASC LIMIT 1'; // Query SQL statement db.query(sql, function(err, rows, fields) { // If error is not empty, then print error and standby if(err){ console.log("* Error on selecting order id"); return; } // Define next_row variable var next_row = null; if(rows.length > 0) { // Assign row information to next_row variable next_row = rows[0]; // Send message_order_reply event to connected client socket.emit('message_order_reply', { msg: "Next Order # " + next_row.order_id, oid: next_row.order_id }); } }); }); // Bind disconnect event socket.on('disconnect', function () { // Decrease user count users--; // Send message_reply event to all connected clients, but connected client socket.broadcast.emit('message_reply', { msg: 'Total Users ' + users }); }); });
Filename: client.html
<!DOCTYPE html> <html> <head> <script src='http://127.0.0.1:3000/socket.io/socket.io.js'></script> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> // Connect to websocket var socket = io('http://127.0.0.1:3000'); // Define connected variable var connected = false; // Bind connect event socket.on('connect', function () { // Prepend notification to list $(".notifications").prepend("connect event<br />"); // Set connected variable to true connected = true; }); // Bind disconnect event socket.on('disconnect', function () { // Prepend notification to list $(".notifications").prepend('disconnect event<br />'); // Set connected variable to false connected = false; }); // Define oid variable to 70 var oid = 70; // Bind message_order_reply event socket.on('message_order_reply', function (data) { // Prepend notification message to list $(".notifications").prepend(data.msg+"<br />"); // Set oid variable to next oid oid = data.oid }); // Bind message_reply event socket.on('message_reply', function (data) { // Prepend message to list $(".notifications").prepend(data.msg+"<br />"); }); // The function that send oid to websocket message_order event function get_order_notification(){ socket.emit('message_order', { oid: oid }); } </script> </head> <body> <h1>Notifications</h1> <hr /> <button onclick="get_order_notification();">Get Order Notification</button> <hr /> <div class="notifications"></div> </body> </html>
* Note that above code is just study purpose only.