WordPress plugin demonstrating WP REST API. Sets a random background color from values calculated in PHP. Load random words from a remote API. Update every 3 seconds.

ajax-enqueue-script-with-rest-api.php

<?php
/**
 * Plugin Name: AJAX Enqueue Script with REST API Example.
 * Description: Set a random background color from values calculated in PHP. Load random words from a remote API. Update every 3 seconds.
 */

/**
 * Data sent in JSON via wp_localize_script() for initialData and wp_ajax action for update_data.
 */
add_filter(
	'aese/data',
	function( $a ){
		return array_merge( $a, [
			'date'         => gmdate( 'Y-m-d' ),
			'microtime'    => microtime(),
			'update_url'   => get_rest_url( null, 'aese/v1/random' ),
			'bg_color'     => [
				'r' => rand( 0, 255 ),
				'g' => rand( 0, 255 ),
				'b' => rand( 0, 255 ),
				'a' => ( rand( 0, 100 ) / 100 ),
			],
			'random_words' => json_decode(
				wp_remote_retrieve_body(
					wp_remote_get( 'https://random-word-api.herokuapp.com/word?number=10' )
				)
			),
		] );
	}
);
/**
 * Enqueue a wp_ajax action as a JavaScript.
 */
add_action(
	// Enqueue on front-end and backend.
	// Else see template_redirect or admin_init.
	'init',
	function(){
		wp_enqueue_script(
			'ajax_enqueued_script',
			// This script address will load PHP and WordPress again.
			admin_url( 'admin-ajax.php?action=ajax_enqueued_script' ),
			// Script dependencies.
			// @see https://developer.wordpress.org/reference/functions/wp_register_script/#core-registered-scripts
			[ 'jquery' ],
			1,
			true
		);
		wp_localize_script(
			'ajax_enqueued_script',
			// If the above address has been changed to a static file,
			// this object will send initial PHP values to JavaScript in an "initialData" object.
			'initialData',
			apply_filters( 'aese/data', [] )
		);
	}
);
/**
 * Serve JSON from filter via REST endpoint.
 *
 * @see https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-custom-endpoints/
 */
add_action(
	'rest_api_init',
	function() {
		register_rest_route(
			'aese/v1',
			'/random/',
			[
				'methods'  => 'GET',
				'callback' => function() {
					return apply_filters( 'aese/data', [] );
				},
			]
		);
	}
);
/**
 * PHP-powered JavaScript.
 * Could also be moved to static file because of wp_localize_script().
 */
add_action(
	// Unauthenticated users.
	'wp_ajax_nopriv_ajax_enqueued_script',
	function() {
		do_action( 'wp_ajax_ajax_enqueued_script' );
	}
);
add_action(
	// Authenticated users.
	'wp_ajax_ajax_enqueued_script',
	function() {
		header( 'Content-Type: text/javascript' );
		?>
		jQuery( document ).ready( function( $ ) {
			<?php // This can be done because WordPress and PHP are loaded. ?>
			console.log( 'Inline PHP Date: <?php echo esc_js( gmdate( 'Y-m-d' ) ); ?>' );
			<?php // This, wp_localize_script() is a way to send PHP values to JavaScript that works for static scripts as well. ?>
			console.log( 'wp_localize_script() initialData', initialData );

			updateBackgroundColor(
				initialData.bg_color.r,
				initialData.bg_color.g,
				initialData.bg_color.b,
				initialData.bg_color.a
			);
			addWords( initialData.random_words );

			setInterval(
				function(){
					$.getJSON( initialData.update_url, function( newData ){
						updateBackgroundColor(
							newData.bg_color.r,
							newData.bg_color.g,
							newData.bg_color.b,
							newData.bg_color.a
						);
						addWords( newData.random_words );
					});
				},
				3000
			);

			function updateBackgroundColor( r, g, b, a ){
				$( 'body' ).css(
					'background-color',
					'rgba( ' + r + ', ' + g + ', ' + b + ', ' + a + ' )'
				);
			}

			function addWords( words ) {

				for ( let i = 0; i < words.length; i++ ) {
					setTimeout(
						function(){
							$( 'body' ).prepend( words[i] + ' ' );
						},
						i * ( 3000 / words.length )
					)
				}
			}
		} );
		<?php
		exit;
	}
);