A peer-to-peer chat app that is serverless, decentralized, and ephemeral

Overview

Chitchatter

Chitchatter logo

Logo provided by @ramyashreeshetty

Chitchatter is a free (as in both price and freedom) communication tool. It is designed with security and privacy in mind. To that end, it is:

  • Fully open source (licensed under GPL v2)
  • Peer-to-peer
    • Whenever possible, otherwise Open Relay is used to ensure reliable peer connection
  • Encrypted (via WebRTC)
  • Serverless
  • Ephemeral
    • Message content is never persisted to disk
  • Decentralized
    • There is no API server. All that's required for Chitchatter to function is availability of GitHub for static assets and public WebTorrent and STUN/TURN relay servers for establishing peer communication.
  • Self-hostable

Chitchatter was bootstrapped with Create React App. The secure networking magic would not be possible without Trystero.

How to use it

Open https://chitchatter.im/ and join a room to start chatting with anyone else who is in the room. By default, room names are random UUIDs that are generated client-side. To securely communicate with someone, it is recommended to join one of these randomly-generated rooms and share the URL (via the " 🔗 " button at the top of the page) to whoever you wish to communicate with via a secure medium of your choosing (such as Burner Note or Yopass). Your static user name will be presented to you, and it would be good share that with who you will be chatting with so they know they're talking to you.

Features

  • Multiple peers per room (limited only by the number of peer connections your browser supports).
  • The number displayed at the top-right of the screen shows how many peers you are connected to. Your peers are the only ones who can see your message.
  • Markdown support via react-markdown.
    • Includes support for syntax highlighting of code.
  • Multiline message support (hold Shift and press Enter).
  • Dark and light themes

Anti-features

  • Messages are never persisted to disk. When you leave a peer room, messages are cleared from memory and cannot be retrieved.
  • Chitchatter is an entirely client-side communication app. It uses external general-purpose WebTorrent and STUN/TURN servers as for necessary communication, but there is no Chitchatter API server.
  • No analytics, tracking, or telemetry.
  • This is a community-driven, unfunded project that makes no money. This is necessary to prevent corporate influence from harming users.

Why another chat app?

There is no shortage of user-friendly chat apps available, but most of them rely on a central service to facilitate communication. It is difficult to trust these central services, as commercial interests and government pressure can compel service operators to work against the best interest of the users. Even when when user data is handled in good faith by service operators, the possibility remains that encrypted data held at rest may be decrypted against the user's will.

Chitchatter designs around these concerns by not having a central service operator and never storing communication data. Some services are required to establish a connection between peers, but the app relies on direct peer-to-peer communication as much as possible. Any services that are used by the app have no association with Chitchatter project and are publicly available for all to use.

Chitchatter is inspired by Cryptocat and Tox.

Veracity

The core of Chitchatter's security model is the fact that it is fully open source. You are free (and encouraged) to fully audit the project source code and infrastructure. Not only is the source code available under the terms of the GPL, but all build logs are publicly accessible as well.

If you would like to verify that the app hosted at https://chitchatter.im/ is the one that is hosted on GitHub, you can use dig:

$ dig chitchatter.im

; <<>> DiG 9.18.1-1ubuntu1.1-Ubuntu <<>> chitchatter.im
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 61332
;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 65494
;; QUESTION SECTION:
;chitchatter.im.                        IN      A

;; ANSWER SECTION:
chitchatter.im.         231     IN      CNAME   jeremyckahn.github.io.
jeremyckahn.github.io.  231     IN      A       185.199.111.153
jeremyckahn.github.io.  231     IN      A       185.199.110.153
jeremyckahn.github.io.  231     IN      A       185.199.109.153
jeremyckahn.github.io.  231     IN      A       185.199.108.153

To examine the static assets that are served to end users, you can audit the gh-pages branch.

Project status

Chitchatter is in MVP state. A lot of basic features and UX polish are missing, but much is planned for the future.

Chitchatter is an open source project, so community contributions and support are welcome! If there's something you'd like to see changed in the project, please open an issue or Pull Request on GitHub and share your ideas.

Project roadmap

This is a non-exhaustive list of things that are in Chitchatter's future:

  • Password-protected rooms
  • Voice calling
  • Video calling
  • File sharing
  • Indicators for when others are typing
  • Transcript backfilling for peers who join a room after there has already been activity

See the full ticket backlog here.

Environments

Available Scripts

In the project directory, you can run:

npm dev

Runs the entire stack (client + WebTorrent tracker) locally.

npm start

Runs the front end app in the development mode. Uses public WebTorrent trackers.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Self-hosting

Chitchatter is designed to be forked and self-hosted. If you would like to change pairing or relay server configuration, or you simply prefer to control your own builds and versions, just fork this repo and follow the steps below.

Necessary steps after forking

Assuming you are hosting Chitchatter on GitHub Pages:

  1. Change the homepage property in package.json to whatever URL your Chitchatter instance will be hosted from. This will be something like https://github_user_or_org_name.github.io/chitchatter/.
  2. Define a DEPLOY_KEY GitHub Action secret (at https://github.com/github_user_or_org_name/chitchatter/settings/secrets/actions). See the docs for peaceiris/actions-gh-pages for more information.

Deployment

On GitHub

When hosted on GitHub Pages and the configuration above has been done, the Production environment is updated when the remote main branch is updated.

On non-GitHub hosts

Build the app with npm run build, and then serve the build directory. Any static file serving solution should work.

Runtime configuration

Explore the files in src/config to modify pairing and relay server configuration.

Comments
  • Show notifications for new messages

    Show notifications for new messages

    When a user receives a message and the Chitchatter room is not in focus, present an operating system-level notification to inform the user that there is a new message. This functionality should be off by default, but able to be enabled via a persisted user setting.

    enhancement good first issue 
    opened by jeremyckahn 14
  • Design logo

    Design logo

    Currently Chitchatter uses the default Create React App logo: https://github.com/jeremyckahn/chitchatter/blob/develop/public/logo512.png

    The project needs something more distinctive and unique.

    enhancement help wanted good first issue 
    opened by jeremyckahn 9
  • Having problem on firefox browser

    Having problem on firefox browser

    Discussed in https://github.com/jeremyckahn/chitchatter/discussions/35

    Originally posted by MohammadTaseenKhan October 9, 2022

    Recently I am facing a new problems like when i use Firefox browser i cant send any message, even cant receive any message even no notification coming to me

    Sending Message: image

    Receiving message: image

    It doesn't even showing how many numbers of peers are connected

    image

    same as well this also

    image

    https://chitchatter.im/public/85ccdfc7-b992-411d-9d98-0a5c2781138e

    opened by MohammadTaseenKhan 4
  • feat: [#7] Play a sound on new message

    feat: [#7] Play a sound on new message

    Hey, here my first PR for this issue.

    I'm not really sure about usage of useState or useRef l36-37 in Room.tsx (still learning React and good practices).

    And i don't know how to test correctly this functionality :/

    Summary:

    • add sound in public/sounds/new_message.aac
    • add eventListeners in ShellContext to kow if currentTab is in focus or not
    • add PlaySoundOnNewMessage default True to userSettings
    • play sound on new message only if currentTab is not in focus and PlaySoundOnNewMessage is True
    opened by Flaykz 4
  • feat: [#14] Display peer list

    feat: [#14] Display peer list

    Summary:

    • Addition of a drawer on the right side on the UI for peer list
    • Click on number of peers to show this list

    I don't think that it's a good solution but i don't know much mui. Do you have some ideas about components to use and where to put them ?

    opened by Flaykz 3
  • Play a sound for new messages

    Play a sound for new messages

    When a user receives a message and the Chitchatter room is not in focus, play a sound to inform the user that there is a new message. This functionality should be off by default, but able to be enabled via a persisted user setting.

    enhancement good first issue 
    opened by jeremyckahn 3
  • Feat/add qr code support

    Feat/add qr code support

    Description

    This PR adds a QRCode button to the navbar opening a dialog which displays a QRCode using react-qrcode-logo. This QRCode is copy and save-able image image image image

    opened by krayste 1
  • Add end adornment icon to refresh the room uuid()

    Add end adornment icon to refresh the room uuid()

    Description

    This change makes it so you can refresh the uuid() of the room before creating a room. Doesn't have much practical utility but since there's room in the textfield for it, why not? Users might want to shuffle their room IDs a few times before creating a room

    This is also mobile compatible to 375px width (iPhone SE) image image

    opened by krayste 1
  • File sharing is broken on Android

    File sharing is broken on Android

    file sharing doesn't seem to work from/to my android device. I tested it on 4 different browsers (Chrome, Brave, Duckduckgo, Firefox).

    Originally posted by @butera-simone in https://github.com/jeremyckahn/chitchatter/issues/72#issuecomment-1356894667

    opened by jeremyckahn 4
  • Combine audio/video streams

    Combine audio/video streams

    Currently, audio and video streams are handled separately. This comes at a possible performance cost and blocks #77. The streams should be combined so that audio is outputted via <video /> elements that provide audio UI controls.

    enhancement 
    opened by jeremyckahn 0
  • Easier sharing of private rooms

    Easier sharing of private rooms

    Should be able to send a private room URL which includes the password, such that one doesn't need to type in the room password. This is already an established pattern with zoom calls.

    This can be contained purely in the local javascript layer by putting the password in the part of the URL after the hash #, since anything after hash is not sent to the server in the HTTP request.

    If there's a concern about the URL being too readable, potentially a hash of the password is in the URL, rather than the password itself, and manually entered passwords are internally hashed to the same value before being passed to Trystero api call.

    enhancement help wanted 
    opened by NasalDaemon 8
  • Height of room window too high

    Height of room window too high

    When in safari on an iPhone 11, the content when I'm in a room does not fit the screen. I can either scroll down to the input field it up to the first message. I cant see both at the same time

    bug help wanted good first issue 
    opened by TikoyX 1
Owner
Jeremy Kahn
I fight for the users! 💪
Jeremy Kahn
A simple Prometheus (aggregated) push gateway allowing stateless/serverless workloads, ephemeral and batch jobs to easily expose their metrics.

Serverless Prometheus (aggregated) Push Gateway A simple Prometheus (aggregated) push gateway allowing stateless/serverless workloads, ephemeral and b

Adam Janiš 17 Dec 4, 2022
Quiet Peer-to-Peer Donations

Quiet Peer-to-Peer Donations

Arcade City 7 Jun 6, 2022
An Opensource Peer-to-peer Social Network with Zero-Knowledge-Proof based authentication.

HexHoot This is an attempt to create an Opensource Peer-to-peer Social Network with Zero-Knowledge-Proof based authentication. The objective is to dem

Zenin Easa Panthakkalakath 6 Dec 28, 2022
A Gun DB extension that ships secure* ephemeral messaging between Gun peers using Bugout, secured by Gun's SEA suite

Bugoff A Gun DB extension that ships secure* ephemeral messaging between Gun peers using Bugout, secured by Gun's SEA suite About Bugoff creates an SE

Daniel Raeder 14 Nov 12, 2022
A simple example repo that demonstrates the dynamic ephemeral storage solution for AWS Lambda outlined in the corresponding Storyboard Dev Blog post.

AWS Lambda Dynamic Ephemeral Storage Example A simple example repo that demonstrates the dynamic ephemeral storage solution for AWS Lambda outlined in

Storyboard.fm 3 Jun 14, 2022
Learn Web 2.0 and Web 3.0 Development using Next.js, Typescript, AWS CDK, AWS Serverless, Ethereum and AWS Aurora Serverless

Learn Web 2.0 Cloud and Web 3.0 Development in Baby Steps In this course repo we will learn Web 2.0 cloud development using the latest state of the ar

Panacloud Multi-Cloud Internet-Scale Modern Global Apps 89 Jan 3, 2023
A Serverless GraphQL Sample project using Apollo and Serverless Framework with TypeScript and Webpack.

Serverless GraphQL Boilerplate This is a base project with a structure that includes Serverless Framework, Apollo, TypeScript and Webpack. It can be d

Ravi Souza 5 Aug 23, 2022
AWS Lambda & Serverless - Developer Guide with Hands-on Labs. Develop thousands line of aws lambda functions interact to aws serverless services with real-world hands-on labs

AWS Lambda & Serverless - Developer Guide with Hands-on Labs UDEMY COURSE WITH DISCOUNTED - Step by Step Development of this Repository -> https://www

awsrun 35 Dec 17, 2022
This application provides the CDK project and a frontend that allows you to build a serverless chat application based on API Gateway's WebSocket-based API feature.

Serverless chat application using ApiGateway Websockets This project lets you provision a ready-to-use fully serverless real-time chat application usi

AWS Samples 60 Jan 3, 2023
The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore.

The Chat-in The Chat'Inn is a simple and minimal realtime chat application whose database is powered by firebase and firestore. The frontend part is c

Aswin Asok 11 Aug 8, 2022
Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files.

Obsidian Chat View Plugin Chat View let's you quickly and easily create elegant Chat UIs in your Markdown Files. Usage Every chat message must be pref

Adifyr 96 Dec 27, 2022
Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Omnichannel Live Chat Widget UI Components @microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own

Microsoft 14 Dec 15, 2022
Replaces Youtube Chat with Destiny.gg chat.

A lightweight extension that replaces the native Youtube Live chat with an embeded destiny.gg chat. Note: This is in no way affiliated with Destiny.gg

Daniel Alas 8 Jul 27, 2022
O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.

Web-Chat Introdução O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenc

BiaGrenzel 5 Oct 5, 2022
Lenster is a decentralized, and permissionless social media app built with Lens Protocol 🌿

Lenster Decentralized, and permissionless social media app ?? lenster.xyz » Discord • Issues ?? About Lenster Lenster is a decentralized, and permissi

Lenster 11.8k Jan 7, 2023
Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩‍🚀

Tailwind CSS Group Classes Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes ??‍?? Using with a

Mark Mead 5 Sep 15, 2022
Suck a DAG out of a peer in the IPFS network.

dagula Suck a DAG out of a peer in the IPFS network. Install npm i dagula Usage import { Dagula } from 'dagula' import { getLibp2p } from 'dagula/p2p

Alan Shaw 11 Nov 2, 2022
An on-demand peer tutoring platform by students, for students.

OURFinals An on-demand peer tutoring platform by students, for students. Database The prisma/ folder contains: migrations/: Past database migrations (

Aditya Banerjee 3 Jan 6, 2022
A robust, minimal-server-interaction API for peer routing in the browser

Robust, minimal-server-interaction peer routing in the browser What is this? Membrane takes signalling to the browser, creating living peer networks.

Elijah Bodden 13 Jan 6, 2023