mirumee / ariadne-graphql-chat-example

Simple Chat application using Ariadne and GraphQL Subscriptions

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ariadne GraphQL Chat Example

This repo contains an example of simple chat application demoing GraphQL subscriptions feature in Ariadne.

It has following Python dependencies:

  • Ariadne: GraphQL server
  • Starlette: ASGI application, WebSocket route
  • Uvicorn: ASGI and WebSocket app server
  • Broadcaster: Messaging between chat clients

Server uses Redis for messaging.

Example client was implemented with:

  • create-react-app: Project setup and dev tools
  • React 18: UI library
  • Apollo-Client 3.7: GraphQL client
  • GraphQL-WS 5.12: GraphQL WebSockets protocol

Chat in action

Demo

Installation

Clone repo on your computer:

git clone git@github.com:mirumee/ariadne-graphql-chat-example.git

In cloned directory build Python chat and Redis services using Docker Compose:

docker compose build

Move to react-client directory and install client's dependencies:

npm install 

Running

Run following command in cloned directory to start Docker Compose services:

docker compose up

If you get an error about bind for 0.0.0.0:8000 failing, check if there's nothing else running on port 8000.

GraphQL explorer can be found under the http://localhost:8000/graphql/ address.

To start client, move to react-client directory and run following:

npm run dev

Open a web browser of your liking and navigate to http://localhost:5173/ start chatting. Every browser tab will be separate chat session, so you can open as many as you like to experiment with multiple users.

Contributing

If you've found a bug with this repo or want to contribute an improvement, feel free to open an issue or pull request!

Also make sure you follow @AriadneGraphQL on Twitter for latest updates, news and random musings!

Crafted with ❤️ by Mirumee Software hello@mirumee.com

About

Simple Chat application using Ariadne and GraphQL Subscriptions

License:BSD 3-Clause "New" or "Revised" License


Languages

Language:JavaScript 43.1%Language:Python 38.3%Language:CSS 12.2%Language:HTML 3.9%Language:Dockerfile 2.5%