upCHAT is a vanillajs code centric, browser as a platform, instant messaging client/server web application.

Featuring

• Multiple chat rooms
• Media and link urls (image, audio, video, youtube)
• Visual and audio alerts (eg when focused away from tab)
• Mobile and desktop friendly
• Supports multiple tabs
• End-to-End Zero-knowledge encryption (optional)

Design

• Vanillajs code centric
• Simple thin framework
• Webpack compiled
• Messaging server

Setup requires two parts.

• a client application
• and the server service

Client Application

setup

$ git clone https://github.com/technomada/chat-app.git

$ cd chat-app

$ npm i

$ cp config-EXAMPLE.js dist/config.js   ... you'll edit this file to match your server settings.

build

$ npx h2js build

run

$ python -m http.server --directory ./dist   (or your fav local http server)

Browse to: http://localhost:8000

Backend Server

This application uses a "spaces server" to sync messages.

install server

$ git clone https://github.com/technomada/spaces-server.git

$ cd spaces-server
$ npm i

run server

$ npm start

(be sure to set the dist/config.js file to match your backend server address)

Using The Application

Session A: Open the chat in a browser, click the bottom of the page, type a message and press enter to send.

Session B: On a separate device or different browser on the same device open the chat and do the same.

change chat space

Click the gear icon in the bottom right, change the room id, click the gear again to close the settings section. Note: participants must be set to the same room id in order to exchange messages.

media

The chat system supports the display of media.

images

paste images urls

eg https://duckduckgo.com/assets/about/hiker.svg

audio

paste audio urls

eg https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Lobo_Loco/Good_Old_Organ_Ice/Lobo_Loco_-_04_-_Childhood_Time_-_Long_ID_1021.mp3

video

paste video file urls

eg http://giphygifs.s3.amazonaws.com/media/n988gduPMFC8w/giphy.mp4

youtube

paste youtube page urls.

eg https://www.youtube.com/watch?v=jNQXAC9IVRw

urls

eg try https://duckduckgo.com search engine.

Distribution

Copy the contents of dist/* to a live server.

Bonus

Add a message sound (when away from the page) create a message.mp3 audio file in the dist folder.

Encryption (optional)

ECDH/AES-GCM

Help/Next/TODO

• UI/Jank improvements iOS
• Security / End to End Zero-Knowledge Encryption
• Data cycle cleaning
• Review/test (iphone, edge, firefox, mobile/desktop, etc)
• Favicon
• Serviceworker/offline sync/push notification