Coder Social home page Coder Social logo

devetechmavens / chatyuk Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mohangk/chatyuk

0.0 2.0 0.0 1.28 MB

A simple React.js based web chat room that should be easily embed-able on a HTML page

JavaScript 79.22% Lua 2.78% HTML 10.51% Shell 0.18% CSS 7.31%

chatyuk's Introduction

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.

Crappy screenshot

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(parentElement, 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 In both cases we create a new child div to the parentElement and use that as the container for Chatyuk. This is to ensure that any children are not replaced by React.render.

  • bosh_service_url

  • chat_server

  • conference_server

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.
  1. 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. If there is a presence conflict don't indicate that you have joined the room
RECV:  <body xmlns:stream='http://etherx.jabber.org/streams' xmlns='http://jabber.org/protocol/httpbind' sid='c8883034-41b2-439f-88f8-1fc41a418ebf'><presence xmlns='jabber:client' type='error' to='[email protected]/54e7a54b-22e2-4f6b-9add-c5d09c6ce52b' from='[email protected]/test'><error type='cancel' code='409'><conflict xmlns='urn:ietf:params:xml:ns:xmpp-stanzas'/></error><x xmlns='http://jabber.org/protocol/muc'/></presence></body>
  1. Do a better job detecting when a response from the server is an error. Now we quietly fail.
"SENT: " "<body rid='358520323' xmlns='http://jabber.org/protocol/httpbind' sid='fcc2b84a-4824-4545-ab4f-e328a5308cc2'><message to='[email protected]' from='[email protected]/20f3adff-591a-4ec4-a73b-61cf15b8552c' type='groupchat' id='1' xmlns='jabber:client'><body xmlns='jabber:client'>asdf</body><x xmlns='jabber:x:event'><composing/></x></message></body>" bundle.js:200:6
"RECV: " "<body sid='fcc2b84a-4824-4545-ab4f-e328a5308cc2' xmlns:stream='http://etherx.jabber.org/streams' xmlns='http://jabber.org/protocol/httpbind'><message type='error' to='[email protected]/20f3adff-591a-4ec4-a73b-61cf15b8552c' from='[email protected]' id='1' xmlns='jabber:client'><error type='cancel'><not-acceptable xmlns='urn:ietf:params:xml:ns:xmpp-stanzas'/></error></message></body>"
  1. When error-ed (login more then once), logout should still work.
  2. Update documentation
  3. Remove hardcoded domain names from both client and server configurations (we should be able to leave them empty)
  4. Chatyuk should expose an API to set a username and join a chatroom by default
  5. Notify user when there is a chat directed at her
  6. Notify in title of window
  7. Look at using chrome notifications if available ?
  8. Session management issues
  9. Instead of setting 3 cookies, only set 1 for session management
  10. Session management is flaky at times, seen more then one chatyuk cookie for the same session
  11. When rejoining rooms on reloadig a page, we loose all messages from the room. Maybe there is a way to get the prior messages ?
  12. Create a script that will run both jasmine and acceptance test headless so that we can run it on a CI
  1. Add source maps to help with debugging
  2. 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. Websocket support
  2. Figure out why converse.js dumped the muc plugin ?
  1. Implement sample server code to create a pre-bound session and integrate with comms.js
  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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.