Parsing smileys for chat script using php and ajax

by  
Share:

Online Chat has become a part of our life be it texting (SMS) or social networking sites, and when it comes to chat how can we forget smileys. We all just adore smileys they are just so much fun and a very good way to express our feeling. In this tutorial I will be explaining how we can we parse smileys for a chat script using php and ajax.

View Demo

Get the smiley set from deviantart

If you have any custom made smileys then its fine but if you are looking for free stuff, you can download it form here.

Chat Box Design

I am concentrating more on the smiley code rather that multiple chat user, so the design is kept very minimal and for one user only.

<!-- the message display here -->
<div class="messageBox" id="mbox"> </div>

<!-- input boxes to sumbit message -->
<div class="inputBox">
  <form method="post" name="f" method="post" id="f" action="" >
    <input type="text" name="t" id="t" value="" class="textbox" autocomplete="off" placeholder="Enter message" />
    <input type="submit" name="send" value="Send" class="but">
  </form>
</div>

The css code for the chat design.
.messageBox{border:2px solid #000; padding:10px;height:200px; overflow-x:scroll; overflow-y:hidden; background:#F7F7F7;}
.inputBox{margin:10px 0px 0 0;border:2px solid #000; height:50px;padding:10px;}
.inputBox .textbox{width:89%; height:32px;float:left; border:1px solid #000;}
.inputBox .but{height:36px;background:#E23793;border:1px solid #000;}

Sending the chat message via Ajax

Whenever the user submits the message we don’t want the whole page to load, just the chat box will be updated. This can be done via Ajax. In order to do this, bind the form to submit event and send an ajax request to a different page (php) along with your chat message. The php page will parse the chat message and return the formatted message with smiley ( if found), which will be displayed on the chat message box.

<script type="text/javascript">
$(document).ready(function() {
$( "#f" ).submit(function( event ) {
	event.preventDefault();
	var str = '';
	str = $.trim($("#t").val());
	if ( str.length > 0) {
		$("#t").val('');
		$.ajax({
			type: "POST",
			url: "parsetext.php",
			data: { str: str },
			cache: false,
			success: function(html) {
				$("#mbox").append(html);
			}, 
			error:function(html) {
				//alert("Failed");
			}
		});	
	}
});
});
</script>

Parsing the Smiley

To parse the message and get the smiley I have made a function called parseString() which will check for any smiley shortcode and replace it with its smiley image.

function parseString($string ) {
	$my_smilies = array(
        ':aln' => '<img src="images/alien1.png" alt="" />',
	':thk' => '<img src="images/annoyed.png" alt="" />',
	':ang' => '<img src="images/angel.png" alt="" />',
	':slp<' => '<img src="images/zzz.png" alt="" />',
	':blnk' => '<img src="images/blanco.png" alt="" />',
	':zip' => '<img src="images/zip_it.png" alt="" />',
	':bor' => '<img src="images/boring.png" alt="" />',

    );

	return str_replace( array_keys($my_smilies), array_values($my_smilies), $string);
}

Returning the parsed message back to the index page.
$str = stripslashes( $_POST["str"]);
echo '<strong>me: </strong> '.parseString($str).'<br>';

Display the parsed message to the chat message box
success: function(html) {
    // append the message in this section
    $("#mbox").append(html);
 },

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

I hope this tutorial will help you to make your own custom smileys All your comments/suggestions are welcome.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

shivasurya on

amazing and simple article!
at first i was applying the function just using a class in my web pages …..that made many mess up !
but this one is very simple and working perfectly

Reply
Micky on

This is great.. thank you for such amazing tutorial

Reply
Shahrukh Khan on

thank you.

Reply
Marc on

Are you fr**ing kidding me?!
That is absolutely amazing!!
Thank you so much for this tutorial! It helped me out a lot!!
God bless you!!
Thank you!

Reply
Shahrukh Khan on

ha ha .. I hoped it fu**ing helped you. 🙂

Reply
https://phienraovat.com/ on

I was wondering if you ever thought of changing the structure of your site?
Its very well written; I love what youve got to say. But maybe you could a
little more in the way of content so people could connect with it better.

Youve got an awful lot of text for only having one or 2 images.

Maybe you could space it out better?

Reply
Shahrukh Khan on

thanks for your valuable feedback. i will surely think about it. best of luck.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.