`;
58 |
59 | const BACKOFF = 5000;
60 | let timeToMakeNextRequest = 0;
61 | let failedTries = 0;
62 | async function rafTimer(time) {
63 | if (timeToMakeNextRequest <= time) {
64 | await getNewMsgs();
65 | timeToMakeNextRequest = time + INTERVAL + failedTries * BACKOFF;
66 | }
67 | requestAnimationFrame(rafTimer);
68 | }
69 |
70 | requestAnimationFrame(rafTimer);
71 |
--------------------------------------------------------------------------------
/polling/backoff-and-retry/frontend/style.css:
--------------------------------------------------------------------------------
1 | .page-column {
2 | max-width: 600px;
3 | margin: 30px auto;
4 | }
5 |
6 | h1 {
7 | text-align: center;
8 | color: #26a69a;
9 | }
10 |
11 | .btn-box {
12 | text-align: center;
13 | }
14 |
--------------------------------------------------------------------------------
/polling/backoff-and-retry/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "polling",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "node backend/server.js",
8 | "dev": "nodemon backend/server.js"
9 | },
10 | "keywords": [],
11 | "type": "module",
12 | "author": "",
13 | "license": "ISC",
14 | "dependencies": {
15 | "body-parser": "^1.19.0",
16 | "express": "^4.17.1",
17 | "morgan": "^1.10.0",
18 | "nanobuffer": "^2.0.0"
19 | },
20 | "devDependencies": {
21 | "nodemon": "^2.0.12"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/polling/exercise/backend/server.js:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import bodyParser from "body-parser";
3 | import nanobuffer from "nanobuffer";
4 | import morgan from "morgan";
5 |
6 | // set up a limited array
7 | const msg = new nanobuffer(50);
8 | const getMsgs = () => Array.from(msg).reverse();
9 |
10 | // feel free to take out, this just seeds the server with at least one message
11 | msg.push({
12 | user: "brian",
13 | text: "hi",
14 | time: Date.now(),
15 | });
16 |
17 | // get express ready to run
18 | const app = express();
19 | app.use(morgan("dev"));
20 | app.use(bodyParser.json());
21 | app.use(express.static("frontend"));
22 |
23 | app.get("/poll", function (req, res) {
24 | // use getMsgs to get messages to send back
25 | // write code here
26 | });
27 |
28 | app.post("/poll", function (req, res) {
29 | // add a new message to the server
30 | // write code here
31 | });
32 |
33 | // start the server
34 | const port = process.env.PORT || 3000;
35 | app.listen(port);
36 | console.log(`listening on http://localhost:${port}`);
37 |
--------------------------------------------------------------------------------
/polling/exercise/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Polling Chat
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Chat With Me
15 |
16 |
17 |
18 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/polling/exercise/frontend/polling-chat.js:
--------------------------------------------------------------------------------
1 | const chat = document.getElementById("chat");
2 | const msgs = document.getElementById("msgs");
3 |
4 | // let's store all current messages here
5 | let allChat = [];
6 |
7 | // the interval to poll at in milliseconds
8 | const INTERVAL = 3000;
9 |
10 | // a submit listener on the form in the HTML
11 | chat.addEventListener("submit", function (e) {
12 | e.preventDefault();
13 | postNewMsg(chat.elements.user.value, chat.elements.text.value);
14 | chat.elements.text.value = "";
15 | });
16 |
17 | async function postNewMsg(user, text) {
18 | // post to /poll a new message
19 | // write code here
20 | }
21 |
22 | async function getNewMsgs() {
23 | // poll the server
24 | // write code here
25 | }
26 |
27 | function render() {
28 | // as long as allChat is holding all current messages, this will render them
29 | // into the ui. yes, it's inefficent. yes, it's fine for this example
30 | const html = allChat.map(({ user, text, time, id }) =>
31 | template(user, text, time, id)
32 | );
33 | msgs.innerHTML = html.join("\n");
34 | }
35 |
36 | // given a user and a msg, it returns an HTML string to render to the UI
37 | const template = (user, msg) =>
38 | `