Building a Real-Time Collaborative Text Editor with Python and WebSockets
Learn how to create a real-time collaborative text editor using Python, WebSockets, and simple web technologies for instant updates between users.
Real-time collaboration is a powerful feature in modern web applications, allowing multiple users to edit content simultaneously. In this tutorial, we will build a simple real-time collaborative text editor using Python on the backend with WebSockets and vanilla JavaScript on the frontend. This project is beginner-friendly and demonstrates the core concepts of WebSocket communication and syncing text between clients.
First, we need a basic Python server that can handle WebSocket connections. We'll use the popular `websockets` library, which is easy to work with for WebSocket servers. You can install it with `pip install websockets`.
Below is the Python code for a simple WebSocket server that broadcasts any received message to all connected clients. This allows all users to see the latest text updates instantly.
import asyncio
import websockets
connected = set()
async def handler(websocket):
# Register client
connected.add(websocket)
try:
async for message in websocket:
# Broadcast messages to all connected clients
for conn in connected:
if conn != websocket:
await conn.send(message)
except websockets.exceptions.ConnectionClosed:
pass
finally:
# Unregister client
connected.remove(websocket)
start_server = websockets.serve(handler, "localhost", 6789)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()Next, let's build a simple HTML page with a textarea where users can type. We'll connect this page to the WebSocket server and send updates when the text changes, while also listening for updates from others to keep the textarea in sync.
Here is the HTML and JavaScript code needed for our front end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collaborative Text Editor</title>
<style>
textarea {
width: 100%;
height: 300px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Collaborative Text Editor</h1>
<textarea id="editor" placeholder="Start typing..."></textarea>
<script>
const ws = new WebSocket("ws://localhost:6789/");
const editor = document.getElementById("editor");
// Flag to avoid echoing updates
let localChange = false;
ws.onmessage = function(event) {
localChange = true;
editor.value = event.data;
localChange = false;
};
editor.addEventListener("input", () => {
if (!localChange && ws.readyState === WebSocket.OPEN) {
ws.send(editor.value);
}
});
</script>
</body>
</html>To run this example, start your Python WebSocket server by running the Python script. Then, open the HTML file in multiple browser windows or tabs. Typing in one editor will instantly update the others, demonstrating real-time collaboration.
This simple collaborative editor forms the basis for more complex applications. In a real-world app, you'd add user identification, document saving, conflict resolution, and security features. However, this tutorial covers the fundamental real-time syncing concept using Python and WebSockets, making it a great starting point for beginners.