--- layout : 'default' css : 'chatroom' ignored : true title : 'Chatroom' description : 'A chatroom allows users to communicate with each other in real time.' type : 'UI Module' --- <%- @partial('header') %>

Usage

Initializing a chat room

Using chatroom requires an account with pusher, a company that provides turn-key web socket access.

// modify these for your api settings received from pusher $('.ui.chatroom') .chatroom({ key : 'f812089c851866cc2f3e', endpoint: { authentication : '/chat/authentication', message : '/chat/send' } }) ;
Joining chat
Loading
Send

Settings

Chatroom Settings

Chatroom settings modify the chatroom's behavior

Setting Default Description
key false Pusher API key
key presence-chat Channel to use. Pusher requires chatrooms to use channels beginning with presence-
scrollArea 9999 If a user is this many pixels away from bottom of the page it will automatically scroll when a message is receieved
customEvents {} An object containing custom events and functions to use with pusher
endpoint
{ message: false, authentication: false }
Endpoints used to communicate authentication and chat messages
partingMessages false Whether to display messages when a user has joined chat
userCount true Whether to display the current logged in user count

Callbacks

Callback settings specify a function to occur after a specific behavior.

Setting Context Description
onJoin(user) Chatroom Called after each user joins a chat room

DOM Settings

DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace chatroom Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector : { icon : '.icon' }
className
className : { active : 'active', hover : 'hover', loading : 'loading' },

Debug Settings

Debug settings controls debug output to the console

Setting Default Description
name Chatroom Name used in debug logs
debug True Provides standard debug output to console
performance True Provides performance output to console
verbose True Provides ancillary debug output to console
selector
selector : { userCount : '.actions .message', userListButton : '.actions .list.button', expandButton : '.actions .expand.button', room : '.room', userList : '.room .list', log : '.room .log', message : '.room .log .message', author : '.room log .message .author', messageInput : '.talk input', messageButton : '.talk .send.button' }
className
className : { expand : 'expand', active : 'active', hover : 'hover', down : 'down', loading : 'loading' }
error
error: { method : 'The method you called is not defined', endpoint : 'Please define a message and authentication endpoint.', key : 'You must specify a pusher key and channel.', pusher : 'You must include the Pusher library.' }