Member Avatar for ErlendHL
ErlendHL 0 Junior Poster in Training

Hi! I am testing how to make an easy chat engine here.
First I used xmlhttp.open("GET",url+"?F="+FILE,[B]false[/B]); , but I noticed that it was very bad to use false, because then, every 2 seconds, the page stops working. (like you can't do anything for like 0.5 sec)
So I tried to use true, instead of false, but then this iis what shows up in firebug every 2 seconds (not exactly):

  • GET
    successful, and under Response, it stands just what it should be; the content of the .txt file that should be loaded into the variable text.
  • And then it stands that text is undefined...

Here is the code in the page:

function Update(){
                setTimeout("Update();",2000);
                text = Read('allMessages.txt','content',2);
                text = text.replace(/\n/g,'<br />');
                document.getElementById('content').innerHTML = text;
            }
            function Chat(){
                var fullMessage = '<b>'+document.getElementById('name').value + ':</b> ' + document.getElementById('message').value+'\n';
                Append(fullMessage,'allMessages.txt');
                document.getElementById('message').value="";
            }
            document.getElementById('name').value = prompt('Welcome to this beta chat engine, that does not work -.-.\n What is your name?',"");

Where Chat(); gets executed when the user presses Write.
And Update(); gets executed on body onload event, and as you see, it executes itself every 2 seconds.

Here is the external js document.

So Please help me! Thanks on advance!

  • 1 Contributor
  • 0 Replies
  • 82 Views

Dani AI

Generated

Note for : the symptom is typical when moving from synchronous XHR to asynchronous. A sync request blocks the main thread (hence the UI pauses); MDN documents that synchronous XHR on the main thread is not recommended. With async requests the response is available only inside the request callback (or after a Promise resolves). That explains why the Network tab shows a successful GET but the variable seen outside the callback is undefined. See XMLHttpRequest.open and the Fetch API as a modern alternative: Using Fetch.

A simple, robust pattern is to poll with a nonblocking request and update the DOM only after the response arrives. Example using Fetch and a repeating timer (with basic error handling and cache-control):

async function fetchMessages() {
  try {
    const r = await fetch('allMessages.txt', { cache: 'no-store' });
    if (!r.ok) throw new Error(r.statusText);
    const text = await r.text();
    document.getElementById('content').innerHTML = text.replace(/\n/g, '<br />');
  } catch (e) {
    console.error('fetchMessages error', e);
  }
}

setInterval(fetchMessages, 2000);
fetchMessages();

Client-side code cannot directly append to a server file. Appending requires a server endpoint (PHP, Node, etc.) that accepts POST and writes with proper locking. For example, a minimal PHP append uses file_put_contents($file, $msg, FILE_APPEND | LOCK_EX). Additional troubleshooting: watch Network and Console for CORS or 4xx/5xx errors, confirm the response content and MIME type, add a cache-buster if needed, and avoid overlapping requests by aborting or skipping a new call while one is in flight.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.