I recently posted on ajax instant messenger tutorial with google hangout features, now have come with more better ideas, the previous post is not user friend and responsive, i made this app to cover up last post, but on this post updated post, i had remove enter key to send message event, but you can use the previous code to success that purpose, if you can't send me mail, i will send you the code.Simple integration on your site just upload the folder ajax-instant-messenger-updated to your saver that all.
This has been made possible for every user to own there auto generated login id, no password, no username, just the ID generated by the system, registration requirement are just your name and profile photo url, then you are done, no page refresh on registration
We are still looking at:
- Instant div container refresh using jquery
- bootstrap chat bobble
- facebook hashtag method
- clickable link function
- Ago time function
- auto key generation
- user registration without page refresh
DATABASE STRUCTURE
-- -------------------------------------------------------- -- -- Table structure for table `ajax_chat` -- CREATE TABLE IF NOT EXISTS `ajax_chat` ( `id` int(11) NOT NULL AUTO_INCREMENT, `message` text NOT NULL, `username` varchar(20) NOT NULL, `url` varchar(1000) NOT NULL, `time` varchar(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=45 ; -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `password` varchar(20) NOT NULL, `name` varchar(20) NOT NULL, `url` varchar(1000) NOT NULL, `time` varchar(20) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;
Instant div refresh code
include "inc_db/config.php"; require "agoTime_example.php"; $result=$db->query("SELECT * FROM ajax_chat ORDER BY id DESC"); //convert hashtags function gethashtags($text) { //Match the hashtags preg_match_all('/(^|[^a-z0-9_])#([a-z0-9_]+)/i', $text, $matchedHashtags); $hashtag = ''; // For each hashtag, strip all characters but alpha numeric if(!empty($matchedHashtags[0])) { foreach($matchedHashtags[0] as $match) { $hashtag .= preg_replace("/[^a-z0-9]+/i", "", $match).','; } } //to remove last comma in a string return rtrim($hashtag, ','); } //convert text to clickable links function convert_clickable_links($message) { $parsedMessage = preg_replace(array('/(?i)\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?«»“”‘’]))/', '/(^|[^a-z0-9_])@([a-z0-9_]+)/i', '/(^|[^a-z0-9_])#([a-z0-9_]+)/i'), array('$1', '$1@$2', '$1#$2'), $message); return $parsedMessage; } while ($rows=mysqli_fetch_assoc($result)) { $username = $rows['username']; $message = $rows['message']; $time = $rows['time']; $id = $rows['id']; $url = $rows['url'];
if ($username!=$_SESSION['name']) { echo '.$url.'" alt="message user image">'.$username.' '.time_passed($time).''
'.convert_clickable_links($message).'
'.$username.'
'.time_passed($time).'
Bootstrap chat bobble code
.$url.'" alt="message user image">'.$username.' '.time_passed($time).''
'.convert_clickable_links($message).'
//convert hashtags function gethashtags($text) { //Match the hashtags preg_match_all('/(^|[^a-z0-9_])#([a-z0-9_]+)/i', $text, $matchedHashtags); $hashtag = ''; // For each hashtag, strip all characters but alpha numeric if(!empty($matchedHashtags[0])) { foreach($matchedHashtags[0] as $match) { $hashtag .= preg_replace("/[^a-z0-9]+/i", "", $match).','; } } //to remove last comma in a string return rtrim($hashtag, ','); }
Clickable link code PHP
//convert text to clickable links function convert_clickable_links($message) { $parsedMessage = preg_replace(array('/(?i)\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'".,<>?«»“”‘’]))/', '/(^|[^a-z0-9_])@([a-z0-9_]+)/i', '/(^|[^a-z0-9_])#([a-z0-9_]+)/i'), array('$1', '$1@$2', '$1#$2'), $message); return $parsedMessage; }
function time_passed($timestamp){
//type cast, current time, difference in timestamps
$timestamp = (int) $timestamp;
$current_time = time();
$diff = $current_time - $timestamp;
//intervals in seconds
$intervals = array (
'year' => 31556926, 'month' => 2629744, 'week' => 604800, 'day' => 86400, 'hour' => 3600, 'minute'=> 60
);
//now we just find the difference
if ($diff == 0)
{
return 'just now';
}
if ($diff < 60)
{
return $diff == 1 ? $diff . ' second ago' : $diff . ' seconds ago';
}
if ($diff >= 60 && $diff < $intervals['hour'])
{
$diff = floor($diff/$intervals['minute']);
return $diff == 1 ? $diff . ' minute ago' : $diff . ' minutes ago';
}
if ($diff >= $intervals['hour'] && $diff < $intervals['day'])
{
$diff = floor($diff/$intervals['hour']);
return $diff == 1 ? $diff . ' hour ago' : $diff . ' hours ago';
}
if ($diff >= $intervals['day'] && $diff < $intervals['week'])
{
$diff = floor($diff/$intervals['day']);
return $diff == 1 ? $diff . ' day ago' : $diff . ' days ago';
}
if ($diff >= $intervals['week'] && $diff < $intervals['month'])
{
$diff = floor($diff/$intervals['week']);
return $diff == 1 ? $diff . ' week ago' : $diff . ' weeks ago';
}
if ($diff >= $intervals['month'] && $diff < $intervals['year'])
{
$diff = floor($diff/$intervals['month']);
return $diff == 1 ? $diff . ' month ago' : $diff . ' months ago';
}
if ($diff >= $intervals['year'])
{
$diff = floor($diff/$intervals['year']);
return $diff == 1 ? $diff . ' year ago' : $diff . ' years ago';
}
}
?>
Auto User ID generation code PHP
no user will never ever get the same id
function gen_random_string($length=4)
{
$chars ="ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";//length:28
$final_rand='';
for($i=0;$i<$length; $i++)
{
$final_rand .= $chars[ rand(0,strlen($chars)-1)];
}
return $final_rand;
}
$ids=gen_random_string(4)."\n"; //generates a string with length 4
echo $ids;
?>
User Reg code JS
user registration without page refresh
<script src="jquery-1.8.0.min.js" type="text/javascript"></script> <script> $(document).ready(function() { $('#signup').click(function() { var userid = $("#genid").val(); var name = $("#name").val(); var url = $("#url").val(); if(name != '' && url != '') { $.ajax({ type: "POST", url: "ajaxsignup.php", data: 'name='+name+'&userid='+userid+'&url='+url, cache: false, success: function(html) { alert('successfully signup, now login'); } }); return false; } else { alert('Enter Name and Image Url !'); return false; } }); }); </script>
Form to trigger the above JS
<form class="lockscreen-credentials"> <div class="input-group"> <div class="form-group has-feedback"> <input type="text" id="genid" class="form-control" value=" echo "$ids"; ?>" disabled placeholder="auto generated ID"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <i>.</i> <div class="form-group has-feedback"> <input type="text" id="name" class="form-control" placeholder="Name"> <span class="glyphicon glyphicon-user form-control-feedback"></span> </div> <i>.</i> <div class="form-group has-feedback"> <input type="text" id="url" class="form-control" placeholder="Image url"> <span class="glyphicon glyphicon-link form-control-feedback"></span> </div> <i>.</i> <div class="form-group has-feedback"> <button id="signup" value="Signup" class="form-control">Signup <i class="fa fa-arrow-circle-right"></i></button> </div> </div> </form>
Hit me with a comment!