Tutorial: The Real Time API

Tutorial Real Time
Serving Static Files

By now we have come to respect that RESTify is a comprehensive and powerful framework with numerous capabilities.  One such capability is the ability for the framework to serve static files.  Under the hood RESTify makes use of an underlying HTTP server as its transport and therefore the ability to serve static files is second nature.

To enable the serving of static files we make a declaration in server.js as follows.

  // Serve static files
  server.get(/.*/, restify.serveStatic({
    'directory': 'static',
    'default': 'index.html'
  }));

In lines 135 to 139 we append the ‘restify.serveStatic’ middleware to server object and set its parameters to serve files form the static/ directory with the usual index.html file as the default.

Located in the project files the directory structure of the ‘static’ directory looks as follows.

static/
├── index.html
├── js
│   ├── socket.io.js
│   └── wavesurfer.js
└── tmp

Lastly whilst I am by no means a front-end design person a rudimentary index.html page looks as follows.

	<body> 
		<div id="UploadBox">
			<h2>Media Analyzer</h2>
			<span id='UploadArea'>
				<label for="FileBox">Choose A File: </label><input type="file" id="FileBox"><br>
				<label for="NameBox">Name: </label><input type="text" id="NameBox"><br>
				<button	type='button' id='UploadButton' class='Button'>Upload</button>
			</span>
		</div>
	</body>

Media AnalyzerThe code above will render the interface on the left allowing the user to select an audio file from their system and upload it to the API.

As the file is quite extensive and includes CSS and other code it is recommended to check it out from the YourAPIExpert GitHub Repository.

Next Up:  Adding Real Time Interactivity

Pages: 1 2 3 4

Written by YourAPIExpert