CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-livereload

LiveReload server for monitoring files and automatically reloading web browsers

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

server-operations.mddocs/

Server Operations

Core LiveReload server operations including WebSocket management, browser communication, and lifecycle control.

Capabilities

Server Creation

Creates a new LiveReload server instance with configuration options.

/**
 * Creates a LiveReload server instance
 * @param config - Optional configuration object
 * @param callback - Optional callback executed when server starts listening
 * @returns Server instance extending EventEmitter
 */
function createServer(config = {}, callback) {
  // Internal implementation creates HTTP/HTTPS server and WebSocket server
  // Applies configuration defaults and validates options
  // Returns Server instance
}

Usage Examples:

const livereload = require('livereload');

// Basic server with defaults
const server = livereload.createServer();

// Server with custom port and debug
const server = livereload.createServer({
  port: 8080,
  debug: true
});

// Server with callback
const server = livereload.createServer({
  port: 35729
}, () => {
  console.log('LiveReload server is listening');
});

// HTTPS server
const fs = require('fs');
const server = livereload.createServer({
  https: {
    key: fs.readFileSync('server.key'),
    cert: fs.readFileSync('server.crt')
  }
});

// Server with CSS and image live reload
const server = livereload.createServer({
  applyCSSLive: true,   // Reload CSS without full page refresh (default: true) 
  applyImgLive: true    // Reload images without full page refresh (default: true)
});

Server Listening

Starts the WebSocket server and begins accepting browser connections.

/**
 * Start the WebSocket server and begin listening for connections
 * @param callback - Optional callback called when server starts listening
 */
listen(callback) {
  // Starts WebSocket server on configured port/host
  // Sets up connection, close, and error event handlers
  // Calls callback when ready to accept connections
}

Usage Examples:

const server = livereload.createServer({ noListen: true });

// Start listening manually
server.listen(() => {
  console.log('Server is now listening for connections');
});

// Start listening without callback
server.listen();

File Watching

Monitors file system paths for changes and triggers browser reloads.

/**
 * Start watching file system paths for changes
 * @param paths - File path(s) or glob patterns to watch
 */
watch(paths) {
  // Uses chokidar to monitor file system changes
  // Applies configured exclusions and extensions filtering
  // Triggers refresh() when relevant files change
}

Usage Examples:

// Watch single directory
server.watch(__dirname + '/public');

// Watch multiple directories
server.watch([
  __dirname + '/public',
  __dirname + '/assets'
]);

// Watch specific files with glob patterns
server.watch([
  './src/**/*.js',
  './styles/**/*.css'
]);

Browser Refresh

Sends reload commands to all connected browsers.

/**
 * Send reload command to all connected browsers
 * @param filepath - Path of the changed file
 */
refresh(filepath) {
  // Constructs reload message with file path and configuration
  // Sends WebSocket message to all connected clients
  // Applies CSS live reload settings if applicable
}

Usage Examples:

// Manually trigger a refresh
server.refresh('/path/to/changed/file.css');

// Refresh is typically called automatically by file watcher
// But can be triggered programmatically when needed

Browser Alerts

Sends alert messages to all connected browsers.

/**
 * Send alert message to all connected browsers
 * @param message - Alert message to display
 */
alert(message) {
  // Sends alert command via WebSocket to all connected clients
  // Message appears as browser alert dialog
}

Usage Examples:

// Send alert to browsers
server.alert('Build completed successfully!');
server.alert('Compilation error in main.js');

Server Shutdown

Closes file watchers and shuts down the WebSocket server.

/**
 * Stop file watching and close WebSocket server
 */
close() {
  // Closes chokidar file watcher if active
  // Shuts down WebSocket server and underlying HTTP server
  // Cleanup of all resources and connections
}

Usage Examples:

// Graceful shutdown
process.on('SIGINT', () => {
  console.log('Shutting down LiveReload server...');
  server.close();
  process.exit(0);
});

// Close server programmatically
server.close();

Event Handling

The Server extends EventEmitter and emits events for error handling.

/**
 * Server events
 */

// Error event - emitted when server encounters errors
server.on('error', (err) => {
  // Handle server errors (port in use, WebSocket errors, etc.)
});

Usage Examples:

const server = livereload.createServer();

// Handle server errors
server.on('error', (err) => {
  if (err.code === 'EADDRINUSE') {
    console.log('Port is already in use');
    process.exit(1);
  } else {
    console.error('LiveReload server error:', err);
  }
});

server.watch('./public');

WebSocket Protocol Details

Client Handshake

The server handles WebSocket protocol handshake automatically:

  • hello command: Client initiates handshake, server responds with protocol information
  • info command: Client sends capability information, server acknowledges

Server Messages

The server sends these message types to browsers:

  • reload: Instructs browser to reload page or specific resource
  • alert: Displays alert message in browser

Integration Patterns

Express/Connect Integration

const express = require('express');
const livereload = require('livereload');

const app = express();
const server = livereload.createServer();

app.use(express.static('public'));
app.listen(3000);

// Watch the public directory
server.watch(__dirname + '/public');

Build Tool Integration

const livereload = require('livereload');

// Create server with delay for build processes
const server = livereload.createServer({
  delay: 1000,  // Wait 1 second after file change
  debug: true
});

// Watch source and output directories
server.watch(['./src', './dist']);

// Manual refresh after build completion
function onBuildComplete() {
  server.refresh('./dist/bundle.js');
}

docs

cli.md

file-watching.md

index.md

server-operations.md

tile.json