arkenidar/chat.php

## chat.php
<?php
$pdo = new PDO("sqlite:db.sqlite3", "", "", [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION] );

$sql = "CREATE TABLE IF NOT EXISTS chat_messages (
  id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
  message_text TEXT NOT NULL,
  sender TEXT NOT NULL,
  creation_timestamp DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL )";
$pdo->query($sql); // init db tables

$mode = @$_REQUEST["mode"]; // which mode?

if($mode=="sending"){ // sending mode
  if(@$_REQUEST["message_text"]){
    $text = $pdo->quote($_REQUEST["message_text"]);
    $sender = $pdo->quote($_REQUEST["sender"]);
    $sql = "INSERT INTO chat_messages (message_text, sender) VALUES ($text, $sender)";
    $pdo->query($sql); // new message
  }

}elseif($mode=="message_listing"){ // message listing mode

  $query = "SELECT * FROM chat_messages ORDER BY creation_timestamp DESC LIMIT 15";
  $query = "SELECT * FROM ($query) AS res ORDER BY creation_timestamp ASC";
  $messages = $pdo->query($query); // list messages

  foreach($messages as $message){
    $sender = htmlspecialchars($message["sender"]);
    $text = htmlspecialchars($message["message_text"]);
    $image = substr($text, 0, 4)==="http"; // simple image handling
    echo $sender.": ".($image?"<img src=".$text.">":$text)."<br>";
  }
}else{
?>
<!doctype html>
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>

function scrollHeight(){ return $(document).height()-$(window).height() }
function isScrolledToBottom(){ var h = scrollHeight(); return $("body")[0].scrollTop==h }
function scroll(){ $("body")[0].scrollTop = scrollHeight() }
function listMessages(scrollFlag){ $("#message_log").load("?mode=message_listing", function(){ if(scrollFlag) scroll() } ) }
function periodicallyListMessagesCallback(){ var scrollFlag = isScrolledToBottom(); listMessages(scrollFlag) }

$(function(){
  setInterval(periodicallyListMessagesCallback, 500) // get messages periodically
  $("#send_message_form").submit(function(){
    $.post("?mode=sending", $("#send_message_form").serialize()) // send message
    $("input[name=message_text]").val("")
    return false
  })
}) </script>
<style type="text/css">
#send_message_form {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
}
#message_log{
  padding-bottom: 50px;
}
</style>
<meta charset="utf-8">
<title></title>
</head><body>
<div id="message_log"></div>
<form id="send_message_form" action="" method="post">
Sender: <input type="text" name="sender" value="sender"><br>
Message: <input type="text" name="message_text" autofocus="on" autocomplete="off">
<input type="submit" value="Submit"></form>
</body></html>
<?php } ?>
	<?php
	$pdo = new PDO("sqlite:db.sqlite3", "", "", [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION] );

	$sql = "CREATE TABLE IF NOT EXISTS chat_messages (
	id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
	message_text TEXT NOT NULL,
	sender TEXT NOT NULL,
	creation_timestamp DATETIME DEFAULT CURRENT_TIMESTAMP NOT NULL )";
	$pdo->query($sql); // init db tables

	$mode = @$_REQUEST["mode"]; // which mode?

	if($mode=="sending"){ // sending mode
	if(@$_REQUEST["message_text"]){
	$text = $pdo->quote($_REQUEST["message_text"]);
	$sender = $pdo->quote($_REQUEST["sender"]);
	$sql = "INSERT INTO chat_messages (message_text, sender) VALUES ($text, $sender)";
	$pdo->query($sql); // new message
	}

	}elseif($mode=="message_listing"){ // message listing mode

	$query = "SELECT * FROM chat_messages ORDER BY creation_timestamp DESC LIMIT 15";
	$query = "SELECT * FROM ($query) AS res ORDER BY creation_timestamp ASC";
	$messages = $pdo->query($query); // list messages

	foreach($messages as $message){
	$sender = htmlspecialchars($message["sender"]);
	$text = htmlspecialchars($message["message_text"]);
	$image = substr($text, 0, 4)==="http"; // simple image handling
	echo $sender.": ".($image?"<img src=".$text.">":$text)."<br>";
	}
	}else{
	?>
	<!doctype html>
	<html><head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
	<script>

	function scrollHeight(){ return $(document).height()-$(window).height() }
	function isScrolledToBottom(){ var h = scrollHeight(); return $("body")[0].scrollTop==h }
	function scroll(){ $("body")[0].scrollTop = scrollHeight() }
	function listMessages(scrollFlag){ $("#message_log").load("?mode=message_listing", function(){ if(scrollFlag) scroll() } ) }
	function periodicallyListMessagesCallback(){ var scrollFlag = isScrolledToBottom(); listMessages(scrollFlag) }

	$(function(){
	setInterval(periodicallyListMessagesCallback, 500) // get messages periodically
	$("#send_message_form").submit(function(){
	$.post("?mode=sending", $("#send_message_form").serialize()) // send message
	$("input[name=message_text]").val("")
	return false
	})
	}) </script>
	<style type="text/css">
	#send_message_form {
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: white;
	}
	#message_log{
	padding-bottom: 50px;
	}
	</style>
	<meta charset="utf-8">
	<title></title>
	</head><body>
	<div id="message_log"></div>
	<form id="send_message_form" action="" method="post">
	Sender: <input type="text" name="sender" value="sender"><br>
	Message: <input type="text" name="message_text" autofocus="on" autocomplete="off">
	<input type="submit" value="Submit"></form>
	</body></html>
	<?php } ?>