30 thoughts on “JS Chat App Using JQuery & PHP (AJAX)

  1. Thanks for this awesome video ! I feel sorry for you that after all of this, you got plenty of comments requesting the code while they could just watch and copy…
    This is my first time using Ajax, but I see a problem using this method : my cpu temperature went from 60°C to 90°C because of XHR looping. I saw that we could maybe use setTimeout instead, wouldn't it be a better compromise for real usage ?

    EDIT :
    i found out how to set a time interval for data reloading : remove the "load();" line inside load() function and replace the "load()" inside $(document).ready function with ->
    setInterval(function () {
    load();
    }, 500);

    replacing 500 with the value that you want of course

  2. i follow your video and i get the chat full working, i send the projet and later format my pc, my teacher said my chat doesnt work and when i check after put it local the chat was only getting data at db but it never return to me, WHAT HAPPEN???? HEEEELP!

  3. while($row = $items -> mysqli_fetch_assoc())

    Fatal error: Uncaught Error: Call to a member function mysqli_fetch_array() on bool in C:xamppahtdocschat1.php:19 Stack trace: #0 {main} thrown in C:xamppahtdocschat1.php on line 19
    can i get answer?

  4. Very Good!!
    I I followed exactly his steps but when printing the message he returns
    $ {item.from}
    {item.message}
    And not the values.
    Could you tell me what's wrong?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script&gt;
    <script>
    var from = null, start = 0, url='http://localhost/chat-whatsapp/chat.php&#39;;
    $(document).ready(function() {
    from = prompt("digite o seu nome:");
    load();

    $('form').submit(function (e) {
    $.post(url, {
    message: $('#message').val(),
    from: from
    });
    $('#message').val('');
    return false;
    })
    });

    function load(){
    $.get(url + '?start=' + start, function(result){
    if(result.items){
    result.items.forEach(item =>{
    start = item.id;
    $('#messages').append(renderMessage(item));
    })
    };
    load();
    });
    }

    function renderMessage(item){
    console.log(item)
    return '<div class="msg"><p>${item.from}</p>{item.message}</div>';
    }
    </script>
    <style>

    body{
    margin:0px;
    overflow:hidden;
    font-family:'Lucida', 'Lucida Sans Regular', 'Lucida Grande';
    }
    #messages{
    height: 88vh;
    overflow-x:hidden;
    padding:10px;
    background-image: url("fundo-whats.png");
    }
    form{
    display:flex;
    }
    input{
    font-size:1.2rem;
    padding:10px;
    appearance: none;
    -webkit-appearance:none;
    border:1px solid #ccc;
    border-radius:5px;
    }
    #message{
    flex:2
    }

    </style>
    </head>
    <body>
    <div id="messages"></div>
    <form>

    <input type="text" id="message" autocomplete="off" autofocus placeholder="Digite a mensagem" required />
    <input type="submit" value="Send">

    </form>
    </body>
    </html>

  5. I wanna notice one problem. You always recursively loading messages that can lead to lags into a browser. In my opinion better-using setTimeout. If I am wrong please correct me. Thanks for a good tutorial.

  6. When I try to send a message the prompt pops up. It feels like the site reload. And a question mark is added to the address. I use xampp and have placed all the files on the server. I use url = 'chat.php'. But I have tried http://localhost/dir/chat.php. No messages is inserted to the database. What can I do wrong? No error message. So I have no clue where to search.

Leave a Reply

Your email address will not be published. Required fields are marked *