https://github.com/v0id-user/wasmchannel
Experimental app using Rust+Wasm on Next.js frontend & Cloudflare Workers backend, featuring a custom binary protocol.
https://github.com/v0id-user/wasmchannel
binary cloudflare nextjs protocol queue real-time rust wasm websocket workers
Last synced: about 2 months ago
JSON representation
Experimental app using Rust+Wasm on Next.js frontend & Cloudflare Workers backend, featuring a custom binary protocol.
- Host: GitHub
- URL: https://github.com/v0id-user/wasmchannel
- Owner: v0id-user
- License: mit
- Created: 2025-05-23T17:57:38.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-17T04:20:11.000Z (about 1 year ago)
- Last Synced: 2025-06-17T04:28:50.323Z (about 1 year ago)
- Topics: binary, cloudflare, nextjs, protocol, queue, real-time, rust, wasm, websocket, workers
- Language: WebAssembly
- Homepage: https://wasm,channel
- Size: 1.18 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WasmChannel 🦀
**Experimental real-time chat application using Rust+WASM on Cloudflare Workers & Next.js frontend, featuring a custom binary protocol.**
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://www.rust-lang.org/)
[](https://nextjs.org/)
[](https://workers.cloudflare.com/)
[](https://webassembly.org/)
[](https://github.com/v0id-user)
## Overview
WasmChannel combines the performance of WebAssembly with the scalability of Cloudflare's edge infrastructure to create a high-performance real-time chat experience in an intentionally over engineered distributed system.
### Key Features
- **Real-time messaging** with WebSocket connections
- **Custom binary protocol** with LZ4 compression
- **WebAssembly performance** for message processing
- **Edge-first architecture** on Cloudflare Workers
- **Authentication** via Better Auth
- **Message reactions** with live updates
- **Typing indicators** and user presence
- **Persistent storage** with Cloudflare D1
- **Optimized bandwidth** usage through compression
## Architecture
### Core Components
- **Frontend**: Next.js with React hooks for real-time UI
- **WASM Layer**: Rust-compiled WebAssembly for high-performance packet processing as protocol layer over websocket
- **Backend**: Cloudflare Workers & Queues for database async writes and Durable Objects for stateful connections
- **Protocol**: Custom binary format with LZ4 compression and CRC32 validation
### Message Flow Architecture
The system uses a multi-tier approach optimized for ultra-low latency and reliability:
1. **WebSocket Reception** - Messages received via WebSocket connections in Durable Objects
2. **Immediate Broadcast** - Messages instantly broadcast to all connected WebSocket clients for low latency
3. **Cache Layer** - Messages immediately stored in Cloudflare KV for fast retrieval and temporary persistence
4. **Queue Processing** - Messages sent to Cloudflare Queue for batch processing (10 messages or 5-second intervals)
5. **Database Persistence** - Queue consumer processes messages in batches and persists to D1 database
**Benefits:**
- **Ultra-Low Latency** - Messages broadcast immediately to connected users before persistence
- **Reliability** - Queue ensures messages aren't lost during high traffic
- **Efficiency** - Batch processing reduces database load
- **Scalability** - Queue handles traffic spikes automatically
### Tech Stack
**Frontend**
- Next.js 15, React 19, TypeScript
- Tailwind CSS, Zustand
**Backend**
- Cloudflare Workers, Hono, Durable Objects
- Better Auth, Drizzle ORM
**WebAssembly**
- Rust, wasm-bindgen, LZ4, Bincode
**Infrastructure**
- Cloudflare D1, KV, Queues
## Quick Start
### Prerequisites
- Bun or Node.js 18+
- Rust toolchain
- wasm-pack
- Cloudflare account
### Installation
```bash
# Clone and install
git clone https://github.com/v0id-user/wasmchannel.git
cd wasmchannel
bun install
cd worker && bun install && cd ..
# Build WASM
bun run build:wasm:dev
# Setup environment
cp worker/.dev.vars.example worker/.dev.vars
# Edit with your Cloudflare credentials
# Start development
bun run dev # Terminal 1: Frontend
bun run worker:dev # Terminal 2: Worker
```
## Documentation
- **[Cloudflare Worker Setup](worker/README.md)** - Backend deployment and configuration
- **[Rust/WASM Development](crates/README.md)** - WebAssembly compilation and optimization
- **[Binary Protocol Specification](#binary-protocol)** - Custom messaging protocol details
## Binary Protocol
WasmChannel uses a custom binary protocol for efficient communication:
```rust
pub struct WasmPacket {
inner: Packet {
pub kind: PacketKind, // Message type
pub message_id: Option, // Unique identifier
pub user_id: Option, // Sender ID
pub reaction_kind: Option, // Reaction type
pub payload: Vec, // LZ4-compressed data
pub serialized: bool, // Serialization state
pub crc: u32, // CRC32 integrity check
}
}
```
**Protocol Features:**
- LZ4 frame compression for payload optimization
- CRC32 validation for data integrity
- Binary serialization via Bincode
- Type-safe packet handling in both Rust and TypeScript
## Development Commands
```bash
# WASM builds
bun run build:wasm:dev # Development build
bun run build:wasm:release # Production build
# Deployment
bun run build # Frontend build
cd worker && bun run deploy # Worker deployment
```
## Project Structure
```
wasmchannel/
├── app/ # Next.js app directory
├── components/ # React components
├── hooks/ # Custom React hooks
├── crates/ # Rust WebAssembly source
├── worker/ # Cloudflare Worker backend
├── types/ # TypeScript definitions
└── utils/ # Shared utilities
```
## License
MIT License - see [LICENSE](LICENSE) for details.
---
**Built with ❤️ by [@v0id_user](https://x.com/v0id_user)**
*This is an experimental project. It's meant to be a learning experience for me.*
**⚠️ Important Notice:**
This project is incomplete and experimental. Several features like proper message fetching and reaction systems are not fully implemented. Host and use this at your own risk as things may break. The primary purpose of this project was for my learning experience, and it has served that purpose.