Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lotas/chat-app
simple chat app
https://github.com/lotas/chat-app
demo nodejs socket vue-router vuejs2
Last synced: about 1 month ago
JSON representation
simple chat app
- Host: GitHub
- URL: https://github.com/lotas/chat-app
- Owner: lotas
- License: mit
- Created: 2017-02-11T19:59:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-26T22:16:53.000Z (almost 8 years ago)
- Last Synced: 2024-10-19T07:11:11.553Z (3 months ago)
- Topics: demo, nodejs, socket, vue-router, vuejs2
- Language: JavaScript
- Size: 475 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chat App: Backend and Web-Client
[](https://travis-ci.org/lotas/chat-app)
Pure javascript multi-user chat application.
Users are peristed in processes memory, messages are not.
## Backend:
Node.js + express + websockets handle users and messages.
Messages are not being persisted, and are delivered directly to the socket of the recepient.
If recipient socket is not available, *RecipientOffline* message is being sent back to sender.
List of registered users is being displayed and updated automatically. See [UserRegistry.js](chat/UserRegistry.js)
## Frontend
Frontend is written in Vue.js + bootstrap.
API interaction is being handled by [chat.js](public/chat.js) and uses `fetch`, `WebSocket`.
Application and components are defined in [app.js](public/app.js).
Some of the app state is persisted in `SessionStorage` (registered user info and chat info)
## Authentication
Upon registering new user, API will return `User` object with semi-random `user.authToken` that should be used later for authentication purposes.
Sending messages requires this `authToken` to be provided.
Unregistering user requires `authToken` also.
## Installation
```bash
$ yarn
# or
$ npm i
```
## Running
Start the server: and then open `http://localhost:1337` in browser.
```bash
$ node index.js
# or under custom port
$ PORT=34567 node index.js
# or with debug information visible in console
$ DEBUG=chat* node index.js
```
## Docker
Alternatively can be built using `docker`
```bash
# build container
$ docker build -t lotas/chat-app .
# run container
$ docker run -it -p 12345:1337 lotas/chat-app
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prestart: [email protected]
npm info lifecycle [email protected]~start: [email protected]
> [email protected] start /opt/app
> node index.js
Server is running at:
http://localhost:1337/
```
Browser should be opened using mapped port `12345`: `http://localhost:12345` (or docker-machine host instead of localhost)
## Testing
`eslint` checks syntax, `jasmine` runs simple specs against express app.
```bash
$ npm test
> [email protected] test chat-app
> eslint *.js chat public/*.js && jasmine **/*.spec.js
Started
.Server is running at:
http://localhost:1337/
........
9 specs, 0 failures
Finished in 0.091 seconds
```
# API
## Chat Message format
[ChatMessage.js](chat/ChatMessage.js)
|field|type|description|
|---|---|---|---|---|
|id|String|Unique id of the message|
|sentAt|Date|Date sent|
|status|Enum|0 - sent|
| | |1 - delivered|
| | |2 - offline|
|from|String|Sender id|
|to|String|Recipient id|
|text|String|Message text|
## Socket Message format
[SocketMessage.js](chat/SocketMessage.js)
|field|type|description|
|---|---|---|---|---|
|type|String|Socket message type:|
|||*Registered* - registration successful|
|||*ChatMessage* - new message|
|||*UserListChange* - users list changed|
|||*RecipientOffline* - user is offline|
|||*MessageDelivered* - acknowledge of the receival|
|payload|Object|message type dependent information|