I learned the Express framework before, and I got a general idea about it. Based on node.js server, I built a simple one. I finished all kinds of middleware use and routing functions. Then I got to communicate with you, including monitoring the changes of files or data, and monitoring and processing of events. Then I used Socket.io. I just touched the name socket. The communication from server to client is right!!!

Socket.io

First of all, I am familiar with the socket content of this book, mainly including establishing connections, monitoring services, refreshing browser display data after listening for file changes, and so on.

According to convention, installation is the first step.
- Installation

`npm install socket.io --save`

• Quote

  var socketIO = require( 'socket.io' );

• Listen for server connections

  var io = socketIO.listen( server );

  Here the server instant http module creates server objects

  var server = http.createServer( ... );

Monitor file changes

File Processor

npm install fs --save

Quote

var fsHandler = require( 'fs' );

Listen for file changes: fsHandler.watchFile

// File containers monitored
var watchMap = {};


var setWatch = function ( file_type, url_path ) {

    debug( 'set watch on file : ' + url_path );

    if ( !watchMap[ url_path ] ) {

        debug( 'watching file : ' + url_path );

        fsHandler.watchFile(
            // The first parameter must be the relative path, so the first'/'character should be removed.
            url_path.slice( 1 ),

            function ( current, previous ) {
                // Curr: current latest file
                // Previo: File that was last modified

                // Time comparison of final modification
                if ( current.mtime !== previous.mtime ) {

                    // Publish file change events through socket to inform customers of the degree of change
                    /*
                        file_type: Target file type
                        url_path: Target file path
                    */
                    io.sockets.emit( file_type, url_path );
                }
            }
        );

        // tag the current file
        watchMap[ url_path ] = true;
    }
};

Above is a short file change monitoring program, and below to start the program, through routing, trigger monitoring

Custom routing to monitor file changes

app.use( function ( req, res, next ) {

    if ( req.url.indexOf( '/js/' ) >= 0 ) {
        // Listen for script files in js / directory, type:'script'
        setWatch( req.url, 'script' );
    } else if ( req.url.indexOf( '/css/' ) >= 0 ) {
        // Listen for style files in css / directory, type:'stylesheet'
        setWatch( req.url, 'stylesheet' );
    }

    next();
} );

File Change Monitor Complete Code

// socket.js

var 
    http        = require( 'http' ),
    express     = require( 'express' ),
    fsHandler   = require( 'fs' ),
    socketIO    = require( 'socket.io' ),
    serveStatic = require( 'serve-static' ),
    app         = express(),
    watchMap    = {},       // File containers monitored
    server, io,

    // function
    setWatch
    ;


// Document Change Monitoring Procedure
setWatch = function ( file_type, url_path ) {

    debug( 'set watch on file : ' + url_path );

    if ( !watchMap[ url_path ] ) {

        debug( 'watching file : ' + url_path );

        fsHandler.watchFile(
            // The first parameter must be the relative path, so the first'/'character should be removed.
            url_path.slice( 1 ),

            function ( current, previous ) {
                // Curr: current latest file
                // Previo: File that was last modified

                // Time comparison of final modification
                if ( current.mtime !== previous.mtime ) {

                    // Publish file change events through socket to inform customers of the degree of change
                    /*
                        file_type: Target file type
                        url_path: Target file path
                    */
                    io.sockets.emit( file_type, url_path );
                }
            }
        );

        // tag the current file
        watchMap[ url_path ] = true;
    }
};

// Custom Routing Monitor File Changes
app.use( function ( req, res, next ) {

    if ( req.url.indexOf( '/js/' ) >= 0 ) {
        // Listen for script files in js / directory, type:'script'
        setWatch( req.url, 'script' );
    } else if ( req.url.indexOf( '/css/' ) >= 0 ) {
        // Listen for style files in css / directory, type:'stylesheet'
        setWatch( req.url, 'stylesheet' );
    }

    next();
} );

app.use( serveStatic( __dirname + '/' ) );

app.use( '/', function ( req, res ) {
    res.redirect( '/socket.html' );
} );

server = http.createServer( app );

io = socketIO.listen( server );

server.listen( 3000, function () {
    debug( 'Http server listen on port 3000.' );
} );

Client Part Code, Register to Monitor Events to Server

// socket.html

// Introduce / socket.io/socket.io.js in the head
// At the beginning, I went to look for this document. It said that it could be used directly. I don't know why.
<script src="/socket.io/socket.io.js"></script>
<script id="script_a" src="/js/data.js"></script>
<body>

    // Start using data in / js/data.js
    $(function () {
        $( 'body' ).html( message );
    });

    io.connect('http://localhost:3000').on( 'script', function ( path ) {

        // First delete the original
        $( '#script_a' ).remove();

        $( 'head' ).append(
            '<script id="script_a" src="'
            + path
            + '"></scr' + 'ipt>'
        );

        // Update DOM with the latest data.js file content
        $( 'body' ).html( message );
    });

</body>

// data.js

var message = 'hello world !';

With the above code, a simple file change monitoring and refreshing program can be implemented.

Key points:

1. File processing middleware: fs;
2. File listener: fs.watchFile;
3. Start the listening program, set the file type and file path to be monitored;
4. The path of the monitored file needs to be a relative path; that is, / JS / data. JS - > JS / data. JS
5. The client connects to the server and binds the file change events sent from the server.

Server Sends Events

io.sockets.emit( file_type, url_path );

Client Binding Events

io.connect( host ).on( file_type, eventHandler );

The on-bound event, the first parameter, is the event type sent by emit, which is the first parameter, such as file_type above.

For example:

Send hello events

io.sockets.emit( 'hello', path );

Binding hello events

io.connect( host ).on( 'hello', handler );

summary

Here's a brief introduction to how to use socket.io to monitor file changes, send and monitor events. More detailed sections about socket.io will be recorded when learning alone.