WebSocket Support | Tags | Geode Database

<h2 id="websocket-support-in-geode" class="position-relative d-flex align-items-center group"> WebSocket Support in Geode <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="websocket-support-in-geode" aria-haspopup="dialog" aria-label="Share link: WebSocket Support in Geode"> Share link </button> </h2><div id="headingShareModal" class="heading-share-modal" role="dialog" aria-modal="true" aria-labelledby="headingShareTitle" hidden> <div class="hsm-dialog" role="document"> <div class="hsm-header"> <h2 id="headingShareTitle" class="h6 mb-0 fw-bold">Share this section</h2> <button type="button" class="hsm-close" aria-label="Close"> </button> </div> <div class="hsm-body"> <label for="headingShareInput" class="form-label small text-muted mb-1 text-uppercase fw-bold" style="font-size: 0.7rem; letter-spacing: 0.5px;">Permalink</label> <div class="input-group mb-4 hsm-url-group"> <input id="headingShareInput" type="text" class="form-control font-monospace" readonly aria-readonly="true" style="font-size: 0.85rem;" /> <button class="btn btn-primary hsm-copy" type="button" aria-label="Copy" title="Copy"> </button> </div> <div class="small fw-bold mb-2 text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">Share via</div> <div class="hsm-share-grid"> <a id="share-twitter" class="btn btn-outline-secondary w-100" target="_blank" rel="noopener noreferrer"> Twitter </a> <a id="share-linkedin" class="btn btn-outline-secondary w-100" target="_blank" rel="noopener noreferrer"> LinkedIn </a> <a id="share-facebook" class="btn btn-outline-secondary w-100" target="_blank" rel="noopener noreferrer"> Facebook </a> </div> </div> </div> </div> <style> .heading-share-modal { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.6); z-index: 1050; padding: 1rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .heading-share-modal[hidden] { display: none !important; } .hsm-dialog { max-width: 420px; width: 100%; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border: 1px solid var(--bs-border-color, rgba(0,0,0,0.1)); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; animation: hsm-fade-in 0.2s ease-out; } @keyframes hsm-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } [data-bs-theme="dark"] .hsm-dialog { background: #1e293b; border-color: rgba(255,255,255,0.1); color: #f8f9fa; } .hsm-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.1)); background: rgba(0,0,0,0.02); } [data-bs-theme="dark"] .hsm-header { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.1); } .hsm-close { background: transparent; border: none; color: inherit; opacity: 0.5; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 1.2rem; line-height: 1; transition: opacity 0.2s; } .hsm-close:hover { opacity: 1; } .hsm-body { padding: 1.5rem; } .hsm-url-group { display: flex !important; align-items: stretch; } .hsm-url-group .form-control { flex: 1; min-width: 0; margin: 0; background: var(--bs-secondary-bg, #f8f9fa); border-color: var(--bs-border-color, #dee2e6); border-top-right-radius: 0; border-bottom-right-radius: 0; height: 42px; } .hsm-url-group .btn { flex: 0 0 auto; margin: 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 1.25rem; z-index: 2; } [data-bs-theme="dark"] .hsm-url-group .form-control { background: #0f172a; border-color: #334155; color: #e2e8f0; } .hsm-share-grid { display: flex; flex-direction: column; gap: 0.5rem; } .hsm-share-grid .btn { display: flex; align-items: center; justify-content: center; font-size: 0.9rem; padding: 0.6rem; border-color: var(--bs-border-color); width: 100%; } [data-bs-theme="dark"] .hsm-share-grid .btn { color: #e2e8f0; border-color: #475569; } [data-bs-theme="dark"] .hsm-share-grid .btn:hover { background: #334155; border-color: #cbd5e1; } </style> <script> (function(){ const modal = document.getElementById('headingShareModal'); if(!modal) return; const input = modal.querySelector('#headingShareInput'); const copyBtn = modal.querySelector('.hsm-copy'); const twitter = modal.querySelector('#share-twitter'); const linkedin = modal.querySelector('#share-linkedin'); const facebook = modal.querySelector('#share-facebook'); const closeBtn = modal.querySelector('.hsm-close'); let lastFocus=null; let trapBound=false; function buildUrl(id){ return window.location.origin + window.location.pathname + '#' + id; } function isOpen(){ return !modal.hasAttribute('hidden'); } function hydrate(id){ const url=buildUrl(id); input.value=url; const enc=encodeURIComponent(url); const text=encodeURIComponent(document.title); if(twitter) twitter.href=`https://twitter.com/intent/tweet?url=${enc}&text=${text}`; if(linkedin) linkedin.href=`https://www.linkedin.com/sharing/share-offsite/?url=${enc}`; if(facebook) facebook.href=`https://www.facebook.com/sharer/sharer.php?u=${enc}`; } function openModal(id){ lastFocus=document.activeElement; hydrate(id); if(!isOpen()){ modal.removeAttribute('hidden'); } requestAnimationFrame(()=>{ input.focus(); }); trapFocus(); } function closeModal(){ if(!isOpen()) return; modal.setAttribute('hidden',''); if(lastFocus && typeof lastFocus.focus==='function') lastFocus.focus(); } function copyCurrent(){ try{ navigator.clipboard.writeText(input.value).then(()=>feedback(true),()=>fallback()); } catch(e){ fallback(); } } function fallback(){ input.select(); try{ document.execCommand('copy'); feedback(true);}catch(e){ feedback(false);} } function feedback(ok){ if(!copyBtn) return; const icon=copyBtn.querySelector('i'); if(!icon) return; const prev=copyBtn.getAttribute('data-prev')||icon.className; if(!copyBtn.getAttribute('data-prev')) copyBtn.setAttribute('data-prev',prev); icon.className= ok ? 'fa-duotone fa-clipboard-check':'fa-duotone fa-circle-exclamation'; setTimeout(()=>{ icon.className=prev; },1800); } function handleShareClick(e){ e.preventDefault(); const btn=e.currentTarget; const id=btn.getAttribute('data-share-target'); if(id) openModal(id); } function bindShareButtons(){ document.querySelectorAll('.h-share').forEach(btn=>{ if(!btn.dataset.hShareBound){ btn.addEventListener('click', handleShareClick); btn.dataset.hShareBound='1'; } }); } bindShareButtons(); if(document.readyState==='loading'){ document.addEventListener('DOMContentLoaded', bindShareButtons); } else { requestAnimationFrame(bindShareButtons); } document.addEventListener('click', function(e){ const shareBtn=e.target.closest && e.target.closest('.h-share'); if(shareBtn && !shareBtn.dataset.hShareBound){ handleShareClick.call(shareBtn, e); } }, true); document.addEventListener('click', e=>{ if(e.target===modal) closeModal(); if(e.target.closest && e.target.closest('.hsm-close')){ e.preventDefault(); closeModal(); } if(copyBtn && (e.target===copyBtn || (e.target.closest && e.target.closest('.hsm-copy')))) { e.preventDefault(); copyCurrent(); } }); document.addEventListener('keydown', e=>{ if(e.key==='Escape' && isOpen()) closeModal(); }); function trapFocus(){ if(trapBound) return; trapBound=true; modal.addEventListener('keydown', f=>{ if(f.key==='Tab' && isOpen()){ const focusable=[...modal.querySelectorAll('a[href],button,input,textarea,select,[tabindex]:not([tabindex="-1"])')].filter(el=>!el.hasAttribute('disabled')); if(!focusable.length) return; const first=focusable[0]; const last=focusable[focusable.length-1]; if(f.shiftKey && document.activeElement===first){ f.preventDefault(); last.focus(); } else if(!f.shiftKey && document.activeElement===last){ f.preventDefault(); first.focus(); } } }); } if(closeBtn) closeBtn.addEventListener('click', e=>{ e.preventDefault(); closeModal(); }); })(); </script>WebSocket protocol revolutionizes real-time communication between browsers and servers by providing full-duplex, bidirectional channels over a single TCP connection. While Geode primarily uses QUIC for optimal performance, WebSocket support enables seamless integration with web applications, browser-based clients, and environments where QUIC is unavailable. This comprehensive guide explores WebSocket implementation in Geode, covering real-time subscriptions, live dashboards, collaborative editing, security patterns, and production deployment strategies. <h3 id="understanding-websocket-architecture" class="position-relative d-flex align-items-center group"> Understanding WebSocket Architecture <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="understanding-websocket-architecture" aria-haspopup="dialog" aria-label="Share link: Understanding WebSocket Architecture"> Share link </button> </h3>Traditional HTTP follows a strict request-response model: clients send requests, servers respond, connection closes. This architecture works well for static content but creates significant challenges for real-time applications. Developers resort to inefficient workarounds like polling (repeatedly asking “anything new?”), long-polling (holding connections open), or Server-Sent Events (one-way server-to-client). WebSocket solves these limitations by establishing a persistent, bidirectional connection. After an initial HTTP handshake to upgrade the connection, both client and server can send messages at any time without request-response overhead. This enables true real-time communication with minimal latency. WebSocket Advantages: <ul> <li>Bidirectional: Both client and server can initiate messages</li> <li>Low Latency: No HTTP request overhead after initial handshake</li> <li>Efficient: Single persistent connection instead of repeated requests</li> <li>Real-Time: Server can push updates immediately when data changes</li> <li>Standardized: RFC 6455 protocol with broad browser and library support</li> </ul> When to Use WebSocket with Geode: <ul> <li>Browser-based applications requiring real-time updates</li> <li>Live dashboards displaying changing metrics</li> <li>Collaborative editing where multiple users modify shared data</li> <li>Chat applications with instant message delivery</li> <li>Notification systems pushing alerts to clients</li> <li>Event streaming from database changes to UI</li> </ul> When to Use QUIC Instead: <ul> <li>Backend services and microservices (QUIC provides better performance)</li> <li>Mobile applications (QUIC handles network transitions better)</li> <li>High-throughput scenarios (QUIC’s multiplexing excels)</li> <li>Low-latency requirements (QUIC’s 0-RTT resumption is faster)</li> </ul> <h3 id="websocket-basics" class="position-relative d-flex align-items-center group"> WebSocket Basics <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="websocket-basics" aria-haspopup="dialog" aria-label="Share link: WebSocket Basics"> Share link </button> </h3> <h4 id="what-are-websockets" class="position-relative d-flex align-items-center group"> What are WebSockets? <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="what-are-websockets" aria-haspopup="dialog" aria-label="Share link: What are WebSockets?"> Share link </button> </h4>WebSockets provide: Full-Duplex - Simultaneous bidirectional communication Low Latency - Minimal overhead after connection established Real-Time - Push updates from server to client Persistent - Long-lived connections <h4 id="websocket-vs-http" class="position-relative d-flex align-items-center group"> WebSocket vs HTTP <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="websocket-vs-http" aria-haspopup="dialog" aria-label="Share link: WebSocket vs HTTP"> Share link </button> </h4><table> <thead> <tr> <th>Feature</th> <th>HTTP</th> <th>WebSocket</th> </tr> </thead> <tbody> <tr> <td>Communication</td> <td>Request-Response</td> <td>Bidirectional</td> </tr> <tr> <td>Connection</td> <td>Short-lived</td> <td>Persistent</td> </tr> <tr> <td>Overhead</td> <td>High (headers per request)</td> <td>Low (single handshake)</td> </tr> <tr> <td>Server Push</td> <td>No (polling required)</td> <td>Yes (native)</td> </tr> </tbody> </table> <h3 id="geode-websocket-api" class="position-relative d-flex align-items-center group"> Geode WebSocket API <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="geode-websocket-api" aria-haspopup="dialog" aria-label="Share link: Geode WebSocket API"> Share link </button> </h3> <h4 id="connecting-via-websocket" class="position-relative d-flex align-items-center group"> Connecting via WebSocket <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="connecting-via-websocket" aria-haspopup="dialog" aria-label="Share link: Connecting via WebSocket"> Share link </button> </h4>Establish WebSocket connection: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">// JavaScript client const ws = new WebSocket('wss://geode.example.com:8443/ws'); ws.onopen = () => { console.log('Connected to Geode'); // Authenticate ws.send(JSON.stringify({ type: 'AUTH', token: 'your-jwt-token' })); }; ws.onmessage = (event) => { const message = JSON.parse(event.data); console.log('Received:', message); }; ws.onerror = (error) => { console.error('WebSocket error:', error); }; ws.onclose = () => { console.log('Disconnected from Geode'); }; </code></pre></div> <h4 id="executing-queries" class="position-relative d-flex align-items-center group"> Executing Queries <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="executing-queries" aria-haspopup="dialog" aria-label="Share link: Executing Queries"> Share link </button> </h4>Run GQL queries over WebSocket: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">function executeQuery(query, params) { const request = { type: 'QUERY', id: generateRequestId(), query: query, parameters: params || {} }; ws.send(JSON.stringify(request)); } // Execute query executeQuery( 'MATCH (p:Person) WHERE p.age > $age RETURN p', { age: 18 } ); // Handle response ws.onmessage = (event) => { const response = JSON.parse(event.data); if (response.type === 'RESULT') { console.log('Query results:', response.data); } else if (response.type === 'ERROR') { console.error('Query error:', response.error); } }; </code></pre></div> <h4 id="subscription-queries" class="position-relative d-flex align-items-center group"> Subscription Queries <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="subscription-queries" aria-haspopup="dialog" aria-label="Share link: Subscription Queries"> Share link </button> </h4>Subscribe to real-time updates: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">// Subscribe to changes const subscribeToUserUpdates = () => { ws.send(JSON.stringify({ type: 'SUBSCRIBE', id: 'user-updates', query: 'SUBSCRIBE TO users WHERE age > 18' })); }; // Receive subscription updates ws.onmessage = (event) => { const message = JSON.parse(event.data); if (message.type === 'UPDATE' && message.subscription === 'user-updates') { console.log('User updated:', message.data); updateUI(message.data); } }; // Unsubscribe const unsubscribe = (id) => { ws.send(JSON.stringify({ type: 'UNSUBSCRIBE', id: id })); }; </code></pre></div> <h3 id="use-cases" class="position-relative d-flex align-items-center group"> Use Cases <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="use-cases" aria-haspopup="dialog" aria-label="Share link: Use Cases"> Share link </button> </h3> <h4 id="live-dashboards" class="position-relative d-flex align-items-center group"> Live Dashboards <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="live-dashboards" aria-haspopup="dialog" aria-label="Share link: Live Dashboards"> Share link </button> </h4>Update dashboards in real-time: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class LiveDashboard { constructor(wsUrl) { this.ws = new WebSocket(wsUrl); this.setupHandlers(); } setupHandlers() { this.ws.onopen = () => { // Subscribe to metrics this.subscribe('system-metrics', 'SELECT * FROM metrics EMIT CHANGES' ); }; this.ws.onmessage = (event) => { const msg = JSON.parse(event.data); if (msg.type === 'UPDATE') { this.updateMetric(msg.data); } }; } subscribe(id, query) { this.ws.send(JSON.stringify({ type: 'SUBSCRIBE', id: id, query: query })); } updateMetric(data) { // Update dashboard UI document.getElementById('cpu-usage').textContent = data.cpu + '%'; document.getElementById('memory-usage').textContent = data.memory + '%'; } } const dashboard = new LiveDashboard('wss://geode.local:8443/ws'); </code></pre></div> <h4 id="collaborative-editing" class="position-relative d-flex align-items-center group"> Collaborative Editing <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="collaborative-editing" aria-haspopup="dialog" aria-label="Share link: Collaborative Editing"> Share link </button> </h4>Enable real-time collaboration: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class CollaborativeEditor { constructor(documentId) { this.documentId = documentId; this.ws = new WebSocket('wss://geode.local:8443/ws'); this.setupSync(); } setupSync() { this.ws.onopen = () => { // Join collaboration session this.ws.send(JSON.stringify({ type: 'JOIN_SESSION', document_id: this.documentId })); }; this.ws.onmessage = (event) => { const msg = JSON.parse(event.data); if (msg.type === 'EDIT') { this.applyRemoteEdit(msg.edit); } else if (msg.type === 'USER_JOINED') { this.showUser(msg.user); } }; } sendEdit(edit) { this.ws.send(JSON.stringify({ type: 'EDIT', document_id: this.documentId, edit: edit })); } applyRemoteEdit(edit) { // Apply edit from other user this.editor.applyChange(edit); } } </code></pre></div> <h4 id="chat-applications" class="position-relative d-flex align-items-center group"> Chat Applications <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="chat-applications" aria-haspopup="dialog" aria-label="Share link: Chat Applications"> Share link </button> </h4>Build real-time chat: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class ChatClient { constructor(roomId) { this.roomId = roomId; this.ws = new WebSocket('wss://geode.local:8443/ws'); this.setupChat(); } setupChat() { this.ws.onopen = () => { // Join chat room this.ws.send(JSON.stringify({ type: 'JOIN_ROOM', room_id: this.roomId })); }; this.ws.onmessage = (event) => { const msg = JSON.parse(event.data); if (msg.type === 'MESSAGE') { this.displayMessage(msg); } else if (msg.type === 'TYPING') { this.showTypingIndicator(msg.user); } }; } sendMessage(text) { this.ws.send(JSON.stringify({ type: 'MESSAGE', room_id: this.roomId, text: text, timestamp: new Date().toISOString() })); } sendTypingIndicator() { this.ws.send(JSON.stringify({ type: 'TYPING', room_id: this.roomId })); } } </code></pre></div> <h3 id="best-practices" class="position-relative d-flex align-items-center group"> Best Practices <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="best-practices" aria-haspopup="dialog" aria-label="Share link: Best Practices"> Share link </button> </h3> <h4 id="connection-management" class="position-relative d-flex align-items-center group"> Connection Management <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="connection-management" aria-haspopup="dialog" aria-label="Share link: Connection Management"> Share link </button> </h4>Handle connection lifecycle: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class ReliableWebSocket { constructor(url) { this.url = url; this.reconnectDelay = 1000; this.maxReconnectDelay = 30000; this.connect(); } connect() { this.ws = new WebSocket(this.url); this.ws.onopen = () => { console.log('Connected'); this.reconnectDelay = 1000; this.onopen?.(); }; this.ws.onclose = () => { console.log('Disconnected, reconnecting...'); setTimeout(() => { this.reconnectDelay = Math.min( this.reconnectDelay * 2, this.maxReconnectDelay ); this.connect(); }, this.reconnectDelay); }; this.ws.onerror = (error) => { console.error('WebSocket error:', error); }; this.ws.onmessage = (event) => { this.onmessage?.(event); }; } send(data) { if (this.ws.readyState === WebSocket.OPEN) { this.ws.send(data); } else { console.warn('WebSocket not connected'); } } } </code></pre></div> <h4 id="message-acknowledgment" class="position-relative d-flex align-items-center group"> Message Acknowledgment <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="message-acknowledgment" aria-haspopup="dialog" aria-label="Share link: Message Acknowledgment"> Share link </button> </h4>Ensure reliable delivery: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class AcknowledgedWebSocket { constructor(url) { this.ws = new WebSocket(url); this.pendingMessages = new Map(); this.messageId = 0; this.setupHandlers(); } setupHandlers() { this.ws.onmessage = (event) => { const msg = JSON.parse(event.data); if (msg.type === 'ACK') { // Remove from pending this.pendingMessages.delete(msg.message_id); } else if (msg.type === 'MESSAGE') { // Send acknowledgment this.ws.send(JSON.stringify({ type: 'ACK', message_id: msg.id })); this.handleMessage(msg); } }; } send(data, timeout = 5000) { const id = ++this.messageId; const message = { id: id, type: 'MESSAGE', data: data }; return new Promise((resolve, reject) => { // Store for retry this.pendingMessages.set(id, { message: message, resolve: resolve, reject: reject, timeout: setTimeout(() => { this.pendingMessages.delete(id); reject(new Error('Message timeout')); }, timeout) }); this.ws.send(JSON.stringify(message)); }); } } </code></pre></div> <h3 id="advanced-websocket-patterns" class="position-relative d-flex align-items-center group"> Advanced WebSocket Patterns <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="advanced-websocket-patterns" aria-haspopup="dialog" aria-label="Share link: Advanced WebSocket Patterns"> Share link </button> </h3> <h4 id="request-response-pattern" class="position-relative d-flex align-items-center group"> Request-Response Pattern <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="request-response-pattern" aria-haspopup="dialog" aria-label="Share link: Request-Response Pattern"> Share link </button> </h4>Implement request-response over WebSocket: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class WebSocketRPC { constructor(url) { this.ws = new WebSocket(url); this.pending = new Map(); this.requestId = 0; this.ws.onmessage = (event) => { const response = JSON.parse(event.data); const pending = this.pending.get(response.id); if (pending) { if (response.error) { pending.reject(new Error(response.error)); } else { pending.resolve(response.result); } this.pending.delete(response.id); } }; } async call(method, params) { return new Promise((resolve, reject) => { const id = ++this.requestId; this.pending.set(id, { resolve, reject }); this.ws.send(JSON.stringify({ jsonrpc: '2.0', id: id, method: method, params: params })); // Timeout after 30 seconds setTimeout(() => { if (this.pending.has(id)) { this.pending.delete(id); reject(new Error('Request timeout')); } }, 30000); }); } } // Usage const rpc = new WebSocketRPC('wss://geode.example.com/ws'); const result = await rpc.call('query', { gql: 'MATCH (p:Person) RETURN COUNT(p)', params: {} }); console.log('Count:', result.data[0].count); </code></pre></div> <h4 id="multiplexed-channels" class="position-relative d-flex align-items-center group"> Multiplexed Channels <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="multiplexed-channels" aria-haspopup="dialog" aria-label="Share link: Multiplexed Channels"> Share link </button> </h4>Support multiple logical channels over one WebSocket: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class MultiplexedWebSocket { constructor(url) { this.ws = new WebSocket(url); this.channels = new Map(); this.ws.onmessage = (event) => { const message = JSON.parse(event.data); const channel = this.channels.get(message.channel); if (channel) { channel.onmessage(message.data); } }; } createChannel(name) { const channel = { name: name, send: (data) => { this.ws.send(JSON.stringify({ channel: name, data: data })); }, onmessage: null, close: () => { this.channels.delete(name); } }; this.channels.set(name, channel); return channel; } } // Usage const mux = new MultiplexedWebSocket('wss://geode.example.com/ws'); // Create separate channels for different purposes const queryChannel = mux.createChannel('queries'); const notificationChannel = mux.createChannel('notifications'); const metricsChannel = mux.createChannel('metrics'); queryChannel.onmessage = (data) => { console.log('Query result:', data); }; notificationChannel.onmessage = (data) => { showNotification(data.message); }; metricsChannel.onmessage = (data) => { updateDashboard(data.metrics); }; </code></pre></div> <h4 id="binary-protocol-support" class="position-relative d-flex align-items-center group"> Binary Protocol Support <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="binary-protocol-support" aria-haspopup="dialog" aria-label="Share link: Binary Protocol Support"> Share link </button> </h4>Send binary data over WebSocket for efficiency: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class BinaryWebSocket { constructor(url) { this.ws = new WebSocket(url); this.ws.binaryType = 'arraybuffer'; this.ws.onmessage = (event) => { if (event.data instanceof ArrayBuffer) { this.handleBinaryMessage(event.data); } else { this.handleTextMessage(event.data); } }; } sendBinaryQuery(query) { // Encode query as binary protocol const encoder = new TextEncoder(); const queryBytes = encoder.encode(query); // Create header: [version(1), type(1), length(4)] const header = new ArrayBuffer(6); const view = new DataView(header); view.setUint8(0, 1); // Protocol version view.setUint8(1, 1); // Message type: QUERY view.setUint32(2, queryBytes.length); // Concatenate header and query const message = new Uint8Array(header.byteLength + queryBytes.length); message.set(new Uint8Array(header), 0); message.set(queryBytes, header.byteLength); this.ws.send(message.buffer); } handleBinaryMessage(buffer) { const view = new DataView(buffer); const version = view.getUint8(0); const type = view.getUint8(1); const length = view.getUint32(2); // Decode based on type if (type === 2) { // RESULT const decoder = new TextDecoder(); const payload = buffer.slice(6, 6 + length); const result = JSON.parse(decoder.decode(payload)); this.onresult(result); } } } </code></pre></div> <h3 id="production-deployment" class="position-relative d-flex align-items-center group"> Production Deployment <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="production-deployment" aria-haspopup="dialog" aria-label="Share link: Production Deployment"> Share link </button> </h3> <h4 id="load-balancing-websockets" class="position-relative d-flex align-items-center group"> Load Balancing WebSockets <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="load-balancing-websockets" aria-haspopup="dialog" aria-label="Share link: Load Balancing WebSockets"> Share link </button> </h4>Configure load balancer for WebSocket sticky sessions: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-nginx" data-lang="nginx"># nginx.conf upstream geode_websockets { ip_hash; # Sticky sessions based on client IP server geode-1.internal:8443; server geode-2.internal:8443; server geode-3.internal:8443; } server { listen 443 ssl; server_name geode.example.com; ssl_certificate /etc/nginx/ssl/cert.pem; ssl_certificate_key /etc/nginx/ssl/key.pem; location /ws { proxy_pass https://geode_websockets; proxy_http_version 1.1; # WebSocket upgrade headers proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; # Timeouts for long-lived connections proxy_connect_timeout 7d; proxy_send_timeout 7d; proxy_read_timeout 7d; # Disable buffering proxy_buffering off; } } </code></pre></div> <h4 id="connection-scaling" class="position-relative d-flex align-items-center group"> Connection Scaling <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="connection-scaling" aria-haspopup="dialog" aria-label="Share link: Connection Scaling"> Share link </button> </h4>Handle thousands of concurrent WebSocket connections: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">// Server-side connection management class WebSocketPool { constructor() { this.connections = new Map(); this.maxConnections = 10000; this.connectionTimeout = 300000; // 5 minutes } addConnection(userId, ws) { // Enforce connection limit if (this.connections.size >= this.maxConnections) { ws.close(1008, 'Server at capacity'); return false; } // Close existing connection for same user const existing = this.connections.get(userId); if (existing) { existing.close(1000, 'Replaced by new connection'); } this.connections.set(userId, ws); // Set idle timeout ws.lastActivity = Date.now(); ws.timeout = setTimeout(() => { if (Date.now() - ws.lastActivity > this.connectionTimeout) { ws.close(1000, 'Idle timeout'); this.connections.delete(userId); } }, this.connectionTimeout); ws.on('message', () => { ws.lastActivity = Date.now(); }); ws.on('close', () => { clearTimeout(ws.timeout); this.connections.delete(userId); }); return true; } broadcast(message) { const data = JSON.stringify(message); for (const [userId, ws] of this.connections) { if (ws.readyState === WebSocket.OPEN) { ws.send(data); } } } sendToUser(userId, message) { const ws = this.connections.get(userId); if (ws && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify(message)); return true; } return false; } getStats() { return { total_connections: this.connections.size, capacity_used: (this.connections.size / this.maxConnections * 100).toFixed(1) + '%' }; } } </code></pre></div> <h4 id="security-hardening" class="position-relative d-flex align-items-center group"> Security Hardening <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="security-hardening" aria-haspopup="dialog" aria-label="Share link: Security Hardening"> Share link </button> </h4>Implement WebSocket security best practices: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">// Authentication middleware function authenticateWebSocket(req, ws) { const token = new URL(req.url, 'ws://localhost').searchParams.get('token'); if (!token) { ws.close(1008, 'Authentication required'); return false; } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); req.user = decoded; return true; } catch (error) { ws.close(1008, 'Invalid token'); return false; } } // Rate limiting const rateLimiter = new Map(); function checkRateLimit(userId) { const now = Date.now(); const userLimit = rateLimiter.get(userId) || { count: 0, resetTime: now + 60000 }; if (now > userLimit.resetTime) { // Reset counter rateLimiter.set(userId, { count: 1, resetTime: now + 60000 }); return true; } if (userLimit.count >= 100) { // 100 messages per minute return false; } userLimit.count++; return true; } // Message validation function validateMessage(message) { const schema = { type: 'object', required: ['type', 'data'], properties: { type: { type: 'string', enum: ['QUERY', 'SUBSCRIBE', 'UNSUBSCRIBE'] }, data: { type: 'object' } }, maxProperties: 3 }; const validate = ajv.compile(schema); return validate(message); } // Apply security layers wss.on('connection', (ws, req) => { if (!authenticateWebSocket(req, ws)) { return; } ws.on('message', (data) => { if (!checkRateLimit(req.user.id)) { ws.send(JSON.stringify({ type: 'ERROR', error: 'Rate limit exceeded' })); return; } let message; try { message = JSON.parse(data); } catch (error) { ws.close(1003, 'Invalid JSON'); return; } if (!validateMessage(message)) { ws.close(1003, 'Invalid message format'); return; } handleMessage(req.user, message); }); }); </code></pre></div> <h3 id="monitoring-and-observability" class="position-relative d-flex align-items-center group"> Monitoring and Observability <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="monitoring-and-observability" aria-haspopup="dialog" aria-label="Share link: Monitoring and Observability"> Share link </button> </h3> <h4 id="metrics-collection" class="position-relative d-flex align-items-center group"> Metrics Collection <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="metrics-collection" aria-haspopup="dialog" aria-label="Share link: Metrics Collection"> Share link </button> </h4>Track WebSocket performance metrics: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">const metrics = { connections_total: 0, connections_active: 0, messages_sent: 0, messages_received: 0, bytes_sent: 0, bytes_received: 0, errors_total: 0, recordConnection() { this.connections_total++; this.connections_active++; }, recordDisconnection() { this.connections_active--; }, recordMessageSent(size) { this.messages_sent++; this.bytes_sent += size; }, recordMessageReceived(size) { this.messages_received++; this.bytes_received += size; }, recordError() { this.errors_total++; }, getStats() { return { connections: { total: this.connections_total, active: this.connections_active }, messages: { sent: this.messages_sent, received: this.messages_received }, bandwidth: { sent_mb: (this.bytes_sent / 1024 / 1024).toFixed(2), received_mb: (this.bytes_received / 1024 / 1024).toFixed(2) }, errors: this.errors_total }; } }; // Export to Prometheus app.get('/metrics', (req, res) => { const stats = metrics.getStats(); res.set('Content-Type', 'text/plain'); res.send(` # HELP websocket_connections_active Active WebSocket connections # TYPE websocket_connections_active gauge websocket_connections_active ${stats.connections.active} # HELP websocket_messages_sent_total Total messages sent # TYPE websocket_messages_sent_total counter websocket_messages_sent_total ${stats.messages.sent} # HELP websocket_errors_total Total WebSocket errors # TYPE websocket_errors_total counter websocket_errors_total ${stats.errors} `.trim()); }); </code></pre></div> <h3 id="performance-optimization" class="position-relative d-flex align-items-center group"> Performance Optimization <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="performance-optimization" aria-haspopup="dialog" aria-label="Share link: Performance Optimization"> Share link </button> </h3> <h4 id="message-batching" class="position-relative d-flex align-items-center group"> Message Batching <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="message-batching" aria-haspopup="dialog" aria-label="Share link: Message Batching"> Share link </button> </h4>Batch multiple updates for efficiency: <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">class MessageBatcher { constructor(ws, flushInterval = 100) { this.ws = ws; this.queue = []; this.flushInterval = flushInterval; this.timer = null; } enqueue(message) { this.queue.push(message); if (!this.timer) { this.timer = setTimeout(() => { this.flush(); }, this.flushInterval); } } flush() { if (this.queue.length === 0) { return; } const batch = { type: 'BATCH', messages: this.queue }; this.ws.send(JSON.stringify(batch)); this.queue = []; this.timer = null; } } // Usage const batcher = new MessageBatcher(ws); // Instead of sending individually for (const update of updates) { batcher.enqueue({ type: 'UPDATE', data: update }); } // Batched message sent after 100ms </code></pre></div> <h4 id="compression" class="position-relative d-flex align-items-center group"> Compression <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="compression" aria-haspopup="dialog" aria-label="Share link: Compression"> Share link </button> </h4>Enable WebSocket compression (permessage-deflate): <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8443, perMessageDeflate: { zlibDeflateOptions: { chunkSize: 1024, memLevel: 7, level: 3 }, zlibInflateOptions: { chunkSize: 10 * 1024 }, clientNoContextTakeover: true, serverNoContextTakeover: true, serverMaxWindowBits: 10, concurrencyLimit: 10, threshold: 1024 // Only compress messages > 1KB } }); </code></pre></div>Compression typically reduces bandwidth by 60-80% for text data. <h3 id="troubleshooting-websocket-issues" class="position-relative d-flex align-items-center group"> Troubleshooting WebSocket Issues <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="troubleshooting-websocket-issues" aria-haspopup="dialog" aria-label="Share link: Troubleshooting WebSocket Issues"> Share link </button> </h3>Connection Drops Frequently: Check firewall timeout settings. Implement heartbeat/ping-pong to keep connection alive. Verify proxy timeouts are configured correctly. High Latency: Enable compression for large messages. Reduce message size through batching. Check network congestion between client and server. Memory Leaks: Ensure event listeners are properly removed on disconnect. Clear timeouts and intervals when connection closes. Monitor memory usage of WebSocket server process. Authentication Failures: Verify token is passed correctly in connection URL or initial message. Check token expiration and renewal logic. Ensure CORS is configured for WebSocket endpoint. <h3 id="related-topics" class="position-relative d-flex align-items-center group"> Related Topics <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="related-topics" aria-haspopup="dialog" aria-label="Share link: Related Topics"> Share link </button> </h3><ul> <li><a href="/tags/real-time/" >Real-Time</a> : Real-time data processing</li> <li><a href="/tags/streaming/" >Streaming</a> : Event streaming</li> <li><a href="/tags/pubsub/" >Pub/Sub</a> : Publish-subscribe messaging</li> <li><a href="/tags/events/" >Events</a> : Event-driven architecture</li> <li><a href="/tags/networking/" >Networking</a> : Network architecture</li> <li><a href="/tags/security/" >Security</a> : Security best practices</li> <li><a href="/tags/monitoring/" >Monitoring</a> : Application monitoring</li> <li><a href="/tags/performance/" >Performance</a> : Performance optimization</li> </ul> <h3 id="further-reading" class="position-relative d-flex align-items-center group"> Further Reading <button type="button" class="h-share btn btn-link p-0 text-decoration-none link-secondary opacity-50 hover-opacity-100 transition-all ms-1" data-share-target="further-reading" aria-haspopup="dialog" aria-label="Share link: Further Reading"> Share link </button> </h3><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" aria-label="WebSocket API (MDN) – opens in new window" target="_blank" rel="noopener noreferrer" >WebSocket API (MDN) ↗ </a> : Browser WebSocket documentation</li> <li><a href="https://socket.io/" aria-label="Socket.IO – opens in new window" target="_blank" rel="noopener noreferrer" >Socket.IO ↗ </a> : Popular WebSocket library with fallbacks</li> <li><a href="https://tools.ietf.org/html/rfc6455" aria-label="WebSocket Protocol RFC 6455 – opens in new window" target="_blank" rel="noopener noreferrer" >WebSocket Protocol RFC 6455 ↗ </a> : Official WebSocket specification</li> <li>Geode WebSocket Guide: <code>/docs/networking/websockets/</code></li> <li>Real-Time Subscriptions: <code>/docs/features/subscriptions/</code></li> <li>Connection Management: <code>/docs/operations/connection-management/</code></li> </ul>

Related Articles