Skip to content

Commit 816334a

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 0d918c5 commit 816334a

File tree

1 file changed

+248
-0
lines changed

1 file changed

+248
-0
lines changed

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

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
2+
<!-- headers
3+
cross-origin-isolate
4+
-->
5+
6+
<html>
7+
8+
<head>
9+
<meta charset=utf-8>
10+
11+
<title>
12+
How to Set Up a nodejs http server
13+
</title>
14+
15+
<meta name=description content='Learn how to set up a basic HTTP server in Node.js with this hands-on tutorial featuring an interactive, editable code demo you can run in your browser.'>
16+
17+
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
18+
<meta name=viewport content='width=device-width, initial-scale=1'>
19+
20+
21+
<base href='https://ext-code.com/blog/25-07-24/http-server/'>
22+
<link rel=canonical href='https://ext-code.com/blog/25-07-24/http-server/http-server.html'>
23+
24+
25+
26+
<script type='application/ld+json'>
27+
28+
{
29+
"@context" : "https://schema.org",
30+
"@type" : "TechArticle",
31+
"headline" : "How to Set Up a nodejs http server",
32+
"description" : "Learn how to set up a basic HTTP server in Node.js with this hands-on tutorial featuring an interactive, editable code demo you can run in your browser.",
33+
"author" : {"@type":"Person","name":"Matthew Richards"},
34+
"datePublished" : "2025-07-24",
35+
"dateModified" : "2025-10-18",
36+
"mainEntityOfPage" : {"@type":"WebPage","@id":"https://ext-code.com/blog/25-07-23/http2-server/http2-server.html"},
37+
"publisher" : {"@type":"Organization","name":"Your Blog or Company Name","logo":{"@type":"ImageObject","url":"https://ext-code.com/favicon.ico"}},
38+
}
39+
40+
</script>
41+
42+
43+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
44+
45+
46+
<script src='https://libs.ext-code.com/js/dom/component/v2.0/component.js?hdr'></script>
47+
48+
<script>
49+
50+
var snippet;
51+
52+
53+
//:
54+
55+
56+
async function start(){
57+
//debug('init',version);
58+
snippet = mod.snippet;
59+
60+
snippet.initmod({on});
61+
62+
63+
await Promise.all([
64+
hdr.init(),
65+
snippet.init(),
66+
]);
67+
68+
69+
initdom(document.body);
70+
71+
72+
}//init
73+
74+
75+
</script>
76+
77+
78+
79+
80+
81+
<link rel=icon type='image/png' href='/blog/image/blog-30.png'>
82+
83+
<link rel=stylesheet href='/blog/css/blog.css'>
84+
85+
<style>
86+
87+
html
88+
{height:100%;font-family:arial}
89+
body
90+
{min-height:calc(100% - 40px);display:flex;flex-direction:column;gap:10px;margin:20px;align-items:center;
91+
padding-bottom:200px;box-sizing:border-box;
92+
}
93+
body>*
94+
{max-width:1400px;width:100%;padding:0 20px;}
95+
96+
97+
#snippet-root
98+
{border:1px solid lightblue;padding:10px}
99+
#snippet-root>div
100+
{margin:10px}
101+
102+
103+
#web-page
104+
{display:flex;flex-direction:column;gap:10px;margin-top:30px}
105+
106+
#web-page-hdr
107+
{display:flex;gap:5px}
108+
#web-page-url
109+
{flex:1}
110+
#web-page-go
111+
{border:1px solid lightgray;cursor:pointer;padding:4px;box-sizing:border-box;width:32px;height:32px}
112+
113+
iframe
114+
{height:500px;border:1px solid lightgray;box-sizing:border-box}
115+
116+
117+
input
118+
{font-size:16px;padding:5px 10px;box-sizing:border-box}
119+
input[type=button]
120+
{cursor:pointer}
121+
122+
</style>
123+
124+
</head>
125+
126+
127+
<body>
128+
129+
130+
<blog-hdr component=grp1 v2.0>
131+
<h1 class=title>
132+
How To Set Up A Basic HTTP Server In Node.js
133+
</h1>
134+
<time slot=date datetime="2025-10-15">
135+
18 Oct 2025
136+
</time>
137+
</blog-hdr>
138+
139+
140+
<p id=desc>
141+
Learn how to set up a basic HTTP server in Node.js with this hands-on tutorial featuring an interactive, editable code demo you can run in your browser.
142+
</p>
143+
144+
145+
<div id=snippet-root>
146+
147+
<div id=btns>
148+
<input value=download type=button>
149+
</div>
150+
151+
<snippet-terminal-console id=snippet type=nodejs src='ex/ex1.js' component></snippet-terminal-console>
152+
153+
</div>
154+
155+
<div id=web-page>
156+
<div id=web-page-hdr>
157+
<input id=web-page-url>
158+
<img id=web-page-go src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAARVBMVEVHcEwGBuEGBuEJCdQCAvQFBegDA/ACAvYEBOwBAfgEBeoDBO4BAfgBAvYHCNsNDMEEBeoCAvMCAvQFBuQDBe8AAP4AAfx2UBTrAAAAFXRSTlMANikQ0lym33zxaov36BoGTrnIQZUTyCZ3AAABHUlEQVQoz41T2Q7DIAwjlJty9Mr/f+oWoB2snbQ8ITmXY8PYvzGBNN4bCdMDyM1qEY/jQLsa/l1pdMFKIGozdODLhbWEBaiooiBGlEIA23wqtSeKJdpbmLAQPClsE5WT0imNZ+5K3V0tsL7ty71t+SIyFqk1YpCfTWWoDQiWVIyz7Jm4CmvOUpmMKg0863qBv3uXwVuHXjwDMLD0WPsrgVm0JYrvojwTrMYbp7g5JazNTBZ4f1aQP1d3g+6z+3jYnIZDI5rUceNNd/OtnywkZ9ejOSCq2HUfbp41sV6qRK7s/lEsmqoIVra93jm7vbkOxSmwuCyC82kr1HDToDOj3gan4mBUXOHb5x0cfHz8JUVG4eHHH9t377bp72/5Al4LH5UQD4MbAAAAAElFTkSuQmCC'>
159+
</div>
160+
<iframe></iframe>
161+
</div>
162+
163+
164+
</body>
165+
166+
<script>
167+
168+
var server = {};
169+
server.url = null;
170+
server.port = null;
171+
172+
var iframe;
173+
174+
175+
var btn = {};
176+
var on = {};
177+
178+
179+
//:
180+
181+
182+
function initdom(rootnode){
183+
184+
185+
$('[value=download]').onclick = btn.download;
186+
187+
188+
$('#web-page-go').onclick = btn.go;
189+
190+
iframe = $('iframe');
191+
192+
193+
snippet.initdom();
194+
195+
196+
}//initdom
197+
198+
199+
//:
200+
201+
202+
btn.download = function(){
203+
204+
var txt = snippet.editor.getvalue();
205+
var blob = new Blob([txt]);
206+
var url = window.URL.createObjectURL(blob);
207+
208+
var a = document.createElement('a');
209+
a.download = 'http-example-server.js';
210+
a.href = url;
211+
a.click();
212+
213+
}//download
214+
215+
216+
btn.go = function(){
217+
218+
var path = $('#web-page-url').value;
219+
iframe.src = `${server.url}${path}`;
220+
221+
}//go
222+
223+
224+
//:
225+
226+
227+
on['server-ready'] = function({url,port}){
228+
console.log('server-ready',url,port);
229+
server.url = url;
230+
server.port = port;
231+
232+
var path = '/hello';
233+
$('#web-page-url').value = path;
234+
235+
iframe.src = `${url}${path}`;
236+
237+
}//server-ready
238+
239+
240+
241+
242+
</script>
243+
</html>
244+
245+
246+
247+
248+

0 commit comments

Comments
 (0)