https://github.com/tyronejosee/prototype_websockets
Prototype for WebSockets using Django and React. Demonstrates real-time communication between the backend and frontend.
https://github.com/tyronejosee/prototype_websockets
django javascript python react sqlite typescript websockets
Last synced: 3 months ago
JSON representation
Prototype for WebSockets using Django and React. Demonstrates real-time communication between the backend and frontend.
- Host: GitHub
- URL: https://github.com/tyronejosee/prototype_websockets
- Owner: tyronejosee
- License: mit
- Created: 2024-12-13T21:53:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-03T20:36:55.000Z (over 1 year ago)
- Last Synced: 2025-05-14T12:21:25.087Z (about 1 year ago)
- Topics: django, javascript, python, react, sqlite, typescript, websockets
- Language: Python
- Homepage:
- Size: 68.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Prototype WebSockets
A complete real-time chat application built with Django (backend) and React (frontend). Features include user authentication, private messaging, real-time communication via WebSockets, and a clean, modern UI.
WebSockets are a communication protocol that enables bidirectional and persistent communication between a server and a client over a single TCP connection. Unlike traditional methods such as HTTP, where the client makes a request and the server responds, WebSockets allow real-time communication, where the server can send data to the client at any moment without requiring the client to make a new request.
## ✨ Features
### Backend
- **User Authentication**: Registration and login with JWT tokens
- **WebSocket Support**: Real-time messaging using Django Channels
- **Private Chat**: Direct messages between users
- **Message Storage**: Persistent message history in database
- **REST API**: Endpoints for user management and message retrieval
- **Online Status**: Track user online/offline status
### Frontend
- **Authentication UI**: Login and registration forms
- **User Management**: View list of available users
- **Real-time Chat**: Instant messaging with WebSocket connection
- **Message History**: Load and display previous conversations
- **Typing Indicators**: See when someone is typing
- **Responsive Design**: Works on desktop and mobile devices
## ✅ Prerequisites
- Python 3.8+
- Node.js 14+
- Redis server
## ⚙️ Installation
### 🗄️ Backend Setup
Navigate to backend directory.
```bash
cd backend
```
Create virtual environment.
```bash
python -m venv venv
# Windows
venv\Scripts\activate
# Linux/Mac
source venv/bin/activate
```
Install dependencies.
```bash
pip install -r requirements.txt
```
Run migrations.
```bash
python manage.py makemigrations
python manage.py migrate
```
Create superuser.
```bash
python manage.py createsuperuser
```
Start development server.
```bash
python manage.py runserver
```
### 🎨 Frontend Setup
Navigate to frontend directory
```bash
cd frontend
```
Install dependencies.
```bash
npm install
```
Start development server.
```bash
npm run dev
```
## ⚖️ License
This project is under the [MIT License](LICENSE).
Enjoy! 🎉