我正在开发一个简单的聊天插件,它已经准备好了,但我有一些关于性能的怀疑.我怕服务员会很累。
它基于递归函数,调用 AJAX ,从数据库获取数据并将其打印在屏幕上。
window.addEventListener('load', function(){
RenderChat()
});
const chatObjectScriptsToUrlParams = (obj) =>{
let params = "";
for (var key in obj) {
if (params != "") {
params += "&";
}
params += key + "=" + encodeURIComponent(obj[key]);
}
return params;
}
const RenderChat = () => {
let divChat = document.getElementById('dv-chat');
let params = {
action: 'DvChat',
nounce: DvChat_js.nounce,
url: DvChat_js.dv_chat_ajax,
};
params = chatObjectScriptsToUrlParams(params);
fetch(DvChat_js.url + '?' + params)
.then((response) => {
return response.text();
})
.then((html) => {
divChat.innerHTML = html;
console.log('HTML => ', html);
})
.catch( () => {
})
.finally(() => {
RenderChat();
});
}
就像我说的,这是一个非常简单的方法,我真的很想让你知道这是否是最好的方法,或者如果有调整,我可以改进这个想法。
我见过有人使用setInterval();但是我选择使用递归函数来减少请求的数量。
这是我第一次开发聊天,我不知道这样做是否正确,我最终对与基础架构相关的性能产生了严重的怀疑
2条答案
按热度按时间z9smfwbn1#
对于这种类型的应用程序,我建议使用WebSocket连接来获得实时用户体验。不需要轮询。当客户端收到信息时,它会更新服务器,反之亦然。
我不确定PHP是否是这类应用程序的最佳服务器端语言,但有一个库:Ratchet应该做你需要它做的事情。
sxpgvts32#
我认为这段代码有两个问题。
1.它会使您的服务器和网络过载。移动的用户会讨厌你,或者更糟,停止使用你的东西。
如果您要轮询服务器--经常访问它--则需要在访问之间设置某种时间延迟。每隔五秒左右攻击一次服务器,不是马上。
1.正如所写的那样,你有无限的递归,并且会得到一个堆栈溢出。在现代浏览器中,这需要一段时间才能实现,因为它们有大量可用内存。
如果这是我的项目,我会用这样的东西解决这两个问题,而不是调试,使用setInterval()。
这将在加载网页时开始,每五秒(5000毫秒)调用一次RenderChat函数。要使其工作,必须去掉
finally{}
子句中的尾递归调用。你也可以用异步函数解决无限递归问题,但这是另一个主题。
这里还有一个问题:看起来聊天记录--你每次点击时获取的记录--随着聊天的进行而变得越来越长。我一直在Slack上聊天,持续了好几个月。所以你的日志可能会太长。