How to implement real-time live messaging jQuery Ajax Mysql Php

Question

I'm writting a very simple chat application. I have written a code that works at inserting data in database without refreshing the page. But when I test with two users at the same time, I can only see what the other user sent to me when I send a new message. How can I make it more live? I spent the entire day reading on Websockets (specifically socket.io, ratchet) and long-polling. I found interesting solutions around here but I'm looking to implement it with the code I have already written and it's confusing me. I'm using a php while statement to get data from database.

Working Ajax code

<script>
$(document).ready(function(){
$("#buttons").click(function(){
var fromuserid = $("#fromUserId").val();
var touserid = $("#toUserId").val();
var chatMessage = $("#chatMessage").val();
// stored in database.
var dataString = 'fromUserId='+ fromuserid + '&toUserId='+ touserid + '&chatMessage='+ chatMessage;
// AJAX
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
cache: true,
success: function(response){
   $("#displayMessage").html(response);
       $("#chatForm").trigger("reset");
}
});

return false;
});
});
    </script>

while statement

       <div id='displayMessage' style='height: 480px; padding:5%; overflow-x:hidden;'>
        <?php
            $chatmsgQ="SELECT * FROM ve_chat c 
   WHERE c.isActive='1' AND (c.fromUserId='$loginid_session' 
   OR c.toUserId='$loginid_session')";
$chatmsgresult=  mysqli_query($db,$chatmsgQ);
        while($chatmsg=  mysqli_fetch_array($chatmsgresult)){?>
   <?php if($chatmsg['fromUserId']==$loginid_session):?>
   <!-- user one -->
<p class='bubble pull-left'><?=$chatmsg['message'];?></p>
<?php elseif($chatmsg['fromUserId']!=$loginid_session):?>
  <!-- user two-->
<p class='bubbleother pull-right'><?=$chatmsg['message'];?></p>
<?php endif;?>
<?php } ;?>
  </div>

Show the table schemas involved in the query. Are you sure you're retrieving messages from both users? Does the query work in phpMyAdmin (or similar)? — Sloan Thrasher
– Sloan Thrasher, Commented May 18, 2017 at 3:43

Sampath Wijesinghe · Accepted Answer · 2017-05-18 03:55:25Z

2

PHP isn't really the best language to use when it comes to push messages, it's really built around typical get/response kinda flows.

http://www.nodejs.org and http://socket.io/hey're very easy to get setup, and will play well with you using php for the majority of your work, then using node to deal with push messages kinda stuff.

answered May 18, 2017 at 3:55

Sampath Wijesinghe

6901 gold badge11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Farham Over a year ago

Node.js will mess up with my ports and I suspect it will slow me down at this point ?

Sampath Wijesinghe Over a year ago

node.js and php are going to be two independent processes, and so you can't just call stuff between them, nor can you call node.js function on your client side.

Mahfuzur Rahman · Accepted Answer · 2017-05-18 04:07:20Z

1

To make your application more live, you need to use setInterval method. Use this project Simple php, ajax and mysql chat application.

answered May 18, 2017 at 4:07

Mahfuzur Rahman

1,55520 silver badges25 bronze badges

2 Comments

Sebastian Farham Over a year ago

Nice project man. It seems to be what I need to do. Would you mind teaching by example with my codes? No need to be too complex just a working snippet. I tried adding window.setInterval(function() { $("#displayMessage").load("chat.php"); }, 2000); but it gives me undefined index

Mahfuzur Rahman Over a year ago

Sorry for late. I'll upload example soon. And if this is good answer, then accept it.

Collectives™ on Stack Overflow

How to implement real-time live messaging jQuery Ajax Mysql Php

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related