Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/niklaskorz/nkchat

A web-based chat application using modern technologies such as React, GraphQL and styled-components
https://github.com/niklaskorz/nkchat

apollographql docker graphql react styled-components traefik typescript

Last synced: about 1 month ago
JSON representation

A web-based chat application using modern technologies such as React, GraphQL and styled-components

Awesome Lists containing this project

README 

        
# nkchat



[![Build status](https://img.shields.io/gitlab/pipeline/niklaskorz/nkchat.svg)](https://gitlab.com/niklaskorz/nkchat/pipelines)



`nkchat` is a web-based chat application using modern technologies such as

React, GraphQL and [styled-components](https://www.styled-components.com/).



## License



Licensed under the [MIT license](LICENSE).



## Setup requirements



- Docker ([Windows](https://docs.docker.com/docker-for-windows/), [macOS](https://docs.docker.com/docker-for-mac/), [Ubuntu](https://docs.docker.com/install/linux/docker-ce/ubuntu/))

- Docker Compose (usually pre-installed by Docker, if not [see here](https://docs.docker.com/compose/install/))



## Setup



Clone the repository, enter the repository's directoy with a terminal.



If you are on Windows, execute

```powershell

$env:COMPOSE_CONVERT_WINDOWS_PATHS=1

```

if you are using Powershell or

```

set COMPOSE_CONVERT_WINDOWS_PATHS=1

```

if you are using cmd.



Then execute the following commands:

```sh

docker-compose -p nkchat build

docker-compose -p nkchat up -d

```



`nkchat` will then be available at [http://localhost:9000](http://localhost:9000).



## Browser compatability



The following browsers are tested and supported:

- Chrome 65+

- Firefox 58+

- Microsoft Edge with EdgeHTML 17+

- Safari 10+



In general, these include the last two major versions of all mainstream

browsers. Support for Internet Explorer is not planned. Opera and Vivaldi

should be working fine as they use the same browser engine as Chrome, but they

are not actively tested.



The layout is currently optimized for desktop screens and therefore hard to

use on mobile devices like smartphones.



## Features



- Register, log in and log out

- Create and join rooms

- Send and receive messages

- Switch between rooms

- List of room members is automatically updated on all subscribed clients when a new user joins the room

- Send messages that include links to YouTube or aluhga videos, or images

- Links in messages are automatically turned into clickable links thanks to [Linkify](https://github.com/SoapBox/linkifyjs)

- Multiline messages (line breaks are entered with Shift + Enter while Enter is used for sending a message)



## Sending links to videos or images



Links following these patterns will be embedded as videos:

- `https?://youtube.com/watch?v={videoId}`

- `https?://youtu.be/{videoId}`

- `https?://alugha.com/videos/{videoId}`



Links following these patterns will be embedded as images:

- `*.png`

- `*.jpe?g`

- `*.webp`

- `*.bmp`

- `*.tga`



## GraphQL API



For querying, mutating and subscribing to data, a

[GraphQL](https://graphql.org/learn/) API is used. 

You can inspect the GraphQL API by visiting

[http://localhost:9000/graphiql](http://localhost:9000/graphiql) and clicking

on the "Docs" button on the upper right corner.



## Scalability and load balancing



[Traefik](https://docs.traefik.io/) is used for routing and load balancing the

included microservices, i.e. the chat client and the GraphQL server.



You can start the server with e.g. four server instances by executing:

```sh

docker-compose -p nkchat up -d --scale server=4

```



Traefik will balance incoming traffic among the running server instances by

using [Weighted round robin](https://en.wikipedia.org/wiki/Weighted_round_robin)

by default.



You can inspect the running services and their health by accessing the

Traefik dashboard at [http://localhost:8080/dashboard](http://localhost:8080/dashboard).



When a chat message reaches a server instance, the other server instances

and their subscribed WebSocket clients are notified using the high-performance

[NATS messaging server](https://github.com/nats-io/gnatsd).



## Possible features and optimizations for future versions



The following are optimizations and features I would implement if this was to

turn into a real product:

- Markdown support in messages

- Pre-loading the size of sent images to cache the dimensions and size the messages accordingly even before the image is loaded by the browser

- Serverside-checking of links for metadata like title or schema.org data to generate a link preview beneath the message

- Password protection for rooms

- Invite-only rooms with short-lived invite links generated by the room's owner

- Notifications for new messages, even when a room is not open (push notifications)

- Possibility to leave a room or to kick users out of a room as the owner

- Possibility to delete or rename a room

- Possibility to rename yourself as a user, maybe even with separate names per room

- Lazy loading of older messages, right now the whole chat history is loaded when the user opens a room

- Touch-friendly, responsive layout for an optimal mobile experience