*experimental
Published: June 1999
const https = require("https");
const fs = require("fs");
const options = {
key: fs.readFileSync("ssl/localhost.key"),
cert: fs.readFileSync("ssl/localhost.cert")
};
https
.createServer(options, (req, res) => {
if (req.url === "/") {
fs.createReadStream("./files/index.html").pipe(res);
} else if (req.url === "/style.css") {
fs.createReadStream("./files/style.css").pipe(res);
} else if (req.url === "/script.js") {
fs.createReadStream("./files/script.js").pipe(res);
} else if (req.url === "/globe.png") {
fs.createReadStream("./files/globe.png").pipe(res);
}
})
.listen(3000);
<html>
<head>
<link rel="stylesheet" type="text/css"
href="./style.css" />
</head>
<body>
<span id="hello">Hello World!</span>
<img src="./globe.png" />
<script type="text/javascript"
src="./script.js"></script>
</body>
</html>
#hello {
font-size: 100px;
}
setTimeout(() => {
const helloDiv =
document.getElementById("hello");
helloDiv.innerHTML =
"Hello SeattleJS!";
}, 1000);
Published: May 2015
const http2 = require("http2");
const fs = require("fs");
const options = {
key: fs.readFileSync("ssl/localhost.key"),
cert: fs.readFileSync("ssl/localhost.cert")
};
const server = http2.createSecureServer(options).listen(3000);
server.on("stream", (stream, headers) => {
if (headers[":path"] === "/") {
stream.respondWithFile("./files/index.html");
} else if (headers[":path"] === "/style.css") {
stream.respondWithFile("./files/style.css");
} else if (headers[":path"] === "/script.js") {
stream.respondWithFile("./files/script.js");
} else if (headers[":path"] === "/globe.png") {
stream.respondWithFile("./files/globe.png");
}
});
TCP connection
CSS packet
JS packet
draft-23 as of Oct 2019
When setting up multiple streams over QUIC connection, they are treated independently so that if any packet goes missing for one of the streams, only that stream has to pause and wait for the missing packet to get retransmitted.
CSS stream
JS stream
const quic = require("quic");
const fs = require("fs");
const options = {
key: fs.readFileSync("ssl/localhost.key"),
cert: fs.readFileSync("ssl/localhost.cert")
};
const socket = quic.createSocket({ port: 3000 });
socket.listen(options);
socket.on("session", session => {
session.on("stream", (stream, headers) => {
if (headers[":path"] === "/") {
stream.respondWithFile("./files/index.html");
} else if (headers[":path"] === "/style.css") {
stream.respondWithFile("./files/style.css");
} else if (headers[":path"] === "/script.js") {
stream.respondWithFile("./files/script.js");
} else if (headers[":path"] === "/globe.png") {
stream.respondWithFile("./files/globe.png");
}
});
});
git clone git@github.com:trivikr/quic.git
cd quic
./configure --experimental-quic --coverage
make -j4 coverage
In HTTP/1.1, multiple TCP+TLS connections were required for concurrent requests
HTTP/2 added multiplexing in which multiple HTTP requests were sent onto the same TCP connection
TCP head-of-line blocking: the entire TCP connection is brought to halt if a single TCP packet is lost.
HTTP/3 over QUIC treats each stream independently, so if any packet goes missing in a stream - only that stream is affected