https://github.com/o0101/websocket_chat_app_homework
A VERY simple chat app, with a single room, unlimited members, built using vanilla JS (no frameworks) to the spec of a homework assignment.
https://github.com/o0101/websocket_chat_app_homework
app chat full-stack nodejs websocket
Last synced: about 1 year ago
JSON representation
A VERY simple chat app, with a single room, unlimited members, built using vanilla JS (no frameworks) to the spec of a homework assignment.
- Host: GitHub
- URL: https://github.com/o0101/websocket_chat_app_homework
- Owner: o0101
- Created: 2020-06-10T03:53:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T01:42:52.000Z (over 3 years ago)
- Last Synced: 2025-04-02T05:43:40.799Z (about 1 year ago)
- Topics: app, chat, full-stack, nodejs, websocket
- Language: JavaScript
- Homepage: http://boogeh.com
- Size: 387 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat App Homework
A very simple chat app in Node.JS, JavaScript, HTML and CSS. Does not use any framework.
Server is a very simple websocket broadcast server that also tracks usernames to prevent impersonation and conflicts.
Client is a simple JS app that works cross-browser and provides a nice user interface.
# Running
Clone this repo and
```console
npm i && npm test
```
Then visit http://localhost:8080 in your browser on the same machine.
Alternately, [see the demo](http://boogeh.com)
# Running tests
To run tests visit [the test page](http://boogeh.com/runtests.html)
Or, if you're running locally, it's http://localhost:8080/runtests.html
**Note** to pass the tests connect to a server by yourself. Any other connection will cause the test counts to deviate from expectations.
# Features
- [X] Chat page
- [X] Settings page
- [X] Responsive layout across all devices
- [X] Works on latest Chrome, Firefox and Safari
- [X] Chat tab blinking title with unread count
- [X] Working settings for username, color scheme, clock display, and send hotkey.
- [X] Design based on mockups
- [X] No automatic code generation tools used
- [X] Clean, small, modular code
- [X] Working code
- [X] Tests main functionality of members joining and leaving, and sending messages
# Things that are different
- No optional features. My focus is keeping it simple.
- No React, no framework at all. I requested this and it was okayed.
- No CSS preprocessors. CSS here is very simple.
- No TypeScript. I used `tsc --checkJs` to check for issues and fixed any.
- No complex state management. Just deep merge new state with existing.
- No socket.io. The server is a hugely simple websocket server. Client reconnects with exponential backoff.
# Development Philosophy
In this project I tried to do the following things:
- Keep it simple
- Merge state updates into a single state object
- render the whole view tree from that state object on every change.
In some cases I needed to break that simple model and where I've done that, I've tried to make it clear, such as with `drawLatestMessage()` which was a performance improvement and bug fix over redrawing the whole tree on every arriving message.
# Development Notes
- Most bugs that occured were not type related bugs but due to cross-browser differnces in CSS, layout.
- Adding explicit types would only lengthen this homework assignment for no good reason.
- Adding React would also be unnecessary. This is a simple app, with small components and only 2 routes. There's no need for added complexity. Also, it was related to me that 'no framework would be best IMO'.
- Adding CSS preprocessors would also be unnecessary, the CSS is very simple.