niklaskorz / nkchat

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

nkchat

nkchat is a web-based chat application using modern technologies such as React, GraphQL and styled-components.

License

Licensed under the MIT license.

Setup requirements

• Docker (Windows, macOS, Ubuntu)
• Docker Compose (usually pre-installed by Docker, if not see here)

Setup

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

If you are on Windows, execute

$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:

docker-compose -p nkchat build
docker-compose -p nkchat up -d

nkchat will then be available at 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
• 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 API is used. You can inspect the GraphQL API by visiting http://localhost:9000/graphiql and clicking on the "Docs" button on the upper right corner.

Scalability and load balancing

Traefik 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:

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

Traefik will balance incoming traffic among the running server instances by using Weighted round robin by default.

You can inspect the running services and their health by accessing the Traefik dashboard at 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.

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