/webchat

Web Chat app made with NodeJS + Elm

Primary LanguageElm

Web Chat

Tech: NodeJS and Elm

Play right away

  1. Boot it up with docker-compose

    docker-compose build
docker-compose up

  2. Open http://localhost:8085 in your browser.

Features

  • read chat as anonymous user
  • log in / register using name+password, then chat with others
  • communication: GraphQL
    • Query: getting chat state, check session based on cookie
    • Mutation: logIn, logOut, addMessage
    • and Subscription: chat updates
  • frontend/UX: multiple messages of the same author in a row are grouped within 5 minutes
  • frontend: posted links are clickable
  • frontend: every person gets a randomized avatar!
  • backend/database: limit message count with removal batching

Possible improvements

  • Secure HTTP
  • database migrations
  • frontend: bundle JS code into one file
  • backend: detecting and closing broken connections
  • backend: store session not in-memory but in database so server restart wouldn't log out users
  • frontend UX: better indications about connection status
  • timezones need some care
  • build: reduce size of Docker downloads
  • backend/GraphQL: get from DB only the query-specified fields

Development

All env vars are defined in /backend/src/environment.ts. dotenv is imported so you can create /backend/.env file changing the defaults.

Backend

cd /backend
set NODE_ENV=development
npm run start

To generate Elm code for GraphQL API based on backend definitions you can launch backend in development environment and let the elm-graphql introspect for a schema:

cd /backend
npm run start
npm run gen_graphql_api  # on another command line

Frontend

Prerequisites: dotnet script, Elm 0.19.1

  1. Build

For Windows it is:

cd /frontend
build_watch.bat

or

cd /frontend
dotnet script build.csx -- build watch debug
  1. Host /frontend/public directory. The easiest way is to use backend in development mode.

Production

Prerequisites: PostgreSQL

Backend

cd /backend
set NODE_ENV=production
npm run build

Frontend

cd /frontend
dotnet script build.csx -- build