Natuurlijk! Hier is een overzicht en voorbeeld van hoe je een Vue.js-component kunt bouwen voor realtime gelijktijdige bewerking van tekstbestanden, vergelijkbaar met Google Docs, inclusief WebSocket-verbinding, gedeelde statusbeheer en conflictoplossing. ### Stap 1: WebSocket-verbinding opzetten Gebruik een WebSocket-client (bijvoorbeeld native WebSocket of een bibliotheek zoals `socket.io-client`) om een continue communicatie met je server te onderhouden. **Voorbeeld:** ```javascript import { ref, onMounted, onBeforeUnmount } from 'vue'; export default { props: { documentId: String, }, setup(props) { const socket = ref(null); const content = ref(''); const isConnected = ref(false); const userId = generateUniqueUserId(); function generateUniqueUserId() { return 'user-' + Math.random().toString(36).substr(2, 9); } onMounted(() => { socket.value = new WebSocket('wss://jouwdomein.com/socket'); socket.value.onopen = () => { isConnected.value = true; // Abonneer je op het document socket.value.send(JSON.stringify({ type: 'join', documentId: props.documentId, userId: userId, })); }; socket.value.onmessage = (event) => { const message = JSON.parse(event.data); handleSocketMessage(message); }; socket.value.onclose = () => { isConnected.value = false; }; }); onBeforeUnmount(() => { if (socket.value) { socket.value.close(); } }); function handleSocketMessage(message) { switch (message.type) { case 'contentUpdate': applyRemoteChange(message); break; case 'userJoin': // Event voor nieuwe gebruiker break; case 'userLeave': // Event voor vertrekkende gebruiker break; default: break; } } function sendChange(change) { if (socket.value && isConnected.value) { socket.value.send(JSON.stringify({ type: 'contentChange', documentId: props.documentId, userId: userId, change: change, // bv. tekstpatch, positie })); } } // Behandel lokale bewerkingen function handleLocalInput(event) { const newContent = event.target.value; // Optioneel: gebruik tekstpatching voor efficiëntie const change = { text: newContent }; content.value = newContent; sendChange(change); } // Pas de inhoud aan op basis van ontvangen updates function applyRemoteChange(message) { // Conflict-resolutie wordt hier besproken // Bijvoorbeeld: gebruik van OT of CRDT content.value = message.change.text; } return { content, handleLocalInput, isConnected, }; }, }; ``` --- ### Stap 2: Gedeelde status beheren Gebruik een gesynchroniseerde data-structuur, zoals Operational Transformation (OT) of Conflict-free Replicated Data Types (CRDT), om de inhoud en bewerkingen in real-time te beheren en conflicten te minimaliseren. - **OT (Operational Transformation):** Past bewerkingen aan zodat ze in de juiste volgorde worden toegepast, ongeacht de volgorde van ontvangst. - **CRDT:** Zorgt dat meerdere kopieën van het document gelijktijdig kunnen worden bewerkt en automatisch worden gesynchroniseerd. Voor eenvoudige implementaties kun je in eerste instantie tekst updates sturen en de inhoud vervangen, maar voor een robuuste samenwerking is het aanbevolen om een van bovenstaande technieken te gebruiken. --- ### Stap 3: Conflictoplossing tijdens bewerkingen Conflicten ontstaan bij gelijktijdige bewerkingen. Ze kunnen worden opgelost door: - **OT of CRDT:** Automatisch, door het gebruik van algoritmes die bewerkingen samenvoegen. - **Tijdstempels of versienummers:** Bij elke wijziging hoort een versie; bij ontvangst wordt gecontroleerd of de versie overeenkomt. Bij conflict wordt de laatste versie getoond, of wordt een merge geprobeerd. - **Gebruikersinterventie:** Bij complexe conflicten wordt de gebruiker gevraagd om te kiezen tussen verschillende versies. In dit voorbeeld gebruiken we een eenvoudige aanpak: bij ontvangst wordt de inhoud direct vervangen. Voor een productie-kwaliteit tool moet je echter een geavanceerdere aanpak integreren. --- ### Samenvatting - **WebSocket-verbinding:** Opzetten bij component mount, afsluiten bij unmount. - **Gedeelde status:** Beheren via tekstpatching of geavanceerde technieken zoals OT/CRDT. - **Conflictoplossing:** Automatisch met OT/CRDT, of via versienummering en gebruikersinterventie. --- Wil je een volledige werkende codebasis of verdere details over OT/CRDT implementaties?

Zeker! Ik help je een realtime samenwerkingscomponent te bouwen in Vue.js. Hier is een complete implementatie: ## 1. Projectopzet en afhankelijkheden ```bash npm install vue@next socket.io-client ``` ## 2. WebSocket Service (socketService.js) ```javascript import { io } from 'socket.io-client'; class SocketService { constructor() { this.socket = null; this.isConnected = false; } connect(documentId, userId) { this.socket = io('http://localhost:3000', { query: { documentId, userId } }); this.socket.on('connect', () => { this.isConnected = true; console.log('Verbonden met WebSocket server'); }); this.socket.on('disconnect', () => { this.isConnected = false; console.log('Verbinding verbroken'); }); return this.socket; } disconnect() { if (this.socket) { this.socket.disconnect(); } } on(event, callback) { if (this.socket) { this.socket.on(event, callback); } } emit(event, data) { if (this.socket) { this.socket.emit(event, data); } } } export default new SocketService(); ``` ## 3. Vue.js Component (CollaborativeEditor.vue) ```vue <template> <div class="collaborative-editor"> <!-- Gebruikers die online zijn --> <div class="online-users"> <h3>Online gebruikers:</h3> <div v-for="user in onlineUsers" :key="user.id" class="user-indicator"> <span class="user-color" :style="{ backgroundColor: user.color }" ></span> {{ user.name }} </div> </div> <!-- Tekstbewerker --> <div class="editor-container"> <textarea ref="editor" v-model="localContent" @input="handleInput" @keydown="handleKeyDown" class="text-editor" placeholder="Begin met typen..." ></textarea> </div> <!-- Cursor posities van andere gebruikers --> <div class="remote-cursors"> <div v-for="user in remoteCursors" :key="user.id" class="remote-cursor" :style="{ left: user.position + 'px', backgroundColor: user.color }" :title="user.name" ></div> </div> </div> </template> <script> import { ref, onMounted, onUnmounted, nextTick } from 'vue'; import socketService from './socketService'; export default { name: 'CollaborativeEditor', props: { documentId: { type: String, required: true }, userId: { type: String, required: true }, userName: { type: String, required: true } }, setup(props) { const editor = ref(null); const localContent = ref(''); const onlineUsers = ref([]); const remoteCursors = ref([]); const userColor = ref(generateUserColor()); // Operationele transformatie variabelen const revision = ref(0); const pendingOperations = ref([]); const isApplyingRemote = ref(false); // Verbind met WebSocket onMounted(() => { const socket = socketService.connect(props.documentId, props.userId); // Luister naar server events socketService.on('document_loaded', (data) => { localContent.value = data.content; revision.value = data.revision; }); socketService.on('user_joined', (users) => { onlineUsers.value = users; }); socketService.on('user_left', (users) => { onlineUsers.value = users; // Verwijder cursors van vertrokken gebruikers remoteCursors.value = remoteCursors.value.filter( cursor => users.some(user => user.id === cursor.id) ); }); socketService.on('operation', (data) => { applyRemoteOperation(data); }); socketService.on('cursor_update', (data) => { updateRemoteCursor(data); }); // Vraag document op socketService.emit('join_document', { documentId: props.documentId, user: { id: props.userId, name: props.userName, color: userColor.value } }); }); // Operationele transformatie functies function transformOperation(op1, op2) { // Vereenvoudigde OT implementatie if (op1.type === 'insert' && op2.type === 'insert') { if (op1.position < op2.position) { return op1; } else if (op1.position > op2.position) { return { ...op1, position: op1.position + op2.text.length }; } } else if (op1.type === 'delete' && op2.type === 'insert') { if (op1.position < op2.position) { return op1; } else { return { ...op1, position: op1.position + op2.text.length }; } } return op1; } function applyOperation(content, operation) { switch (operation.type) { case 'insert': return ( content.slice(0, operation.position) + operation.text + content.slice(operation.position) ); case 'delete': return ( content.slice(0, operation.position) + content.slice(operation.position + operation.length) ); default: return content; } } function applyRemoteOperation(data) { isApplyingRemote.value = true; // Transformeer pending operations pendingOperations.value = pendingOperations.value.map(op => transformOperation(op, data.operation) ); // Pas de operatie toe localContent.value = applyOperation(localContent.value, data.operation); revision.value = data.revision; isApplyingRemote.value = false; // Stuur pending operations sendPendingOperations(); } function sendPendingOperations() { if (pendingOperations.value.length > 0 && !isApplyingRemote.value) { pendingOperations.value.forEach(operation => { socketService.emit('operation', { documentId: props.documentId, operation, revision: revision.value }); revision.value++; }); pendingOperations.value = []; } } // Input handling function handleInput(event) { if (isApplyingRemote.value) return; const target = event.target; const start = target.selectionStart; const value = target.value; // Detecteer type operatie let operation; if (value.length > localContent.value.length) { // Insert const insertedText = value.slice( Math.max(0, start - (value.length - localContent.value.length)), start ); operation = { type: 'insert', position: start - insertedText.length, text: insertedText }; } else { // Delete operation = { type: 'delete', position: start, length: localContent.value.length - value.length }; } pendingOperations.value.push(operation); sendPendingOperations(); } function handleKeyDown(event) { // Stuur cursor positie setTimeout(() => { const cursorPos = editor.value.selectionStart; socketService.emit('cursor_update', { documentId: props.documentId, userId: props.userId, position: cursorPos, name: props.userName, color: userColor.value }); }, 10); } function updateRemoteCursor(data) { const existingIndex = remoteCursors.value.findIndex( cursor => cursor.id === data.userId ); if (existingIndex !== -1) { remoteCursors.value[existingIndex].position = calculateCursorPosition(data.position); } else { remoteCursors.value.push({ id: data.userId, position: calculateCursorPosition(data.position), name: data.name, color: data.color }); } } function calculateCursorPosition(textPosition) { // Vereenvoudigde positie berekening return textPosition * 8; // Geschatte pixel breedte per karakter } function generateUserColor() { const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']; return colors[Math.floor(Math.random() * colors.length)]; } onUnmounted(() => { socketService.disconnect(); }); return { editor, localContent, onlineUsers, remoteCursors, handleInput, handleKeyDown }; } }; </script> <style scoped> .collaborative-editor { position: relative; max-width: 800px; margin: 0 auto; font-family: Arial, sans-serif; } .online-users { margin-bottom: 20px; padding: 10px; background: #f5f5f5; border-radius: 5px; } .user-indicator { display: inline-flex; align-items: center; margin-right: 15px; margin-bottom: 5px; } .user-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; display: inline-block; } .editor-container { position: relative; } .text-editor { width: 100%; height: 400px; padding: 20px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; line-height: 1.5; resize: vertical; font-family: 'Courier New', monospace; } .remote-cursors { position: absolute; top: 20px; left: 20px; pointer-events: none; } .remote-cursor { position: absolute; width: 2px; height: 20px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .text-editor:focus { border-color: #4ECDC4; outline: none; } </style> ``` ## 4. Gebruik van het component ```vue <template> <div id="app"> <CollaborativeEditor :document-id="'doc-123'" :user-id="currentUserId" :user-name="currentUserName" /> </div> </template> <script> import CollaborativeEditor from './components/CollaborativeEditor.vue'; export default { name: 'App', components: { CollaborativeEditor }, data() { return { currentUserId: 'user-' + Math.random().toString(36).substr(2, 9), currentUserName: 'Gebruiker ' + Math.floor(Math.random() * 1000) }; } }; </script> ``` ## 5. Server-side Node.js implementatie (vereenvoudigd) ```javascript // server.js const express = require('express'); const http = require('http'); const { Server } = require('socket.io'); const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { origin: "http://localhost:8080", methods: ["GET", "POST"] } }); // Document status opslag (in productie gebruik Redis of database) const documents = new Map(); io.on('connection', (socket) => { const { documentId, userId } = socket.handshake.query; socket.join(documentId); // Initialiseer document indien niet bestaat if (!documents.has(documentId)) { documents.set(documentId, { content: '', revision: 0, users: new Map() }); } const document = documents.get(documentId); socket.on('join_document', (data) => { // Voeg gebruiker toe document.users.set(userId, { id: userId, name: data.user.name, color: data.user.color }); // Stuur huidige document status socket.emit('document_loaded', { content: document.content, revision: document.revision }); // Broadcast naar andere gebruikers socket.to(documentId).emit('user_joined', Array.from(document.users.values())); }); socket.on('operation', (data) => { // Pas operatie toe op document document.content = applyOperation(document.content, data.operation); document.revision++; // Broadcast naar andere gebruikers socket.to(documentId).emit('operation', { operation: data.operation, revision: document.revision, userId: userId }); }); socket.on('cursor_update', (data) => { socket.to(documentId).emit('cursor_update', data); }); socket.on('disconnect', () => { if (document) { document.users.delete(userId); socket.to(documentId).emit('user_left', Array.from(document.users.values())); } }); }); function applyOperation(content, operation) { // Implementatie vergelijkbaar met client-side switch (operation.type) { case 'insert': return content.slice(0, operation.position) + operation.text + content.slice(operation.position); case 'delete': return content.slice(0, operation.position) + content.slice(operation.position + operation.length); default: return content; } } server.listen(3000, () => { console.log('WebSocket server draait op poort 3000'); }); ``` ## Belangrijke kenmerken: 1. **Realtime synchronisatie**: WebSocket verbinding voor instant updates 2. **Operationele Transformatie**: Conflictoplossing voor gelijktijdige bewerkingen 3. **Cursortracking**: Zichtbare cursorposities van andere gebruikers 4. **Gebruikersindicatie**: Kleurcodering voor verschillende gebruikers 5. **Statusbeheer**: Gedeelde documentstatus met revisiebeheer Deze implementatie biedt een solide basis voor een Google Docs-achtige samenwerkingstool met professionele conflictoplossing en realtime synchronisatie.