This page uses socket() for bidirectional real-time communication.
Open this page in multiple browser tabs to see the counter sync in real-time.
Source code for this page:
// pages/demo/socket.ts import { LitElement, html, css } from 'lit'; import { property } from 'lit/decorators.js'; // Server-side: shared state (persists across connections) const state = { count: 0 }; export function socket({ on, push, room }) { room.join('counter'); push({ count: state.count }); on('increment', () => { state.count++; push({ count: state.count }); room.broadcast('counter', { count: state.count }); }); on('decrement', () => { state.count--; push({ count: state.count }); room.broadcast('counter', { count: state.count }); }); return () => room.leave('counter'); } // Client-side: each pushed key becomes a property export class DemoSocket extends LitElement { @property({ type: Number }) count = 0; render() { return html` <p>Count: ${this.count}</p> <button @click=${() => this.emit('increment')}>+</button> <button @click=${() => this.emit('decrement')}>-</button> `; } }