Chatyuk!

Chatyuk! (Let chat!) is very early in its development phase. It hopes to grow up to an easy to embed multi user chatroom for any webpage.

Installation

JS code

1. Run npm install to install required packages for development
2. Install browserify globally npm install browserify -g
3. Install watchify globally npm install watchify -g

Server component

Run vagrant up

Host setup

Due to the way some of the configurations are hardcoded now, you will need to add these following 2 settings to your /etc/hosts file.

127.0.0.1 chatyuk.com
127.0.0.1 conference.chatyuk.com

Run the code

1. Run npm run-script build-components to continuosly build the code.
2. In the root directory run python -m SimpleHTTPServer
3. Access the application at http://localhost:8000/public/chat.html

Run tests

1. Run npm run-script build-tests to continuosly build the tests.
2. In the root directory run python -m SimpleHTTPServer
3. Access the tests at http://localhost:8000/jasmine/SpecRunner.html
4. To run the acceptance tests npm run nightwatch

Integrating into a page

1. Add the application bundle to your page like and and initialize the Chatyuk app like so

<script type="text/javascript" src="path/to/scripts/bundle.js" >
<script type="text/javascript">
  Chatyuk.init(document.querySelector('#chatarea'), {display_mode: 'onpage'});
</script>

1. Chatyuk.init(element, config); config accepts the following keys

• display_mode
  • 'onpage', the chat window floats on an existing page
  • 'inpage', the chat window is embedded into the page

Features

1. Has basic emoticon support
2. Detects urls and embeds

• images and gifs
• youtube videos
• vidio videos
• links into clickable links into chat window.

3. Has different display modes

• in page - embed the chat window into a particular div on your page
• on page - a floating window that can be minimised a-la FB chat that can be easily added to any page

Todo

1. Logout if I reload the page or close the tab - ask for user confirmation ?
2. Figure out if using browserify for the main Chatyuk object will be a hinderance when integrating with websites that also use some form of modules
3. Create a script that will run both jasmine and acceptance test headless so that we can run it on a CI
4. Add source maps to help with debugging
5. Add sample on how to embed chatyuk on existing page
6. Improve default style

• Scrollbar in chat window is ugly
• On Firefox when display_mode = 'inpage', the messagepane is not expanded
• Removed unused CSS in chatyuk.css file

1. Remove hardcoded domain names from both client and server configurations
2. Websocket support
3. Fix bug with rejoining rooms without logging out.

• store the auth sessions in a cookie on the browser so that users can resume after reloading page
• converse.js had the same issue and they fixed it be removing strophe.muc.js, yikes
  • conversejs/converse.js#307

1. Implement sample server code to create a pre-bound session and integrate with comms.js

• Ruby lib to create prebound sessions
  • https://github.com/skyfallsin/ruby_bosh
• Django example
  • http://metajack.im/2008/10/03/getting-attached-to-strophe/
• Example of client connecting to prebound session
  • https://github.com/node-xmpp/node-xmpp-client/blob/master/examples/prebind.js
  • https://github.com/strophe/strophejs/blob/master/examples/prebind.html
• End obj - auto login to room based on auth from the server

1. Disable the ability for clients to connect apart from getting a prebound connection from the server
2. Admin controls

• control rooms from server, valid rooms vs auto created rooms

1. Refactor current stylesheets - either move everything to React components or leave in stylesheet or halhway house ?
2. Display roster
3. UI elements for presence (when people join or leave)
4. How would we set certain users as admins ?

• Identify them in the roster
• Give them the ability to ban users

1. Automatically kick abusive users out of rooms
2. Deps management - Use browserify-shim for strophe and linkifyjs. Stop changing code for strophe.
3. Emoji/Image picker
4. Add ability to set chat room name in chat window
5. When I am chatting, although scrolled up, scroll the chat window down
6. Add the "More chats below" ala Twitch
7. Figure out best way to handle customization => themes, emoticons
8. There is a DDOS vulnerability with LuaExpat 1.2 that ships with 14.04
9. HTTPs ?
10. Error handling for cases where the server sends back an error when you try to send a message
    • comms.js in onMessage, if there is an error the messageBody will be undefined as the body element is not in the response.

Development

Adding tests

1. Code should be acompanied with tests.
2. If it is a new user facing feature, add an acceptance test to tests/acceptance as well.
3. Add test file to jasmine/spec/ as per the structure of the actual code in the app folder. For e.g. tests for app/comms.js go into jasmine/spec/comms_spec.js, tests for app/components/message.jsx go into jasmine/spec/components/message_spec.jsx
4. Add a require entry to the relevant spec file in jasmine/spec/suite.js, it should be automatically picked up by browserify and included in the specs.

Adding code

1. Code entry points is app/chatyuk.jsx.
2. General code goes into app/
3. Add all UI related components into app/components.
4. Create directories to keep commmon files together.
5. Always use strict mode. Add "use strict"; to the top of your js or jsx files.
6. Ensure both your code and tests pass jshint by running npm run jshint before committing.

React.js component structure

• Chatbox (InPageChatbox, OnPageChatbox)
• ChatBoxHead
• MessagePane
• Message
• Message
• LoginForm/LoggedInBox
• MessageBox

Notes

• Parsing links from text - http://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links

Credits

This project has borrowed/used/copied code from:

1. Converse.js - https://conversejs.org/
2. Strophe.js
3. Twemoji awesome - http://ellekasai.github.io/twemoji-awesome/
4. Linkify - https://github.com/SoapBox/jQuery-linkify