I have created a chat application using PHP, mysql, and ajax for posting data to the server. I have tested it by spamming the chat repeatedly, and everything works for about 7 or 8 seconds until my chat will not post further. On refresh, I get a "NO DATA RECEIVED" error from google chrome. Basically I think I am overloading my site. Is there a way that I could optimize this chat? Or is it not a server-side issue at all?
This is my jQuery that is posting to my server:
$(document).ready(getMessage());
//Send message
$('#send').click(function() {
var message = $('#message').val();
var username = $('#un').val();
var id = $('#id').val();
var fullname = $('#name').val();
$.ajax({
url: 'chat/send_message.php',
type: 'POST',
data: {
message: message,
username: username,
user_id: id,
fullname: fullname
},
success: function() {
$('#message').val('');
getMessage();
}
});
return false;
});
function getMessage() {
$.post('chat/get_message.php', {getMessage: true}, function(message) {
$('#chatbox').html(message);
$('#chatbox').scrollTop($('#chatbox')[0].scrollHeight);
});
}
setInterval(getMessage, 5000);This is the PHP that handles the sending of the message. It just stores it in a database:
<?php
//Message sending
if(isset($_POST['message'])) {
try {
$pdo = new PDO('mysql:host=localhost;dbname=database', 'username', 'password');
} catch (PDOException $e) {
echo("Could not connect to the server.");
}
$message = $_POST['message'];
$timesent = date('Y-m-d H:i:s');
$id = $_POST['user_id'];
$fullname = $_POST['fullname'];
$username = $_POST['username'];
$query = $pdo->prepare("INSERT INTO `message`(`message`,`user_id`,`timesent`,`fullname`,`username`) VALUES (:message,:user_id,:timesent,:fullname,:username)");
$query->execute(array(
':message' => $message,
':user_id' => $id,
':timesent' => $timesent,
':fullname' => $fullname,
':username' => $username,
));
} else {
echo("Could not send message");
}This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<?php
include 'resources/head.php';
if(!$user->isLoggedIn()) {
Redirect::to('index.php');
}
?>
<title>GoonSquad | Chat</title>
<style type="text/css">
form, p, span {
margin:0;
padding:0; }
input { font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover { text-decoration:underline; }
#wrapper {
margin:0 auto;
padding-bottom:0;
background: rgba(0, 0, 0, 0.13);
width: 1000px;;
border:1px solid #ACD8F0;
text-align: center;
}
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:400px;
width:940px;
border:1px solid #ACD8F0;
overflow:auto; }
#message {
width:860px;
border:1px solid #ACD8F0;
margin-right: 5px;
}
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px 12.5px 25px; }
.welcome {
margin-left:auto;
margin-right: auto;
margin-top: 20px;
font-size: 150%;
}
.message {
width: 100%;
height: auto;
background-color: #cccccc;
margin-bottom: 6px;
border-radius: 3px;
padding: 6px;
}
.msgln { margin:0 0 2px 0; }
</style>
</head>
<body>
<?php include 'resources/header.php' ?>
<div id="row">
<div id="large-9 columns" class="override" role="content">
<div id="wrapper" class="left-align">
<div id="menu">
<p class="welcome">GoonSquad Chat</p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
</div>
<form id="messenger" action="" enctype="multipart/form-data">
<input type="text" id="message" class="left" autocomplete="off" size="63" maxlength="2000">
<input type="submit" id="send" class="button tiny" value="Send" >
<input type="hidden" id="id" value="<?php echo $user->data()->id; ?>">
<input type="hidden" id="name" value="<?php echo $user->data()->fullname?>">
<input type="hidden" id="un" value="<?php echo $user->data()->username?>"
</form>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/chat.js"></script>
</body>
</html></div>
