Уменьшите размер запроса AJAX. Простой чат с системой опроса
ОБРАТИТЕ ВНИМАНИЕ: Я заменил свою систему опроса на
websockets
, но Я все еще хочу знать ответ на мои вопросы выше.
Я пытаюсь уменьшить запрос AJAX системы сообщений с традиционным опросом , но я не знаю, как его получить:
$chatbox = $("#chatbox");
setInterval(function(){
// I send the sha1 of the chatbox html content to verify changes.
$.post("post.php", {checksum: hex_sha1($chatbox.html())}, function (data, status) {
switch (status) {
case "success":
// If version of "post.php" checksum is different than mine (there are changes) data isn't empty; I assign data as the new content of the chatbox.
if(data){
$chatbox.html(data);
$chatbox.scrollTop($chatbox[0].scrollHeight);
}
break;
default:
$chatbox.html('Connection error...');
break;
}
});
}, 1000);
Ну, как вы видите, я использую setInterval()
с 1000
миллисекундами в качестве параметра, и благодаря системе контрольной суммы SHA1
я могу уменьшить размер всего ответа AJAX чтобы 343 B
( за исключением случаев, когда"post.php "возвращает какое-то новое сообщение, очевидно)
Вопросы:
Почему все мои запросы AJAX имеют всегда одинакового размера (
343 B)
даже если я изменю SHA1 (20 B
) хэш в MD5 (16 B
)?Моя переменная контрольной суммы (SHA1) заполняет
20 B
: Откуда берутся остальные323 B
?Могу ли я еще больше уменьшить размер запроса AJAX? Как?
ПРИМЕЧАНИЕ:
hex_sha1()
является реализацией алгоритма SHA1 для Javascript: http://pajhome.org.uk/crypt/md5/sha1.html
ПРИМЕЧАНИЕ 2:
К сожалению, я не могу использовать технику выталкивания сервера, такую как
node.js
. Я могу использовать только Javascript (на стороне клиента) и PHP.
3 answers
Почему бы не использовать простой javascript-запрос AJAX? Возможно, ваши данные AJAX слишком длинные, поэтому они имеют большой размер: и единственное, что вы можете для этого сделать, это сделать так, чтобы данные AJAX содержали несколько данных.
Чего ты хочешь? нравится опрос AJAX в Facebook? Сделайте это так на сервере PHP:
$chat_data = "(this is the chat data variable if there is no chat data it will idle)";
while (!$chat_data) {
// when there's no chat data let's idle the request without disconnecting
// the client from the AJAX request.
sleep(1);
}
exit(json_encode($chat_data));
На стороне клиента JavaScript:
function repoll () {
chat_poll = new XMLHttpRequest();
// the chat_req variable is for sending POST data to the server.
chat_req = new FormData();
chat_req.append("do", "chatpoll");
chat_poll.open("POST", "post.php");
chat_poll.send(chat_req);
chat_poll.onload = function () {
// do something here with the chat data
// repoll the server
repoll();
}
repoll();
Делая это, вы реализуете опрос сервера Facebook like.
Для примера websocket
в клиенте JavaScript сторона:
web_socket = new WebSocket("ws://[thesocket]:[theport]");
web_socket.onmessage = function (w) {
// do something here. this will fire if messages is received from the websocket.
// you will get the message from w.data variable.
alert("Data Received: " + w.data);
}
// to send data to the web socket do this:
web_socket.send("the data you want. I prefer JSON for sending configuration and chat data or XML if you want");
Вот мой ответ на ваши вопросы, хотя вам лучше использовать такую библиотеку, как socket.ввод-вывод с резервной поддержкой старых браузеров (имитация веб-сайтов с помощью длительного опроса или что-то в этом роде).
Почему все мои запросы AJAX всегда имеют одинаковый размер (343 Б), даже если я меняю хэш SHA1 (20 Б) на MD5 (16 Б)?
Большая часть HTTP-связи между браузером и сервером по умолчанию сжимается с помощью gzip. Основная часть вашего потока запросов/ответов состоит из HTTP заголовки, в которых 4 байта разницы в выводе вашего алгоритма хеширования могут не иметь эффективного значения из-за сжатия gzip.
Моя переменная контрольной суммы (SHA1) занимает 20 B: Где остальные 323 B?
См. Выше, и чтобы убедиться в этом самостоятельно, вы можете использовать http-монитор, tcpdump или инструменты разработчика для просмотра передаваемых необработанных данных.
Могу ли я еще больше уменьшить размер запроса AJAX? Как?
WebSocket занимает намного меньше места по сравнению с HTTP-запросами, поэтому использование его здесь кажется лучшим вариантом (и опрос с интервалами почти никогда не бывает хорошей идеей, даже без WebSocket вам было бы лучше реализовать длительный опрос на вашем сервере).
Я собрал простую страницу с запросом jQuery $.post. Он создает заголовок запроса в виде:
POST /post_.js HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0
Accept: */*
Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost/test.html
Content-Length: 49
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Вы можете просмотреть заголовки ответов и запросов с помощью Firebug в Firefox или F12 в Chrome. На мой взгляд, дополнительные байты - это те, которые участвуют в Http-запросе.