WebSocket Sample

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.