I was working on long polling chat using node js. I might be wrong, but there was no issue in server side or client side code. I'll leave them at the end of question for those who are interested in reviewing it
Main problem is that node terminal is apparently "freezing". I load page dynamically sending a request to the server. Usually it takes half a second to load the page
Then I tried running it on another browser, sent several GET and POST requests and then tried to reload the page one more time. It stucked until I focused on the node terminal window
the same page loaded in 1.5 min
The questions are
- is it related to terminal window issues or node itself?
- if so, how I can prevent it?
Browser is chrome, node v16.13.1, os Windows 10
code files:
main.js:
const http = require("http")
const { connection, sendMessage } = require("./chatfunctions")
const { sendFile } = require("./sendFile")
const ip = "127.0.0.1"
const port = 1337
let server = http.createServer(function(req, res) {
res.setHeader("Access-Control-Allow-Origin", "*")
console.log("request to", req.url)
switch (req.url) {
case "/chat":
res.setHeader("Content-type", "text/html")
sendFile("./chat/index.html", res)
break;
case "/connection":
//connection
connection(req, res)
break;
case "/message":
sendMessage(req, res)
//message
break;
default:
res.statusCode = 404
res.end("Not found")
//404
break;
}
}).listen(port, ip)chatfunctions.js:
let clients = []
function connection(req, res) {
clients.push(res)
console.log("new connection", clients.length)
res.on("close", function() {
clients.splice(clients.indexOf(res), 1)
console.log("connection closed", clients.length)
})
}
function sendMessage(req, res) {
clients.forEach(function(client) {
req.pipe(client)
req.on("error", function(err) {
console.error(err)
client.status = 500
client.end("Server error")
})
client.on("finish", function() {
res.end("")
})
})
clients = []
}
exports.connection = connection;
exports.sendMessage = sendMessage;sendFile.js
const fs = require("fs");
function sendFile(path, res) {
let fileStream = new fs.ReadStream(path);
fileStream.pipe(res);
fileStream.on("error", function (err) {
console.error(err);
res.status = 500;
res.end("Server error");
});
res.on("close", function () {
fileStream.destroy();
});
}
exports.sendFile = sendFile;index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#form {
padding: 10px;
}
#submit {
width: 80px;
height: 30px;
border: 1px solid black;
border-radius: 3px;
}
#message {
width: 200px;
height: 23px;
}
</style>
<title>Document</title>
</head>
<body>
<form id="form">
<input type="text" name="message" id="message">
<input type="submit" value="Submit" id="submit">
</form>
<ul id="messages"></ul>
<script>
function poll() {
console.log("creating connection")
let connection = new XMLHttpRequest()
connection.open("GET", "http://127.0.0.1:1337/connection")
connection.send()
connection.onload = function () {
let li = document.createElement("li")
li.textContent = connection.responseText
messages.appendChild(li)
poll()
}
}
form.onsubmit = function (event) {
event.preventDefault()
let text = message.value
let request = new XMLHttpRequest()
request.open("POST", "http://127.0.0.1:1337/message")
request.setRequestHeader("Content-type", "text/plain")
request.send(text)
}
poll()
</script>
</body>
</html>