如何在不使用 socket.io 的情况下立即在不同的客户端上看到附加文本?[node.js]
How can I see an appended text instantly on a different client without using socket.io?[node.js]
我正在构建一个简单的网络应用程序,您可以 post 将短语输入其中。它做我想做的一切,除了立即显示其他人附加到网站的内容。我知道我可以为此使用 socket.io,但我想知道我是否可以在不使用它的情况下实现相同的目的,以便我可以使网站尽可能简单。这是代码
//script.js file
fetch('https://server.jonaso1.repl.co/').then(response => response.json())
.then(data => {
for (let i = 0; i < data.length; i++)
prependPhrase(data[i]);
}); //this loads saved stuff on the page when you access it
form.onsubmit = (e) => { //this posts input values on server (I omitted var declarations)
e.preventDefault();
var data = {
[input.name1]:input1.value,
[input2.name]:input2.value,
[input3.name]:input3.value,
};
prependPhrase(data);
fetch('https://server.jonaso1.repl.co/frases', {
method: "POST",
body: JSON.stringify(data),
headers: {"Content-type": "application/json"}
})
};
function prependPhrase(data) {//just the function that puts the text on site
const p = document.createElement('p');
const span = document.createElement('span');
p.setAttribute('class', 'p');
container.prepend(p);
p.append(`${data.user} enviou : `)
p.append(span);
span.append(`${data.frasefavorita}`)
p.append(` - ${data.autor}`)
}
//server.js file
mongoose.connect(mongoDB).then(() => console.log('database conectada')).catch((err) => console.log(err));
app.use(cors());
app.use(express.urlencoded({extended:true}));
app.use(express.json());
app.get('/', (req, res) => {
phrase.find().then(result => {//this responds to get reqs with mongodb
res.send(JSON.stringify(result))
})
});
app.post('/frases', (req, res) => { //this saves more phrases in mongodb
const frase = new phrase(req.body);
frase.save().then(() => console.log('frase salva'));
});
app.listen(3000, () => {
console.log('listening on 3000')});
我认为您正在搜索长轮询。
这是一个很好的解释示例 https://javascript.info/long-polling
下面是轮询、sockets和sse的对比https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9
我正在构建一个简单的网络应用程序,您可以 post 将短语输入其中。它做我想做的一切,除了立即显示其他人附加到网站的内容。我知道我可以为此使用 socket.io,但我想知道我是否可以在不使用它的情况下实现相同的目的,以便我可以使网站尽可能简单。这是代码
//script.js file
fetch('https://server.jonaso1.repl.co/').then(response => response.json())
.then(data => {
for (let i = 0; i < data.length; i++)
prependPhrase(data[i]);
}); //this loads saved stuff on the page when you access it
form.onsubmit = (e) => { //this posts input values on server (I omitted var declarations)
e.preventDefault();
var data = {
[input.name1]:input1.value,
[input2.name]:input2.value,
[input3.name]:input3.value,
};
prependPhrase(data);
fetch('https://server.jonaso1.repl.co/frases', {
method: "POST",
body: JSON.stringify(data),
headers: {"Content-type": "application/json"}
})
};
function prependPhrase(data) {//just the function that puts the text on site
const p = document.createElement('p');
const span = document.createElement('span');
p.setAttribute('class', 'p');
container.prepend(p);
p.append(`${data.user} enviou : `)
p.append(span);
span.append(`${data.frasefavorita}`)
p.append(` - ${data.autor}`)
}
//server.js file
mongoose.connect(mongoDB).then(() => console.log('database conectada')).catch((err) => console.log(err));
app.use(cors());
app.use(express.urlencoded({extended:true}));
app.use(express.json());
app.get('/', (req, res) => {
phrase.find().then(result => {//this responds to get reqs with mongodb
res.send(JSON.stringify(result))
})
});
app.post('/frases', (req, res) => { //this saves more phrases in mongodb
const frase = new phrase(req.body);
frase.save().then(() => console.log('frase salva'));
});
app.listen(3000, () => {
console.log('listening on 3000')});
我认为您正在搜索长轮询。 这是一个很好的解释示例 https://javascript.info/long-polling
下面是轮询、sockets和sse的对比https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9