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.
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
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