Calvin (Deutschbein)
Week 12
Cloud
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This page is just a demo.</p>
</body>
</html>
|
styles.css
p
{
background: blue;
color: white;
}
|
They just have to be in the same directory.
$ ls -al *.html *.css
-rw-r--r-- 1 cd-desk 197121 161 Jun 20 11:05 index.html
-rw-r--r-- 1 cd-desk 197121 47 Jun 20 11:06 styles.css
All of HTML/CSS gives static styling.
|
HTML is a
|
CSS is a
|
I see JavaScript "embedded" much more than CSS
But there's a lot of .js libraries so we need to practice linking.
<script type="text/javascript" src="scripts.js">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<p>Oh I'll need a button won't I?</p>
</body>
</html>
|
styles.css
.dark {
/* I like cyan and black */
background-color: black;
color: #00ffff;
}
scripts.js function toggler() {
// using a const to linebreak
const bd = document.body;
bd.classList.toggle("dark");
}
|
They just have to be in the same directory.
$ ls -al *.html *.css *.js
-rw-r--r-- 1 cd-desk 197121 337 Jun 20 13:57 index.html
-rw-r--r-- 1 cd-desk 197121 97 Jun 20 13:56 scripts.js
-rw-r--r-- 1 cd-desk 197121 55 Jun 20 13:55 styles.css
Was: As time allows.
Or... the end of review...
Wordle...
As I see it...
To begin, let's make an HTML webpage. What will it contain?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Not Quite Wordle</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="start()">
<input id='inputElement' type="text" minlength="5" maxlength="5">
<button type="button" onclick="check()">Check</button>
<table id="gameboard"></table>
</body>
</html>
How do you feel about this indentation and these newlines?
<input id='inputElement' type="text" minlength="5" maxlength="5">
<button type="button" onclick="check()">Check</button>
<table id="gameboard"></table>
function check() {
alert("Ch-Check It Out") ;
}
The getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
<input id='inputElement' type="text" minlength="5" maxlength="5">
function check() {
alert(document.getElementById('inputElement')) ;
}
Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
<input id='inputElement' type="text" minlength="5" maxlength="5">
function check() {
alert(document.getElementById('inputElement').value) ;
}
The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
<table id="gameboard"></table>
function check() {
const inEle = document.getElementById('inputElement') ;
const gmBrd = document.getElementById('gameboard')
gmBrd.innerHTML = inEle.value ;
}
The toUpperCase() method of String values returns this string converted to uppercase.
function check() {
const inEle = document.getElementById('inputElement') ;
const gmBrd = document.getElementById('gameboard')
const inStr = inEle.value ; // lack () means 'property' (data)
const upStr = inStr.toUpperCase() ; // have () means 'method' (compute)
gmBrd.innerHTML = upStr ;
}
The console.log() static method outputs a message to the console.
function check() {
const inEle = document.getElementById('inputElement') ;
console.log(inEle) ;
const gmBrd = document.getElementById('gameboard')
console.log(gmBrd) ;
const inStr = inEle.value ; // lack () means 'property' (data)
console.log(inStr) ;
const upStr = inStr.toUpperCase() ; // have () means 'method' (compute)
console.log(upStr) ;
gmBrd.innerHTML = upStr ;
}
<input id="inputElement_pg21" type="text" minlength="5" maxlength="5"> 12.html:522:10
<table id="gameboard_pg21"> 12.html:524:10
asd 12.html:526:10
ASD 12.html:528:10
console.log(6 + 7) ;
13 debugger eval code:1:9
undefined
Wait why don't I just make a commandline .js utility instead of having to use the console?"
C:\Users\cd-desk>node
Welcome to Node.js v20.12.2.
Type ".help" for more information.
> console.log(6 + 7)
13
undefined
>
user@DESKTOP-THMS2PJ:~$ node
Command 'node' not found, but can be installed with:
sudo apt install nodejs
C:\Users\cd-desk>docker run -it node:alpine node
Unable to find image 'node:alpine' locally
alpine: Pulling from library/node
c6a83fedfae6: Already exists
8d90f41c769e: Already exists
c4f54159f74a: Already exists
6ecb2bd0d8e8: Already exists
Digest: sha256:39005f06b2fae765764d6fdf20ad1c4d0890f5ad3e1f39b56a18768334b8ecd6
Status: Downloaded newer image for node:alpine
Welcome to Node.js v22.5.1.
Type ".help" for more information.
> console.log(6 + 7)
13
undefined
>
Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP).
To include the HTTP module, use the require() method...
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080);
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
node server.js
Compose simplifies the control of your entire application stack, making it easy to manage services, networks, and volumes in a single, comprehensible YAML configuration file. Then, with a single command, you create and start all the services from your configuration file.
|
We need to...
|
We create a Dockerfile
|
|
My Dockerfile
|
'docker init' Dockerfile
|
PS C:\Users\cd-desk\Documents\dev\node> docker init
Welcome to the Docker Init CLI!
This utility will walk you through creating the following files with sensible defaults for your project:
- .dockerignore
- Dockerfile
- compose.yaml
- README.Docker.md
Let's get started!
? What application platform does your project use? Node
? What version of Node do you want to use? 20.12.2
? Which package manager do you want to use? npm
? What command do you want to use to start the app? node server.js
? What port does your server listen on? 8080
✔ Created → .dockerignore
✔ Created → Dockerfile
✔ Created → compose.yaml
✔ Created → README.Docker.md
→ Your Docker files are ready!
Review your Docker files and tailor them to your application.
Consult README.Docker.md for information about using the generated files.
What's next?
Start your application by running → docker compose up --build
Your application will be available at http://localhost:8080
PS C:\Users\cd-desk\Documents\dev\node> docker init
Welcome to the Docker Init CLI!
This utility will walk you through creating the following files with sensible defaults for your project:
- .dockerignore
- Dockerfile
- compose.yaml
- README.Docker.md
Let's get started!
? What application platform does your project use? Node
? What version of Node do you want to use? 20.12.2
? Which package manager do you want to use? npm
? What command do you want to use to start the app? node server.js
? What port does your server listen on? 8080
When making our own Dockerfile, we can leave out the things we don't care about (e.g. node version)
✔ Created → .dockerignore
✔ Created → Dockerfile
✔ Created → compose.yaml
✔ Created → README.Docker.md
→ Your Docker files are ready!
Review your Docker files and tailor them to your application.
Consult README.Docker.md for information about using the generated files.
What's next?
Start your application by running → docker compose up --build
Your application will be available at http://localhost:8080
### Building and running your application
When you're ready, start your application by running:
`docker compose up --build`.
Your application will be available at http://localhost:8080.
### Deploying your application to the cloud
First, build your image, e.g.: `docker build -t myapp .`.
If your cloud uses a different CPU architecture than your development
machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
you'll want to build the image for that platform, e.g.:
`docker build --platform=linux/amd64 -t myapp .`.
Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
docs for more detail on building and pushing.
PS C:\dev\word\server> ls
Directory: C:\dev\word\server
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 7/30/2024 11:41 AM 193 Dockerfile
-a---- 7/29/2024 3:08 PM 62555 server.js
PS C:\Users\cd-desk\Documents\dev\word\server> docker compose up --build
no configuration file provided: not found
services:
server:
build:
context: .
environment:
NODE_ENV: production
ports:
- 8080:8080
|
Dockerfile
|
compose.yaml
|
cd-desk@DESKTOP ~/dev/word/server$ ls
Dockerfile compose.yaml server.js
cd-desk@DESKTOP ~/dev/word/server$ docker compose up --build 2>/dev/null
[+] Building 0.5s (7/7) FINISHED docker:default
Snip[+] Running 1/0
✔ Container server-server-1 Created 0.0s
Attaching to server-1
const http = require('http');
function serverFunc(req, res) {
console.log(req) ; // This is new.
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
You will need to restart the server if you edit server.js for changes to be reflected.
<ref *2> IncomingMessage {
_events: {
close: undefined,
error: undefined,
data: undefined,
end: undefined,
readable: undefined
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 1315084
},
_maxListeners: undefined,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_closeAfterHandlingError: false,
_events: {
close: [Array],
error: [Function: socketOnError],
prefinish: undefined,
finish: undefined,
drain: [Function: bound socketOnDrain],
data: [Function: bound socketOnData],
end: [Array],
readable: undefined,
timeout: [Function: socketOnTimeout],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 193997060
},
_writableState: WritableState {
highWaterMark: 16384,
length: 0,
corked: 0,
onwrite: [Function: bound onwrite],
writelen: 0,
bufferedIndex: 0,
pendingcb: 0,
[Symbol(kState)]: 17564420,
[Symbol(kBufferedValue)]: null
},
allowHalfOpen: true,
_maxListeners: undefined,
_eventsCount: 8,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
parser: HTTPParser {
'0': null,
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
joinDuplicateHeaders: null,
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
_maxRequestsPerSocket: 0,
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: null,
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 16384,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
[Symbol(async_id_symbol)]: 5,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: true,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0
},
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: false,
rawHeaders: [
'Host',
'127.0.0.1:8080',
'User-Agent',
'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0',
'Accept',
'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8',
'Accept-Language',
'en-US,en;q=0.5',
'Accept-Encoding',
'gzip, deflate, br, zstd',
'DNT',
'1',
'Connection',
'keep-alive',
'Upgrade-Insecure-Requests',
'1',
'Sec-Fetch-Dest',
'document',
'Sec-Fetch-Mode',
'navigate',
'Sec-Fetch-Site',
'none',
'Sec-Fetch-User',
'?1',
'Priority',
'u=0, i'
],
rawTrailers: [],
joinDuplicateHeaders: null,
aborted: false,
upgrade: false,
url: '/',
method: 'GET',
statusCode: null,
statusMessage: null,
client: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_closeAfterHandlingError: false,
_events: {
close: [Array],
error: [Function: socketOnError],
prefinish: undefined,
finish: undefined,
drain: [Function: bound socketOnDrain],
data: [Function: bound socketOnData],
end: [Array],
readable: undefined,
timeout: [Function: socketOnTimeout],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 193997060
},
_writableState: WritableState {
highWaterMark: 16384,
length: 0,
corked: 0,
onwrite: [Function: bound onwrite],
writelen: 0,
bufferedIndex: 0,
pendingcb: 0,
[Symbol(kState)]: 17564420,
[Symbol(kBufferedValue)]: null
},
allowHalfOpen: true,
_maxListeners: undefined,
_eventsCount: 8,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
parser: HTTPParser {
'0': null,
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
joinDuplicateHeaders: null,
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
_maxRequestsPerSocket: 0,
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: null,
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 16384,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
[Symbol(async_id_symbol)]: 5,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: true,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0
},
_consuming: false,
_dumped: false,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: {
host: '127.0.0.1:8080',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8',
'accept-language': 'en-US,en;q=0.5',
'accept-encoding': 'gzip, deflate, br, zstd',
dnt: '1',
connection: 'keep-alive',
'upgrade-insecure-requests': '1',
'sec-fetch-dest': 'document',
'sec-fetch-mode': 'navigate',
'sec-fetch-site': 'none',
'sec-fetch-user': '?1',
priority: 'u=0, i'
},
[Symbol(kHeadersCount)]: 26,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0
}
<ref *2> IncomingMessage {
_events: {
close: undefined,
error: undefined,
data: undefined,
end: undefined,
readable: undefined
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 1315084
},
_maxListeners: undefined,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_closeAfterHandlingError: false,
_events: {
close: [Array],
error: [Function: socketOnError],
prefinish: undefined,
finish: undefined,
drain: [Function: bound socketOnDrain],
data: [Function: bound socketOnData],
end: [Array],
readable: undefined,
timeout: [Function: socketOnTimeout],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 193997060
},
_writableState: WritableState {
highWaterMark: 16384,
length: 0,
corked: 0,
onwrite: [Function: bound onwrite],
writelen: 0,
bufferedIndex: 0,
pendingcb: 0,
[Symbol(kState)]: 17563908,
[Symbol(kBufferedValue)]: null,
[Symbol(kWriteCbValue)]: [Function (anonymous)],
[Symbol(kAfterWriteTickInfoValue)]: null
},
allowHalfOpen: true,
_maxListeners: undefined,
_eventsCount: 8,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
parser: HTTPParser {
'0': null,
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
joinDuplicateHeaders: null,
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
_maxRequestsPerSocket: 0,
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: null,
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 16384,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
timeout: 0,
[Symbol(async_id_symbol)]: 5,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 2299,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 18,
[Symbol(triggerId)]: 14
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: true,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0
},
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: false,
rawHeaders: [
'Host',
'127.0.0.1:8080',
'User-Agent',
'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0',
'Accept',
'image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5',
'Accept-Language',
'en-US,en;q=0.5',
'Accept-Encoding',
'gzip, deflate, br, zstd',
'DNT',
'1',
'Connection',
'keep-alive',
'Referer',
'http://127.0.0.1:8080/',
'Sec-Fetch-Dest',
'image',
'Sec-Fetch-Mode',
'no-cors',
'Sec-Fetch-Site',
'same-origin',
'Priority',
'u=6'
],
rawTrailers: [],
joinDuplicateHeaders: null,
aborted: false,
upgrade: false,
url: '/favicon.ico',
method: 'GET',
statusCode: null,
statusMessage: null,
client: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_closeAfterHandlingError: false,
_events: {
close: [Array],
error: [Function: socketOnError],
prefinish: undefined,
finish: undefined,
drain: [Function: bound socketOnDrain],
data: [Function: bound socketOnData],
end: [Array],
readable: undefined,
timeout: [Function: socketOnTimeout],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_readableState: ReadableState {
highWaterMark: 16384,
buffer: [],
bufferIndex: 0,
length: 0,
pipes: [],
awaitDrainWriters: null,
[Symbol(kState)]: 193997060
},
_writableState: WritableState {
highWaterMark: 16384,
length: 0,
corked: 0,
onwrite: [Function: bound onwrite],
writelen: 0,
bufferedIndex: 0,
pendingcb: 0,
[Symbol(kState)]: 17563908,
[Symbol(kBufferedValue)]: null,
[Symbol(kWriteCbValue)]: [Function (anonymous)],
[Symbol(kAfterWriteTickInfoValue)]: null
},
allowHalfOpen: true,
_maxListeners: undefined,
_eventsCount: 8,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
requestTimeout: 300000,
headersTimeout: 60000,
keepAliveTimeout: 5000,
connectionsCheckingInterval: 30000,
requireHostHeader: true,
joinDuplicateHeaders: undefined,
rejectNonStandardBodyWrites: false,
_events: [Object: null prototype],
_eventsCount: 3,
_maxListeners: undefined,
_connections: 1,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
_listeningId: 1,
allowHalfOpen: true,
pauseOnConnect: false,
noDelay: true,
keepAlive: false,
keepAliveInitialDelay: 0,
highWaterMark: 16384,
httpAllowHalfOpen: false,
timeout: 0,
maxHeadersCount: null,
maxRequestsPerSocket: 0,
_connectionKey: '6::::8080',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 2,
[Symbol(kUniqueHeaders)]: null,
[Symbol(http.server.connections)]: ConnectionsList {},
[Symbol(http.server.connectionsCheckingInterval)]: Timeout {
_idleTimeout: 30000,
_idlePrev: [TimersList],
_idleNext: [TimersList],
_idleStart: 22,
_onTimeout: [Function: bound checkConnections],
_timerArgs: undefined,
_repeat: 30000,
_destroyed: false,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 4,
[Symbol(triggerId)]: 3
}
},
parser: HTTPParser {
'0': null,
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
joinDuplicateHeaders: null,
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
maxRequestsOnConnectionReached: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
strictContentLength: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
_maxRequestsPerSocket: 0,
[Symbol(shapeMode)]: false,
[Symbol(kCapture)]: false,
[Symbol(kBytesWritten)]: 0,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: null,
[Symbol(errored)]: null,
[Symbol(kHighWaterMark)]: 16384,
[Symbol(kRejectNonStandardBodyWrites)]: false,
[Symbol(kUniqueHeaders)]: null
},
timeout: 0,
[Symbol(async_id_symbol)]: 5,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 2299,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 18,
[Symbol(triggerId)]: 14
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kSetNoDelay)]: true,
[Symbol(kSetKeepAlive)]: false,
[Symbol(kSetKeepAliveInitialDelay)]: 0,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0
},
_consuming: false,
_dumped: false,
[Symbol(shapeMode)]: true,
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: {
host: '127.0.0.1:8080',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0',
accept: 'image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5',
'accept-language': 'en-US,en;q=0.5',
'accept-encoding': 'gzip, deflate, br, zstd',
dnt: '1',
connection: 'keep-alive',
referer: 'http://127.0.0.1:8080/',
'sec-fetch-dest': 'image',
'sec-fetch-mode': 'no-cors',
'sec-fetch-site': 'same-origin',
priority: 'u=6'
},
[Symbol(kHeadersCount)]: 24,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0
}
C:\Users\cd-desk> curl http://localhost:8080
StatusCode : 200
StatusDescription : OK
Content : {72, 101, 108, 108...}
RawContent : HTTP/1.1 200 OK
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Date: Tue, 30 Jul 2024 05:07:50 GMT
Hello World!
Headers : {[Connection, keep-alive], [Keep-Alive, timeout=5], [Transfer-Encoding, chunked], [Date, Tue, 30
Jul 2024 05:07:50 GMT]}
RawContentLength : 12
Files cannot be 'curl'ed - curl here finds a live, HTTP-compliant server.
Content : {72, 101, 108, 108...}
>>> vals = [72, 101, 108, 108]
>>> [chr(v) for v in vals]
['H', 'e', 'l', 'l']
>>>
Wordle...
As I see it...
Let's connect the backend (server) to the frontend (everything else).
The toUpperCase() method of String values returns this string converted to uppercase.
async function readFromRemote() {
const msg = await fetch("https://cat-fact.herokuapp.com/facts") ;
const jsn = await msg.json() ;
console.log(jsn) ;
}
async function readFromRemote() {
const msg = await fetch("https://cat-fact.herokuapp.com/facts") ;
const jsn = await msg.json() ;
console.log(jsn) ;
}
async function readFromRemote() {
async function readFromRemote() {
const msg = await fetch("https://cat-fact.herokuapp.com/facts") ;
const jsn = await msg.json() ;
console.log(jsn) ;
}
const msg = await fetch("https://cat-fact.herokuapp.com/facts") ;
Bonus: Why is 'msg' a 'const'?
async function readFromRemote() {
const msg = await fetch("https://cat-fact.herokuapp.com/facts") ;
const jsn = await msg.json() ;
console.log(jsn) ;
}
const jsn = await msg.json() ;
async function readFromRemote() {
const msg = await fetch("https://meowfacts.herokuapp.com/") ;
const jsn = await msg.json() ;
const fct = jsn['data'];
alert(fct) ;
}
async function readFromRemote() {
const msg = await fetch("https://localhost:8080") ;
}
const http = require('http');
function serverFunc(req, res) {
res.write('Hello World!') ;
res.end() ;
}
serverObj = http.createServer(serverFunc) ;
serverObj.listen(8080) ;
|
Naive
|
json-ly
|
const http = require('http');
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
serverObj = http.createServer(serverFunc)
serverObj.listen(8080);
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
const hdr = {'Content-Type': 'application/json'} ;
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
const str = {'data': 'Hello World!'} ;
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
const jsn = JSON.stringify(str) ;
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
res.writeHead(200, hdr);
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
res.end(jsn) ;
We are close... but we still have to address our security concern.
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
'Access-Control-Allow-Origin': '*'
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'} ;
const str = {'data': 'Hello World!'} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
async function readFromRemote() {
const msg = await fetch("https://localhost:8080") ; // was: meowfacts
const jsn = await msg.json() ;
const fct = jsn['data'];
alert(fct) ;
}
async function readFromRemote() {
const inEle = document.getElementById('inputElement') ;
const inStr = inEle.value ;
const msg = await fetch("https://localhost:8080") ; // was: meowfacts
const jsn = await msg.json() ;
const fct = jsn['data'];
alert(fct) ;
}
function serverFunc(req, res) {
console.log(req) ;
}
node server.js > out.txt
curl 127.0.0.1:8080/aegis
url: '/aegis'
function serverFunc(req, res) {
console.log(req['url']) ;
}
node server.js
curl 127.0.0.1:8080/aegis
PS C:\dev> node server.js
/aegis
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'} ;
const str = {'data': req['url'].toUpperCase()} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
async function readFromRemote() {
const inEle = document.getElementById('inputElement') ;
const inStr = inEle.value ;
const msg = await fetch("https://localhost:8080/" + inEle.value) ;
const jsn = await msg.json() ;
const fct = jsn['data'];
alert(fct) ;
}
PS C:\Users\cd-desk> curl 127.0.0.1:8080/aegis
StatusCode : 200
StatusDescription : OK
Content : {"data":"/AEGIS"}
RawContent : HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked
Content-Type: application/json
Date: Tue, 30 Jul 2024 21:48:27 GMT
{"dat...
function serverFunc(req, res) {
const hdr = {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'} ;
const str = {data: wordleHelper(req['url'])} ;
const jsn = JSON.stringify(str) ;
res.writeHead(200, hdr);
res.end(jsn) ;
}
const tword = 'blimp' // ChatGPT said this was the funniest possible word
function wordleHelper(iword) {
// What I did:
// return g for inplace, y for inword, r for nothing
// return all x's for non-word
return "rrgyr" ; // for e.g. 'trips'
}
async function readFromRemote() {
const inEle = document.getElementById('inputElement') ;
const inStr = inEle.value ;
const msg = await fetch("https://localhost:8080/" + inEle.value) ;
const jsn = await msg.json() ;
const gyr = jsn['data']; // would be e.g. "rrgyr" for 'trips'
updateBoard(inStr, gyr) ;
}
function updateBoard(word, gyr) {
const inEle = document.getElementById('gameboard') ;
// What next?
}
function updateBoard(word, gyr) {
const inEle = document.getElementById('gameboard') ;
// update innerHTML here.
}
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
| Data 1 | Data 2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
<table>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
| Calcutta | Orange |
| Robots | Jazz |
function check() {
const inEle1 = document.getElementById('inputElement1').value ;
const inEle2 = document.getElementById('inputElement2').value ;
let newInner = "" ;
for (let i = 0; i < 5; i++) {
newInner += '<td>' + inEle1[i] + '</td>'
}
document.getElementById('gameboard').innerHTML = newInner ;
}}
td {
border: 1px solid #121213 ;
width: 64px; height: 64px;
font-size: 200%; font-family: monospace; font-weight: bold;
text-align: center; color: white;
}
.g { /* _g_reen. */
background-color: #538D4E ;
}
.y { /* _y_ellow */
background-color: #B59F3B ;
}
.r { /* g_r_ay. I thought misses were in red not in gray - whoops. */
background-color: #3A3A3C ;
}
td {
border: 1px solid #121213 ;
width: 64px; height: 64px;
font-size: 200%; font-family: monospace; font-weight: bold;
text-align: center; color: white;
}
.g { /* _g_reen. */
background-color: #538D4E ;
}
.y { /* _y_ellow */
background-color: #B59F3B ;
}
.r { /* g_r_ay. I thought misses were in red not in gray - whoops. */
background-color: #3A3A3C ;
}
function check() {
const inEle1 = document.getElementById('inputElement1').value ;
const inEle2 = document.getElementById('inputElement2').value ;
let newInner = "" ;
for (let i = 0; i < 5; i++) {
newInner += '<td class=\'' + inEle2[i] + '\'>' + inEle1[i] + '</td>'
}
document.getElementById('gameboard').innerHTML = newInner ;
}}