[{"data":1,"prerenderedAt":953},["ShallowReactive",2],{"navigation":3,"/docs/guides/realtime":137,"/docs/guides/realtime-surround":948},[4,123],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":113},"Docs","i-lucide-book","/docs","docs",[10,34,58,73,84,95,114],{"title":11,"path":12,"stem":13,"children":14,"icon":33},"Getting Started","/docs/getting-started","docs/1.getting-started/1.index",[15,17,21,25,29],{"title":16,"path":12,"stem":13},"Introduction",{"title":18,"path":19,"stem":20},"Installation","/docs/getting-started/installation","docs/1.getting-started/2.installation",{"title":22,"path":23,"stem":24},"Deploy","/docs/getting-started/deploy","docs/1.getting-started/3.deploy",{"title":26,"path":27,"stem":28},"Migration","/docs/getting-started/migration","docs/1.getting-started/4.migration",{"title":30,"path":31,"stem":32},"Environments","/docs/getting-started/environments","docs/1.getting-started/5.environments","i-lucide-rocket",{"title":35,"path":36,"stem":37,"children":38,"icon":57},"Database","/docs/database","docs/2.database/1.index",[39,41,45,49,53],{"title":40,"path":36,"stem":37},"Setup",{"title":42,"path":43,"stem":44},"Schema","/docs/database/schema","docs/2.database/2.schema",{"title":46,"path":47,"stem":48},"Queries","/docs/database/query","docs/2.database/3.query",{"title":50,"path":51,"stem":52},"Migrations","/docs/database/migrations","docs/2.database/4.migrations",{"title":54,"path":55,"stem":56},"CLI","/docs/database/cli","docs/2.database/cli","i-lucide-database",{"title":59,"path":60,"stem":61,"children":62,"icon":72},"Blob","/docs/blob","docs/3.blob/1.index",[63,64,68],{"title":40,"path":60,"stem":61},{"title":65,"path":66,"stem":67},"Upload","/docs/blob/upload","docs/3.blob/2.upload",{"title":69,"path":70,"stem":71},"Blob SDK","/docs/blob/usage","docs/3.blob/3.usage","i-lucide-shapes",{"title":74,"path":75,"stem":76,"children":77,"icon":83},"Key Value","/docs/kv","docs/4.kv/1.index",[78,79],{"title":40,"path":75,"stem":76},{"title":80,"path":81,"stem":82},"KV SDK","/docs/kv/usage","docs/4.kv/2.usage","i-lucide-list",{"title":85,"path":86,"stem":87,"children":88,"icon":94},"Cache","/docs/cache","docs/5.cache/1.index",[89,90],{"title":40,"path":86,"stem":87},{"title":91,"path":92,"stem":93},"Usage","/docs/cache/usage","docs/5.cache/2.usage","i-lucide-zap",{"title":96,"icon":97,"path":98,"stem":99,"children":100,"page":113},"Guides","i-lucide-book-text","/docs/guides","docs/6.guides",[101,105,109],{"title":102,"path":103,"stem":104},"Pre-rendering","/docs/guides/pre-rendering","docs/6.guides/1.pre-rendering",{"title":106,"path":107,"stem":108},"Realtime","/docs/guides/realtime","docs/6.guides/2.realtime",{"title":110,"path":111,"stem":112},"CI/CD","/docs/guides/ci-cd","docs/6.guides/3.ci-cd",false,{"title":115,"path":116,"stem":117,"children":118,"page":113},"Reference","/docs/reference","docs/7.reference",[119],{"title":120,"path":121,"stem":122},"Environment Variables","/docs/reference/environment-variables","docs/7.reference/1.environment-variables",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":113},"Changelog","i-lucide-megaphone","/changelog","changelog",[129,133],{"title":130,"path":131,"stem":132},"NuxtHub Multi-Vendor is now available","/changelog/nuxthub-multi-vendor","changelog/nuxthub-multi-vendor",{"title":134,"path":135,"stem":136},"Self-Hosting First & Cloud-Agnostic Future","/changelog/self-hosting-first","changelog/self-hosting-first",{"id":138,"title":139,"body":140,"description":941,"extension":942,"links":943,"meta":944,"navigation":945,"path":107,"seo":946,"stem":108,"__hash__":947},"docs/docs/6.guides/2.realtime.md","Realtime & WebSockets",{"type":141,"value":142,"toc":936},"minimark",[143,147,164,253,257,260,285,295,299,302,309,562,565,591,605,923,932],[144,145,11],"h2",{"id":146},"getting-started",[148,149,150,151,158,159,163],"p",{},"Enable ",[152,153,157],"a",{"href":154,"rel":155},"https://nitro.build/guide/websocket",[156],"nofollow","Nitro's experimental WebSocket"," support by adding the following to your ",[160,161,162],"code",{},"nuxt.config.ts"," file:",[165,166,171],"pre",{"className":167,"code":168,"filename":162,"language":169,"meta":170,"style":170},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  nitro: {\n    experimental: {\n      websocket: true\n    }\n  }\n})\n","ts","",[160,172,173,197,210,220,232,238,244],{"__ignoreMap":170},[174,175,178,182,185,189,193],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"s7zQu","export",[174,183,184],{"class":180}," default",[174,186,188],{"class":187},"s2Zo4"," defineNuxtConfig",[174,190,192],{"class":191},"sTEyZ","(",[174,194,196],{"class":195},"sMK4o","{\n",[174,198,200,204,207],{"class":176,"line":199},2,[174,201,203],{"class":202},"swJcz","  nitro",[174,205,206],{"class":195},":",[174,208,209],{"class":195}," {\n",[174,211,213,216,218],{"class":176,"line":212},3,[174,214,215],{"class":202},"    experimental",[174,217,206],{"class":195},[174,219,209],{"class":195},[174,221,223,226,228],{"class":176,"line":222},4,[174,224,225],{"class":202},"      websocket",[174,227,206],{"class":195},[174,229,231],{"class":230},"sfNiH"," true\n",[174,233,235],{"class":176,"line":234},5,[174,236,237],{"class":195},"    }\n",[174,239,241],{"class":176,"line":240},6,[174,242,243],{"class":195},"  }\n",[174,245,247,250],{"class":176,"line":246},7,[174,248,249],{"class":195},"}",[174,251,252],{"class":191},")\n",[144,254,256],{"id":255},"supported-providers","Supported Providers",[148,258,259],{},"Nitro WebSocket is currently supported with the following Nitro presets:",[261,262,263,267,270,273],"ul",{},[264,265,266],"li",{},"Node.js",[264,268,269],{},"Deno",[264,271,272],{},"Bun",[264,274,275,276],{},"Cloudflare\n",[261,277,278],{},[264,279,280,281,284],{},"We recommend using the ",[160,282,283],{},"cloudflare_durable"," preset",[286,287,289,290,294],"callout",{"to":288},"https://github.com/nitrojs/nitro/issues/2171","See ",[152,291,293],{"href":288,"rel":292},[156],"nitrojs/nitro#2171"," for platform support status.",[144,296,298],{"id":297},"example","Example",[148,300,301],{},"Let's create a simple application that display how many users are connected to the website.",[148,303,304,305,308],{},"First, let's create a websocket handler on ",[160,306,307],{},"/ws/visitors"," route:",[165,310,313],{"className":167,"code":311,"filename":312,"language":169,"meta":170,"style":170},"export default defineWebSocketHandler({\n  open(peer) {\n    // We subscribe to the 'visitors' channel\n    peer.subscribe('visitors')\n    // We publish the number of connected users to the 'visitors' channel\n    peer.publish('visitors', peer.peers.size)\n    // We send the number of connected users to the client\n    peer.send(peer.peers.size)\n  },\n  close(peer) {\n    peer.unsubscribe('visitors')\n    // Wait 500ms before sending the updated locations to the server\n    setTimeout(() => {\n      peer.publish('visitors', peer.peers.size)\n    }, 500)\n  },\n})\n","server/routes/ws/visitors.ts",[160,314,315,328,344,350,374,379,414,419,443,449,463,483,489,506,538,550,555],{"__ignoreMap":170},[174,316,317,319,321,324,326],{"class":176,"line":177},[174,318,181],{"class":180},[174,320,184],{"class":180},[174,322,323],{"class":187}," defineWebSocketHandler",[174,325,192],{"class":191},[174,327,196],{"class":195},[174,329,330,333,335,339,342],{"class":176,"line":199},[174,331,332],{"class":202},"  open",[174,334,192],{"class":195},[174,336,338],{"class":337},"sHdIc","peer",[174,340,341],{"class":195},")",[174,343,209],{"class":195},[174,345,346],{"class":176,"line":212},[174,347,349],{"class":348},"sHwdD","    // We subscribe to the 'visitors' channel\n",[174,351,352,355,358,361,363,366,370,372],{"class":176,"line":222},[174,353,354],{"class":191},"    peer",[174,356,357],{"class":195},".",[174,359,360],{"class":187},"subscribe",[174,362,192],{"class":202},[174,364,365],{"class":195},"'",[174,367,369],{"class":368},"sfazB","visitors",[174,371,365],{"class":195},[174,373,252],{"class":202},[174,375,376],{"class":176,"line":234},[174,377,378],{"class":348},"    // We publish the number of connected users to the 'visitors' channel\n",[174,380,381,383,385,388,390,392,394,396,399,402,404,407,409,412],{"class":176,"line":240},[174,382,354],{"class":191},[174,384,357],{"class":195},[174,386,387],{"class":187},"publish",[174,389,192],{"class":202},[174,391,365],{"class":195},[174,393,369],{"class":368},[174,395,365],{"class":195},[174,397,398],{"class":195},",",[174,400,401],{"class":191}," peer",[174,403,357],{"class":195},[174,405,406],{"class":191},"peers",[174,408,357],{"class":195},[174,410,411],{"class":191},"size",[174,413,252],{"class":202},[174,415,416],{"class":176,"line":246},[174,417,418],{"class":348},"    // We send the number of connected users to the client\n",[174,420,422,424,426,429,431,433,435,437,439,441],{"class":176,"line":421},8,[174,423,354],{"class":191},[174,425,357],{"class":195},[174,427,428],{"class":187},"send",[174,430,192],{"class":202},[174,432,338],{"class":191},[174,434,357],{"class":195},[174,436,406],{"class":191},[174,438,357],{"class":195},[174,440,411],{"class":191},[174,442,252],{"class":202},[174,444,446],{"class":176,"line":445},9,[174,447,448],{"class":195},"  },\n",[174,450,452,455,457,459,461],{"class":176,"line":451},10,[174,453,454],{"class":202},"  close",[174,456,192],{"class":195},[174,458,338],{"class":337},[174,460,341],{"class":195},[174,462,209],{"class":195},[174,464,466,468,470,473,475,477,479,481],{"class":176,"line":465},11,[174,467,354],{"class":191},[174,469,357],{"class":195},[174,471,472],{"class":187},"unsubscribe",[174,474,192],{"class":202},[174,476,365],{"class":195},[174,478,369],{"class":368},[174,480,365],{"class":195},[174,482,252],{"class":202},[174,484,486],{"class":176,"line":485},12,[174,487,488],{"class":348},"    // Wait 500ms before sending the updated locations to the server\n",[174,490,492,495,497,500,504],{"class":176,"line":491},13,[174,493,494],{"class":187},"    setTimeout",[174,496,192],{"class":202},[174,498,499],{"class":195},"()",[174,501,503],{"class":502},"spNyl"," =>",[174,505,209],{"class":195},[174,507,509,512,514,516,518,520,522,524,526,528,530,532,534,536],{"class":176,"line":508},14,[174,510,511],{"class":191},"      peer",[174,513,357],{"class":195},[174,515,387],{"class":187},[174,517,192],{"class":202},[174,519,365],{"class":195},[174,521,369],{"class":368},[174,523,365],{"class":195},[174,525,398],{"class":195},[174,527,401],{"class":191},[174,529,357],{"class":195},[174,531,406],{"class":191},[174,533,357],{"class":195},[174,535,411],{"class":191},[174,537,252],{"class":202},[174,539,541,544,548],{"class":176,"line":540},15,[174,542,543],{"class":195},"    },",[174,545,547],{"class":546},"sbssI"," 500",[174,549,252],{"class":202},[174,551,553],{"class":176,"line":552},16,[174,554,448],{"class":195},[174,556,558,560],{"class":176,"line":557},17,[174,559,249],{"class":195},[174,561,252],{"class":191},[148,563,564],{},"Install VueUse if you haven't already:",[165,566,571],{"className":567,"code":568,"filename":569,"language":570,"meta":170,"style":170},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi module add vueuse\n","Terminal","bash",[160,572,573],{"__ignoreMap":170},[174,574,575,579,582,585,588],{"class":176,"line":177},[174,576,578],{"class":577},"sBMFI","npx",[174,580,581],{"class":368}," nuxi",[174,583,584],{"class":368}," module",[174,586,587],{"class":368}," add",[174,589,590],{"class":368}," vueuse\n",[148,592,593,594,601,602,604],{},"Let's use the ",[152,595,598],{"href":596,"rel":597},"https://vueuse.org/core/useWebSocket/",[156],[160,599,600],{},"useWebSocket"," composable from VueUse to subscribe to the ",[160,603,369],{}," channel and display the number of connected users.",[165,606,611],{"className":607,"code":608,"filename":609,"language":610,"meta":170,"style":170},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst visitors = ref(0)\nconst { open } = useWebSocket('/ws/visitors', {\n  immediate: false,\n  async onMessage(ws, event) {\n    // We parse the number of connected users from the message\n    // The message might be a string or a Blob\n    visitors.value = parseInt(typeof event.data === 'string' ? event.data : await event.data.text())\n  },\n})\n\n// We open the connection when the component is mounted\nonMounted(() => {\n  open()\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Visitors: {{ visitors }}\u003C/h1>\n  \u003C/div>\n\u003C/template>\n","pages/visitors.vue","vue",[160,612,613,640,660,690,703,725,730,735,802,806,812,818,823,836,843,849,858,862,872,883,904,914],{"__ignoreMap":170},[174,614,615,618,621,624,627,630,633,635,637],{"class":176,"line":177},[174,616,617],{"class":195},"\u003C",[174,619,620],{"class":202},"script",[174,622,623],{"class":502}," setup",[174,625,626],{"class":502}," lang",[174,628,629],{"class":195},"=",[174,631,632],{"class":195},"\"",[174,634,169],{"class":368},[174,636,632],{"class":195},[174,638,639],{"class":195},">\n",[174,641,642,645,648,650,653,655,658],{"class":176,"line":199},[174,643,644],{"class":502},"const",[174,646,647],{"class":191}," visitors ",[174,649,629],{"class":195},[174,651,652],{"class":187}," ref",[174,654,192],{"class":191},[174,656,657],{"class":546},"0",[174,659,252],{"class":191},[174,661,662,664,667,670,672,675,678,680,682,684,686,688],{"class":176,"line":212},[174,663,644],{"class":502},[174,665,666],{"class":195}," {",[174,668,669],{"class":191}," open ",[174,671,249],{"class":195},[174,673,674],{"class":195}," =",[174,676,677],{"class":187}," useWebSocket",[174,679,192],{"class":191},[174,681,365],{"class":195},[174,683,307],{"class":368},[174,685,365],{"class":195},[174,687,398],{"class":195},[174,689,209],{"class":195},[174,691,692,695,697,700],{"class":176,"line":222},[174,693,694],{"class":202},"  immediate",[174,696,206],{"class":195},[174,698,699],{"class":230}," false",[174,701,702],{"class":195},",\n",[174,704,705,708,711,713,716,718,721,723],{"class":176,"line":234},[174,706,707],{"class":502},"  async",[174,709,710],{"class":202}," onMessage",[174,712,192],{"class":195},[174,714,715],{"class":337},"ws",[174,717,398],{"class":195},[174,719,720],{"class":337}," event",[174,722,341],{"class":195},[174,724,209],{"class":195},[174,726,727],{"class":176,"line":240},[174,728,729],{"class":348},"    // We parse the number of connected users from the message\n",[174,731,732],{"class":176,"line":246},[174,733,734],{"class":348},"    // The message might be a string or a Blob\n",[174,736,737,740,742,745,747,750,752,755,757,759,762,765,768,771,773,776,778,780,782,785,788,790,792,794,796,799],{"class":176,"line":421},[174,738,739],{"class":191},"    visitors",[174,741,357],{"class":195},[174,743,744],{"class":191},"value",[174,746,674],{"class":195},[174,748,749],{"class":187}," parseInt",[174,751,192],{"class":202},[174,753,754],{"class":195},"typeof",[174,756,720],{"class":191},[174,758,357],{"class":195},[174,760,761],{"class":191},"data",[174,763,764],{"class":195}," ===",[174,766,767],{"class":195}," '",[174,769,770],{"class":368},"string",[174,772,365],{"class":195},[174,774,775],{"class":195}," ?",[174,777,720],{"class":191},[174,779,357],{"class":195},[174,781,761],{"class":191},[174,783,784],{"class":195}," :",[174,786,787],{"class":180}," await",[174,789,720],{"class":191},[174,791,357],{"class":195},[174,793,761],{"class":191},[174,795,357],{"class":195},[174,797,798],{"class":187},"text",[174,800,801],{"class":202},"())\n",[174,803,804],{"class":176,"line":445},[174,805,448],{"class":195},[174,807,808,810],{"class":176,"line":451},[174,809,249],{"class":195},[174,811,252],{"class":191},[174,813,814],{"class":176,"line":465},[174,815,817],{"emptyLinePlaceholder":816},true,"\n",[174,819,820],{"class":176,"line":485},[174,821,822],{"class":348},"// We open the connection when the component is mounted\n",[174,824,825,828,830,832,834],{"class":176,"line":491},[174,826,827],{"class":187},"onMounted",[174,829,192],{"class":191},[174,831,499],{"class":195},[174,833,503],{"class":502},[174,835,209],{"class":195},[174,837,838,840],{"class":176,"line":508},[174,839,332],{"class":187},[174,841,842],{"class":202},"()\n",[174,844,845,847],{"class":176,"line":540},[174,846,249],{"class":195},[174,848,252],{"class":191},[174,850,851,854,856],{"class":176,"line":552},[174,852,853],{"class":195},"\u003C/",[174,855,620],{"class":202},[174,857,639],{"class":195},[174,859,860],{"class":176,"line":557},[174,861,817],{"emptyLinePlaceholder":816},[174,863,865,867,870],{"class":176,"line":864},18,[174,866,617],{"class":195},[174,868,869],{"class":202},"template",[174,871,639],{"class":195},[174,873,875,878,881],{"class":176,"line":874},19,[174,876,877],{"class":195},"  \u003C",[174,879,880],{"class":202},"div",[174,882,639],{"class":195},[174,884,886,889,892,895,898,900,902],{"class":176,"line":885},20,[174,887,888],{"class":195},"    \u003C",[174,890,891],{"class":202},"h1",[174,893,894],{"class":195},">",[174,896,897],{"class":191},"Visitors: {{ visitors }}",[174,899,853],{"class":195},[174,901,891],{"class":202},[174,903,639],{"class":195},[174,905,907,910,912],{"class":176,"line":906},21,[174,908,909],{"class":195},"  \u003C/",[174,911,880],{"class":202},[174,913,639],{"class":195},[174,915,917,919,921],{"class":176,"line":916},22,[174,918,853],{"class":195},[174,920,869],{"class":202},[174,922,639],{"class":195},[148,924,925,926,931],{},"See a full open source example on ",[152,927,930],{"href":928,"rel":929},"https://github.com/nuxt-hub/multiplayer-globe",[156],"GitHub",", including geolocation tracking.",[933,934,935],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":170,"searchDepth":199,"depth":199,"links":937},[938,939,940],{"id":146,"depth":199,"text":11},{"id":255,"depth":199,"text":256},{"id":297,"depth":199,"text":298},"Build real-time experiences with NuxtHub.","md",null,{},{"title":106},{"title":139,"description":941},"ZatANYT_0UYuYCnN4XNU3-WWPLILiCjCD2IiJHbhGic",[949,951],{"title":102,"path":103,"stem":104,"description":950,"children":-1},"Pre-render pages at build time for maximum performance and avoid server CPU usage.",{"title":110,"path":111,"stem":112,"description":952,"children":-1},"Set up continuous integration and deployment for your NuxtHub application with proper database migration handling.",1775064432955]