Skip to content

Commit caca02b

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 0187ff8 commit caca02b

File tree

1 file changed

+142
-38
lines changed

1 file changed

+142
-38
lines changed

‎blog/25-07-24/http-server/http-server.html‎

Lines changed: 142 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,26 @@
4545
<script>
4646

4747

48-
var snippet;
48+
var simple = {};
49+
simple.server = {};
50+
simple.root;
51+
simple.iframe;
52+
simple.on = {};
53+
54+
var minimal = {};
55+
minimal.server = {};
56+
minimal.root;
57+
minimal.iframe;
58+
minimal.on = {};
4959

5060

5161
async function start(){
5262

53-
snippet = mod.snippet;
63+
simple.snippet = mod.simple;
64+
simple.snippet.initmod({on:simple.on});
5465

55-
snippet.initmod({on});
66+
minimal.snippet = mod.minimal;
67+
minimal.snippet.initmod({on:minimal.on});
5668

5769

5870
initdom(document.body);
@@ -68,12 +80,11 @@
6880

6981
<style>
7082

71-
#snippet-root
83+
.example-root
7284
{border:1px solid lightblue;padding:10px}
73-
#snippet-root>div
85+
.example-root>div
7486
{margin:10px}
7587

76-
7788
#web-page
7889
{display:flex;flex-direction:column;gap:10px;margin-top:30px}
7990

@@ -101,8 +112,8 @@
101112
<h1 class=title>
102113
How To Set Up A Basic HTTP Server In Node.js
103114
</h1>
104-
<time slot=date datetime=2025-10-15>
105-
18 Oct 2025
115+
<time slot=date datetime=2026-01-18>
116+
18 Jan 2026
106117
</time>
107118
</blog-hdr>
108119

@@ -113,7 +124,7 @@ <h1 class=title>
113124
</p>
114125

115126

116-
<div id=snippet-root>
127+
<div id=simple-root class=example-root>
117128

118129
<div class=blog-text>
119130

@@ -136,6 +147,13 @@ <h4 class=blog-hdr>
136147
<p>
137148
The mime function will need to built up if it were required.
138149
</p>
150+
<p>
151+
The server is typically accessed via
152+
<br>
153+
<a href='http://localhost:3001/hello' target='_blank'>
154+
http://localhost:3001/hello
155+
</a>
156+
</p>
139157

140158
<div id=btns>
141159
<input value=download type=button>
@@ -144,33 +162,83 @@ <h4 class=blog-hdr>
144162
</div>
145163

146164

165+
<snippet-terminal-console component id=simple type=nodejs src='ex/http-server-simple-example.js' web-console='h=100'></snippet-terminal-console>
166+
167+
168+
<div id=web-page>
169+
<div id=web-page-hdr>
170+
<img id=web-page-go src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAARVBMVEVHcEwGBuEGBuEJCdQCAvQFBegDA/ACAvYEBOwBAfgEBeoDBO4BAfgBAvYHCNsNDMEEBeoCAvMCAvQFBuQDBe8AAP4AAfx2UBTrAAAAFXRSTlMANikQ0lym33zxaov36BoGTrnIQZUTyCZ3AAABHUlEQVQoz41T2Q7DIAwjlJty9Mr/f+oWoB2snbQ8ITmXY8PYvzGBNN4bCdMDyM1qEY/jQLsa/l1pdMFKIGozdODLhbWEBaiooiBGlEIA23wqtSeKJdpbmLAQPClsE5WT0imNZ+5K3V0tsL7ty71t+SIyFqk1YpCfTWWoDQiWVIyz7Jm4CmvOUpmMKg0863qBv3uXwVuHXjwDMLD0WPsrgVm0JYrvojwTrMYbp7g5JazNTBZ4f1aQP1d3g+6z+3jYnIZDI5rUceNNd/OtnywkZ9ejOSCq2HUfbp41sV6qRK7s/lEsmqoIVra93jm7vbkOxSmwuCyC82kr1HDToDOj3gan4mBUXOHb5x0cfHz8JUVG4eHHH9t377bp72/5Al4LH5UQD4MbAAAAAElFTkSuQmCC'>
171+
<input id=web-page-url>
172+
</div>
173+
<iframe></iframe>
174+
</div>
147175

148-
<snippet-terminal-console component id=snippet type=nodejs src='ex/http-server-simple-example.js' web-console='h=100'></snippet-terminal-console>
149176

150177
</div>
151178

152-
<div id=web-page>
153-
<div id=web-page-hdr>
154-
<input id=web-page-url>
155-
<img id=web-page-go src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAARVBMVEVHcEwGBuEGBuEJCdQCAvQFBegDA/ACAvYEBOwBAfgEBeoDBO4BAfgBAvYHCNsNDMEEBeoCAvMCAvQFBuQDBe8AAP4AAfx2UBTrAAAAFXRSTlMANikQ0lym33zxaov36BoGTrnIQZUTyCZ3AAABHUlEQVQoz41T2Q7DIAwjlJty9Mr/f+oWoB2snbQ8ITmXY8PYvzGBNN4bCdMDyM1qEY/jQLsa/l1pdMFKIGozdODLhbWEBaiooiBGlEIA23wqtSeKJdpbmLAQPClsE5WT0imNZ+5K3V0tsL7ty71t+SIyFqk1YpCfTWWoDQiWVIyz7Jm4CmvOUpmMKg0863qBv3uXwVuHXjwDMLD0WPsrgVm0JYrvojwTrMYbp7g5JazNTBZ4f1aQP1d3g+6z+3jYnIZDI5rUceNNd/OtnywkZ9ejOSCq2HUfbp41sV6qRK7s/lEsmqoIVra93jm7vbkOxSmwuCyC82kr1HDToDOj3gan4mBUXOHb5x0cfHz8JUVG4eHHH9t377bp72/5Al4LH5UQD4MbAAAAAElFTkSuQmCC'>
179+
180+
181+
182+
<div id=minimal-root class=example-root>
183+
184+
<div class=blog-text>
185+
186+
<h4 class=blog-hdr>
187+
http-server-minimal.js
188+
</h4>
189+
190+
<p>
191+
This example demonstrates a minimal https server. It has built in https certificate.
192+
</p>
193+
<p>
194+
It serves files local to the base directory where the server was run and produces
195+
a 400 badrequest when the requested url maps to a directory outside the directory where the server is located
196+
such as '../test.txt'.
197+
</p>
198+
<p>
199+
It produces a 404 Not Found should the request url not exists.
200+
</p>
201+
<p>
202+
The mime function will need to built up if it were required.
203+
</p>
204+
<p>
205+
The server is typically accessed via
206+
<br>
207+
<a href='http://localhost:3002/hello' target='_blank'>
208+
http://localhost:3002/hello
209+
</a>
210+
</p>
211+
212+
<div id=btns>
213+
<input value=download type=button>
214+
</div>
215+
156216
</div>
157-
<iframe></iframe>
217+
218+
219+
<snippet-terminal-console component id=minimal type=nodejs src='ex/http-server-minimal.js' web-console='h=100'></snippet-terminal-console>
220+
221+
222+
<div id=web-page>
223+
<div id=web-page-hdr>
224+
<img id=web-page-go src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAARVBMVEVHcEwGBuEGBuEJCdQCAvQFBegDA/ACAvYEBOwBAfgEBeoDBO4BAfgBAvYHCNsNDMEEBeoCAvMCAvQFBuQDBe8AAP4AAfx2UBTrAAAAFXRSTlMANikQ0lym33zxaov36BoGTrnIQZUTyCZ3AAABHUlEQVQoz41T2Q7DIAwjlJty9Mr/f+oWoB2snbQ8ITmXY8PYvzGBNN4bCdMDyM1qEY/jQLsa/l1pdMFKIGozdODLhbWEBaiooiBGlEIA23wqtSeKJdpbmLAQPClsE5WT0imNZ+5K3V0tsL7ty71t+SIyFqk1YpCfTWWoDQiWVIyz7Jm4CmvOUpmMKg0863qBv3uXwVuHXjwDMLD0WPsrgVm0JYrvojwTrMYbp7g5JazNTBZ4f1aQP1d3g+6z+3jYnIZDI5rUceNNd/OtnywkZ9ejOSCq2HUfbp41sV6qRK7s/lEsmqoIVra93jm7vbkOxSmwuCyC82kr1HDToDOj3gan4mBUXOHb5x0cfHz8JUVG4eHHH9t377bp72/5Al4LH5UQD4MbAAAAAElFTkSuQmCC'>
225+
<input id=web-page-url>
226+
</div>
227+
<iframe></iframe>
228+
</div>
229+
230+
158231
</div>
159232

160233

234+
161235
</body>
162236

163237
<script>
164238

165-
var server = {};
166-
server.url = null;
167-
server.port = null;
168-
169-
var iframe;
170-
171-
239+
240+
172241
var btn = {};
173-
var on = {};
174242

175243

176244
//:
@@ -179,12 +247,16 @@ <h4 class=blog-hdr>
179247
function initdom(rootnode){
180248

181249

182-
$('[value=download]').onclick = btn.download;
183-
250+
simple.root = $('#simple-root');
251+
$(simple.root,'[value=download]').onclick = btn.download;
252+
$(simple.root,'#web-page-go').onclick = btn.go;
253+
simple.iframe = $(simple.root,'iframe');
184254

185-
$('#web-page-go').onclick = btn.go;
186255

187-
iframe = $('iframe');
256+
minimal.root = $('#minimal-root');
257+
$(minimal.root,'[value=download]').onclick = btn.download;
258+
$(minimal.root,'#web-page-go').onclick = btn.go;
259+
minimal.iframe = $(minimal.root,'iframe');
188260

189261

190262
}//initdom
@@ -193,9 +265,24 @@ <h4 class=blog-hdr>
193265
//:
194266

195267

196-
btn.download = function(){
268+
function find(name){
269+
270+
switch(name){
271+
272+
case 'simple' : return simple;
273+
274+
}//switch
275+
276+
}//find
277+
197278

198-
var txt = snippet.editor.getvalue();
279+
btn.download = function(e){
280+
281+
var root = e.target.closest('.example-root');
282+
var name = root.id.split('-').at(0);
283+
var ex = find(name);
284+
285+
var txt = ex.snippet.editor.getvalue();
199286
var blob = new Blob([txt]);
200287
var url = window.URL.createObjectURL(blob);
201288

@@ -207,26 +294,43 @@ <h4 class=blog-hdr>
207294
}//download
208295

209296

210-
btn.go = function(){
297+
btn.go = function(e){
211298

212-
var path = $('#web-page-url').value;
213-
iframe.src = `${server.url}${path}`;
299+
var root = e.target.closest('.example-root');
300+
var name = root.id.split('-').at(0);
301+
var ex = find(name);
302+
303+
var path = $(ex.root,'#web-page-url').value;
304+
ex.iframe.src = `${ex.server.url}${path}`;
214305

215306
}//go
216307

217308

218309
//:
219310

220311

221-
on['server-ready'] = function({url,port}){
312+
simple.on['server-ready'] = function({url,port}){
313+
console.log('server-ready',url,port);
314+
simple.server.url = url;
315+
simple.server.port = port;
316+
317+
var path = '/hello';
318+
$(simple.root,'#web-page-url').value = path;
319+
320+
simple.iframe.src = `${url}${path}`;
321+
322+
}//server-ready
323+
324+
325+
minimal.on['server-ready'] = function({url,port}){
222326
console.log('server-ready',url,port);
223-
server.url = url;
224-
server.port = port;
327+
minimal.server.url = url;
328+
minimal.server.port = port;
225329

226-
var path = '/hello';
227-
$('#web-page-url').value = path;
330+
var path = '/hello';
331+
$(minimal.root,'#web-page-url').value = path;
228332

229-
iframe.src = `${url}${path}`;
333+
minimal.iframe.src = `${url}${path}`;
230334

231335
}//server-ready
232336

0 commit comments

Comments
 (0)