html5-ninja.com Pusher chat , a facebook like chat jQuery plugin, using Pusher API

If you like Pusher Chat , share our link HTML5 Ninja or better, purchase us something :) , thx


To start the demo , first connect as.. click on link to connect & open at least 2 account in different window :

Elvis Kurt Cobain Hendrix Satan God Jesus Homer Simpson Roger Snoopy
Please wait until one of testers leaves the demo , or download the plugin & try it on your own host , thx

Try it your self is better

files to includes

<link href="css/chat-style.css" rel="stylesheet">
<script src="http://js.pusher.com/1.12/pusher.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.pusherchat.js" type="text/javascript"></script>

Default setup

            
            $.fn.pusherChat({
                'pusherKey':'YOUR PUSHER KEY',  // required : open an account on http://pusher.com/ to get one
                'authPath':'server/pusher_auth.php', // required : path to authentication scripts more info at http://pusher.com/docs/authenticating_users
                'friendsList' : 'ajax/friends-list.json', // required : path to friends list json 
                'serverPath' : 'server/server.php' // required : path to server
            )}
        

HTML markup structure

You can edit content & style but don't change the structure or id & class name.

<div id="pusherChat">
<div id="membersContent">
<span id="expand"><span class="close">&#x25BC;</span><span class="open">&#x25B2;</span></span>
<h2><span id="count">0</span> online</h2>
<div class="scroll">
<div id="members-list"></div>
</div>
</div> <!-- chat box template -->
<div id="templateChatBox">
<div class="pusherChatBox">
<span class="state">
<span class="pencil">
<img src="assets/pencil.gif" />
</span>
<span class="quote">
<img src="assets/quote.gif" />
</span>
</span>
<span class="expand"><span class="close">&#x25BC;</span><span class="open">&#x25B2;</span></span>
<span class="closeBox">x</span>
<h2><a href="#" title="go to profile"><img src="" class="imgFriend" /></a> <span class="userName"></span></h2>
<div class="slider">
<div class="logMsg">
<div class="msgTxt">
</div>
</div>
<form method="post" name="#123">
<textarea name="msg" rows="3" ></textarea>
<input type="hidden" name="from" class="from" />
<input type="hidden" name="to" class="to"/>
<input type="hidden" name="typing" class="typing" value="false"/>
</form>
</div>
</div>
</div>
<!-- chat box template end --> <div class="chatBoxWrap">
<div class="chatBoxslide"></div>
<span id="slideLeft"> <img src="assets/quote.gif" />&#x25C0;</span>
<span id="slideRight">&#x25B6; <img src="assets/quote.gif" /></span>
</div>
</div>

Settings

Security

You are a big boy ! create your own security strategy on pusher_auth.php & server.php

0 online

x