Ajax instant messaging system tutorial

I option out little time to write this script, i thought it will be useful somehow, this tutorials is focused on jquery,php, mysql primarily

We Will be looking at:

1. Instant div container refresh using jquery
2. Enter key to send message
3. google hangout chat bobble
4. facebook hashtag method
5. clickable link function
6. Ago time function

Although that all about this tutorials anyway, with the help of jquery and php will come to accomplished this instant system, jquery helps us to with click event to store data to DB without page load, . 

Enter key is rqual to 13 here

Javascript code

<br /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br /> <script type="text/javascript"> $(document).ready(function() { $('#press_to_enter').click(function() { var checkedValue = $('#press_to_enter:checked').val(); if(checkedValue) { $("#post_button").hide(); } else { $("#post_button").show(); } }); $('#form').keydown(function(e) { var checkedValue = $('#press_to_enter:checked').val(); if(checkedValue) { //enter key if (e.keyCode == 13) { //submit form submit_form(); } } }); //button submit form $('#post_button').click(function() { var checkedValue = $('#press_to_enter:checked').val(); if(!checkedValue) { submit_form(); } }); }); function submit_form() { var box_height = $('#response_messages'); var msg = $("#message").val(); var user = $("#username").val(); $('#post-loader').show(); if(msg != '') { $.ajax({ type: "POST", url: "update.php", data: 'msg='+msg+'&user='+user, cache: false, success: function(html) { $('#response_messages').append(html); var height = box_height[0].scrollHeight; box_height.scrolldown(height); $("#message").val(''); $('#post-loader').hide(); } }); return false; } else { alert("Message cannot be empty!"); return false; } } </script><br />

Form that triger the js script

<br /> <br /> <form id="form" name="form" action="#" method="POST" enctype="multipart/form-data" > <div class="msg-form-inner"> <input type="hidden" value="Marshall" id="username"><br /> <textarea id="message" class="message-form" cols="200" placeholder="Write a reply..." name="message">

Press enter to send

Update.php page allow to insert fields to database

<br /> <br /> <br /> <?php require_once "agoTime_example.php"; include "db.php"; //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('<a href="$1" target="_blank">$1</a>', '$1<a href="">@$2</a>', '$1<a target="_blank" href="http://codexpresslab.blogspot.com.ng/search?q=$2">#$2</a>'), $message);<br /> return $parsedMessage;<br /> }<br /> <br /> if(isset($_POST['msg']) && $_POST['msg'] != '')<br /> {<br /> $message = strip_tags(trim($_POST['msg']));<br /> $username = $_POST['user'];<br /> //get hashtag from message<br /> $hashtag = gethashtags($message);<br /> $time=time();<br /> <br /> mysql_query("INSERT INTO ajax_chat (message, username, time) VALUES('$message', '$username', '$time')");<br /> ?><br /> <br /> <ol class="discussion" id="discussion"><li class="other"><br /> <div class="avatar"> <img src="img/me.jpg" /><br /> </div><div class="messages"> <p><?php echo convert_clickable_links($message); ?></p><time datetime="2009-11-13T20:00">@<?php echo $username; ?> • <?php echo time_passed($time); ?></time><br /> </div></li> </ol><?php } ?><br />

Ago time function agoTime_example.php

<br /> <br /> <?php 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<br /> );<br /> <br /> //now we just find the difference<br /> if ($diff == 0)<br /> {<br /> return 'just now';<br /> } <br /> <br /> 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'])<br /> {<br /> $diff = floor($diff/$intervals['year']);<br /> return $diff == 1 ? $diff . ' year ago' : $diff . ' years ago';<br /> }<br /> }<br /> <br /> ?><br />

load.php 

jquery load this file to the page every 8seconds without page reload

<br /> <div id="response_messages"><ol class="discussion" id="discussion"> <?php include "db.php"; require "agoTime_example.php"; $result=mysql_query("SELECT * FROM ajax_chat"); //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('<a href="$1" target="_blank">$1</a>', '$1<a href="">@$2</a>', '$1<a target="_blank" href="http://codexpresslab.blogspot.com.ng/search?q=$2">#$2</a>'), $message); return $parsedMessage; } while ($rows=mysql_fetch_assoc($result)) { $username = $rows['username']; $message = $rows['message']; $time = $rows['time']; $id = $rows['id']; ?> <li class="other"><br /> <div class="avatar"> <img src="img/me.jpg" /><br /> </div><div class="messages"> <p><?php echo convert_clickable_links($message); ?></p><time datetime="2009-11-13T20:00">@<?php echo $username; ?> • <?php echo time_passed($time); ?></time><br /> </div></li> <?php } ?> </ol><br /> </div>

Database design  

jquery load this file to the page every 8seconds without page reload

<br /> CREATE TABLE IF NOT EXISTS `ajax_chat` (<br /> `id` int(11) NOT NULL AUTO_INCREMENT,<br /> `message` text NOT NULL,<br /> `username` varchar(20) NOT NULL,<br /> `time` int(11) NOT NULL,<br /> PRIMARY KEY (`id`)<br /> ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;<br /> <br /> <br />

Download css files : Here