In this blog, we’ll walk through the process of integrating WebSocket functionality using Socket.IO, adding caching support with Redis, and hosting a full-stack application built with Flask and Next.js using Docker Compose. By the end, you’ll have a scalable, real-time web application architecture ready to deploy.
Tech Stack Overview
- Backend: Flask with extensions like Flask-SocketIO for real-time communication, Flask-Session for session management, and SQLAlchemy for database interactions.
- Frontend: Next.js with client-side Socket.IO for real-time content synchronization.
- Database: PostgreSQL for persistent data storage.
- Cache: Redis for caching and quick data access.
- Hosting: Docker Compose for containerized deployment.
Step 1: Backend Setup with Flask and Redis
Flask Backend Structure
Here’s the structure of our Flask backend:
- Initialize Flask and Extensions:
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_socketio import SocketIO
from flask_session import Session
import redis, os
app = Flask(__name__)
app.config["SECRET_KEY"] = "your_secret_key"
app.config["SQLALCHEMY_DATABASE_URI"] = "postgresql://username:password@postgres:5432/dbname"
app.config["SESSION_TYPE"] = "redis"
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_USE_SIGNER"] = True
app.config["SESSION_KEY_PREFIX"] = "session:"
app.config["SESSION_REDIS"] = redis.StrictRedis(host=os.getenv('REDIS_HOST', 'redis'), port=6379, db=0)
# Initialize extensions
socketio = SocketIO(app, cors_allowed_origins="*")
db = SQLAlchemy(app)
Session(app)
- Add Real-Time WebSocket Functionality:
from flask_socketio import emit, join_room, leave_room
@socketio.on('join_room')
def handle_join_room(data):
room = data.get('contentId')
join_room(room)
emit('user_joined', {'msg': 'A new user has joined the room'}, to=room)
@socketio.on('edit_content')
def handle_edit_content(data):
content_id = data.get('contentId')
content = data.get('content')
emit('content_update', {'content': content}, to=content_id, skip_sid=request.sid)
@socketio.on('leave_room')
def handle_leave_room(data):
room = data.get('contentId')
leave_room(room)
emit('user_left', {'msg': 'A user has left the room'}, to=room)
- Session and Redis Configuration:
import redis
cache = redis.StrictRedis(host=os.getenv('REDIS_HOST', 'redis'), port=6379, db=0)
- Environment Configuration (.env file):
SECRET_KEY=your_secret_key
SQLALCHEMY_DATABASE_URI=postgresql://postgres:postgres@postgres:5432/postgres
SQLALCHEMY_TRACK_MODIFICATIONS=False
APP_URL=AWS EC2 IP address
HOST=redis
Step 2: Frontend Setup with Next.js and Socket.IO
Client-Side Socket.IO Setup
- Install Socket.IO Client:
npm install socket.io-client
- Create a Socket Instance:
// socket.js
import { io } from "socket.io-client";
const SOCKET_URL = process.env.NEXT_PUBLIC_SOCKET_URL;
const socket = io(SOCKET_URL, {
autoConnect: false,
});
export default socket;
- Integrate TipTap Editor with Real-Time Updates:
"use client";
import socket from "@/shared/socket";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { useEffect, useState } from "react";
const Tiptap = ({ content = "", contentId }) => {
const [isSaving, setIsSaving] = useState(false);
const editor = useEditor({
extensions: [StarterKit],
content,
onUpdate: ({ editor }) => {
const updatedContent = editor.getHTML();
if (contentId) {
setIsSaving(true);
socket.emit("edit_content", { contentId, content: updatedContent });
setTimeout(() => setIsSaving(false), 1000);
}
},
});
useEffect(() => {
if (contentId) {
if (!socket.connected) socket.connect();
socket.emit("join_room", { contentId });
socket.on("content_update", (data) => {
if (editor && data.content !== editor.getHTML()) {
editor.commands.setContent(data.content);
}
});
return () => {
socket.emit("leave_room", { contentId });
socket.off("content_update");
};
}
}, [contentId, editor]);
return <EditorContent editor={editor} />;
};
export default Tiptap;
- Environment Configuration (.env file):
NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_SOCKET_URL=http://localhost:5000
DATABASE_NAME=postgres
DATABASE_USER=postgres
DATABASE_PASSWORD=postgres
Step 3: Docker Compose for Deployment
-
\** Configuration**:
version: "3.8"
services:
nginx:
image: nginx:alpine
container_name: nginx_proxy
ports:
- "443:443"
- "80:80"
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
depends_on:
- backend
- website
networks:
- app-network
website:
build:
context: ./website
dockerfile: Dockerfile
args:
NEXT_PUBLIC_SOCKET_URL: ${NEXT_PUBLIC_SOCKET_URL}
container_name: website
environment:
- NEXT_PUBLIC_SOCKET_URL=${NEXT_PUBLIC_SOCKET_URL}
expose:
- "3000"
networks:
- app-network
backend:
build:
context: ./backend
dockerfile: Dockerfile
container_name: backend
expose:
- "5000"
networks:
- app-network
redis:
image: redis:alpine
container_name: redis
expose:
- "6379"
networks:
- app-network
postgres:
image: postgres:14-alpine
container_name: postgres
environment:
- POSTGRES_DB=${DATABASE_NAME}
- POSTGRES_USER=${DATABASE_USER}
- POSTGRES_PASSWORD=${DATABASE_PASSWORD}
volumes:
- postgres_data:/var/lib/postgresql/data
networks:
- app-network
networks:
app-network:
driver: bridge
volumes:
postgres_data:
- Nginx Configuration for Proxy:
server {
listen 80;
server_name _;
location / {
proxy_pass http://website:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /api/ {
proxy_pass http://backend:5000;
proxy_set_header Host $host;
}
location /socket.io/ {
proxy_pass http://backend:5000/socket.io/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Step 4: Running the Application
- Build and start the services:
docker-compose up --build
- Access the application:
-
Frontend:
http://localhost -
Backend API:
http://localhost/api
-
Frontend: