PeerChat Client is a front-end application designed to facilitate private and direct peer-to-peer communication. Built using React, Socket.IO, Zustand, Ant Design (AntD), React Router, and SWR, it offers a polished and efficient user experience. While the project began as a personal endeavor completed in my free time, I think it has evolved into a well-developed tool that can serve as a foundation for future projects or code reuse.
- Messaging & File Sharing: Exchange messages and files directly with your peer, prioritizing privacy and speed.
- Video Chat: Make video and audio calls with no intermediary servers, ensuring your data stays private.
- Customizable Media Settings: Adjust your audio and video devices through an easy-to-use settings menu.
- Simple Room Management: Quickly create or join chat rooms without requiring login or personal details.
PeerChat Client integrates with the PeerChat Server, using Socket.IO for signaling and establishing peer-to-peer connections. It ensures a reliable communication experience without storing data on servers.
2024-12-06.04-31-31.mp4
Here’s a small list of features that caught my attention and were interesting to develop:
-
Perfect Negotiation Pattern: This pattern simplifies adding and removing tracks, as well as establishing connections between peers. It helps manage the connection lifecycle smoothly. MDN DOCS
-
File Transfer: Sending files over WebRTC is not straightforward. On the sender’s side, files are sliced into smaller chunks to be sent through the WebRTC data channel. On the receiver’s side, the chunks are reassembled to reconstruct the file. It’s easier said than done haha.
-
Handling Peer Disconnection: When a peer disconnects, the remaining peer needs to create a new offer, generate ICE candidates, and re-establish the connection.
-
Media Streams: Adding a MediaStream to an already established RTCPeerConnection is straightforward, but dealing with media device constraints and updating the stream when a device changes is more complex. Often, renegotiation is required—but thankfully, the perfect negotiation pattern helps a lot! :)
-
Integrating WebSockets with RTCPeerConnection: Creating a context and custom hooks to integrate WebSockets with RTCPeerConnection made the codebase much more readable and maintainable.
-
SSL Certificates: Since getUserMedia is only available in secure contexts, I had to generate self-signed certificates to enable it for my local development environment.
Clone the repo:
git clone https://github.com/galletafromjell666/peer-chat-client.git clientMove inside the repo:
cd clientInstall modules (pnpm is recommended)
pnpm installStart the development server
pnpm devEnable invalid certificates from localhost (required to access user media)
chrome://flags/#If the flag allow-insecure-localhost is not available please check the flags Temporarily unexpire MXXX flags
Login to Cloudflare:
pnpm wrangler loginCreate a new build
pnpm buildPublish to Cloudflare pages (Production)
pnpm wrangler pages deploy dist --project-name peer-chat --branch=main