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

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

'pusherKey': YOUR PUSHER KEY HERE //required : open an account on http://pusher.com/ to get one
'authPath' : path to authentication scripts //required : more info at http://pusher.com/docs/authenticating_users

'friendsList' : path to friends list json //required :


        // json ex :
        
        {
        "133": ["Elvis","assets/elvis.jpg","http://html5-ninja.com"],
        "244": ["Kurt Cobain","assets/cobain.jpg","http://html5-ninja.com"],
        }

'serverPath' : path to server //required : path to server
'profilePage' : false or true //link to friend profile page setup fom json ex : ["Kurt Cobain","assets/cobain.jpg","path/to/profile"]
'onFriendConnect' : function(data){...} //event : trigger when friend connect & return ID
'onFriendLogOut' : function(data){...} //event : trigger when friend log out & return ID
'onSubscription' : function(data){...} //return members object

Security

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

▼▲

0 online

▼▲ x

◀ ▶