[{"data":1,"prerenderedAt":756},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-axios\u002Fguides\u002Fserver-sent-events":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":755,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-axios\u002Fguides\u002Fserver-sent-events.md",{},"Server-sent events",{"type":8,"value":9,"toc":746},"minimark",[10,27,32,43,163,168,243,249,253,260,348,355,432,436,443,565,569,572,735],[11,12,13,14,18,19,22,23,26],"p",{},"Operations returning ",[15,16,17],"code",{},"text\u002Fevent-stream"," produce a typed stream rather than a ",[15,20,21],{},"RequestResult",". The client switches to the axios fetch adapter for these calls unless you set ",[15,24,25],{},"adapter"," yourself, because the default XHR adapter buffers the whole body.",[28,29,31],"h2",{"id":30},"consume-a-stream","Consume a stream",[11,33,34,35,38,39,42],{},"Read the ",[15,36,37],{},"EventStreamResult.stream"," with ",[15,40,41],{},"for await",":",[44,45,49],"pre",{"language":46,"code":47,"class":48},"typescript","import { streamEvents } from '.\u002Fgen\u002Fclients\u002FstreamEvents'\n\nconst { stream } = await streamEvents({})\n\nfor await (const event of stream) {\n  console.info(event.data)\n}","highlights",[15,50,52,79,80,79,82,79,107,79,109,79,131,79,158],{"class":51},"language-typescript",[53,54,57,61,65,69,72,75],"span",{"class":55,"style":56},"line","display: inline",[53,58,60],{"style":59},"color:#d73a49;--hls-dark:#f97583","import ",[53,62,64],{"style":63},"color:#005cc5;--hls-dark:#79b8ff","{ ",[53,66,68],{"style":67},"color:#24292e;--hls-dark:#e1e4e8","streamEvents ",[53,70,71],{"style":63},"} ",[53,73,74],{"style":59},"from ",[53,76,78],{"style":77},"color:#032f62;--hls-dark:#9ecbff","'.\u002Fgen\u002Fclients\u002FstreamEvents'","\n",[53,81],{"class":55,"style":56},[53,83,84,87,89,92,94,97,100,104],{"class":55,"style":56},[53,85,86],{"style":59},"const ",[53,88,64],{"style":63},[53,90,91],{"style":67},"stream ",[53,93,71],{"style":63},[53,95,96],{"style":59},"= ",[53,98,99],{"style":59},"await ",[53,101,103],{"style":102},"color:#6f42c1;--hls-dark:#b392f0","streamEvents",[53,105,106],{"style":63},"({})",[53,108],{"class":55,"style":56},[53,110,111,114,117,119,122,125,128],{"class":55,"style":56},[53,112,113],{"style":59},"for await ",[53,115,116],{"style":63},"(",[53,118,86],{"style":59},[53,120,121],{"style":67},"event ",[53,123,124],{"style":59},"of ",[53,126,127],{"style":67},"stream",[53,129,130],{"style":63},") {",[53,132,133,136,139,142,145,147,150,152,155],{"class":55,"style":56},[53,134,135],{"style":63},"  ",[53,137,138],{"style":67},"console",[53,140,141],{"style":59},".",[53,143,144],{"style":102},"info",[53,146,116],{"style":63},[53,148,149],{"style":67},"event",[53,151,141],{"style":59},[53,153,154],{"style":63},"data",[53,156,157],{"style":63},")",[53,159,160],{"class":55,"style":56},[53,161,162],{"style":63},"}",[11,164,165,167],{},[15,166,154],{}," is typed from the operation's response schema. Each event also carries the optional SSE\nfields, so you can branch on the event name or read the id:",[44,169,171],{"language":46,"code":170,"class":48},"type ServerSentEvent\u003CTData> = {\n  data: TData\n  event?: string\n  id?: string\n  retry?: number\n}",[15,172,173,79,193,79,204,79,216,79,227,79,239],{"class":51},[53,174,175,178,181,184,187,190],{"class":55,"style":56},[53,176,177],{"style":59},"type ",[53,179,180],{"style":102},"ServerSentEvent",[53,182,183],{"style":59},"\u003C",[53,185,186],{"style":102},"TData",[53,188,189],{"style":59},"> = ",[53,191,192],{"style":63},"{",[53,194,195,197,199,202],{"class":55,"style":56},[53,196,135],{"style":63},[53,198,154],{"style":63},[53,200,201],{"style":67},": ",[53,203,186],{"style":102},[53,205,206,208,210,213],{"class":55,"style":56},[53,207,135],{"style":102},[53,209,149],{"style":67},[53,211,212],{"style":67},"?: ",[53,214,215],{"style":102},"string",[53,217,218,220,223,225],{"class":55,"style":56},[53,219,135],{"style":102},[53,221,222],{"style":67},"id",[53,224,212],{"style":67},[53,226,215],{"style":102},[53,228,229,231,234,236],{"class":55,"style":56},[53,230,135],{"style":102},[53,232,233],{"style":67},"retry",[53,235,212],{"style":67},[53,237,238],{"style":102},"number",[53,240,241],{"class":55,"style":56},[53,242,162],{"style":63},[11,244,245,246,248],{},"The runtime parses each event's ",[15,247,154],{}," as JSON when it is valid and keeps it as the raw string\notherwise.",[28,250,252],{"id":251},"stop-early","Stop early",[11,254,255,256,259],{},"Break out of the loop to stop reading. The underlying reader is canceled when the iterator\nfinishes, so an early ",[15,257,258],{},"break"," releases the stream:",[44,261,263],{"language":46,"code":262,"class":48},"const { stream } = await streamEvents({})\n\nfor await (const event of stream) {\n  if (event.event === 'done') break\n  render(event.data)\n}",[15,264,265,79,283,79,285,79,301,79,327,79,344],{"class":51},[53,266,267,269,271,273,275,277,279,281],{"class":55,"style":56},[53,268,86],{"style":59},[53,270,64],{"style":63},[53,272,91],{"style":67},[53,274,71],{"style":63},[53,276,96],{"style":59},[53,278,99],{"style":59},[53,280,103],{"style":102},[53,282,106],{"style":63},[53,284],{"class":55,"style":56},[53,286,287,289,291,293,295,297,299],{"class":55,"style":56},[53,288,113],{"style":59},[53,290,116],{"style":63},[53,292,86],{"style":59},[53,294,121],{"style":67},[53,296,124],{"style":59},[53,298,127],{"style":67},[53,300,130],{"style":63},[53,302,303,305,308,310,312,314,316,319,322,325],{"class":55,"style":56},[53,304,135],{"style":63},[53,306,307],{"style":59},"if ",[53,309,116],{"style":63},[53,311,149],{"style":67},[53,313,141],{"style":59},[53,315,121],{"style":63},[53,317,318],{"style":59},"=== ",[53,320,321],{"style":77},"'done'",[53,323,324],{"style":63},") ",[53,326,258],{"style":59},[53,328,329,331,334,336,338,340,342],{"class":55,"style":56},[53,330,135],{"style":59},[53,332,333],{"style":102},"render",[53,335,116],{"style":63},[53,337,149],{"style":67},[53,339,141],{"style":59},[53,341,154],{"style":63},[53,343,157],{"style":63},[53,345,346],{"class":55,"style":56},[53,347,162],{"style":63},[11,349,350,351,354],{},"To stop a stream from outside the loop, pass an ",[15,352,353],{},"AbortSignal"," and abort it. Aborting ends the\nrequest and the iteration:",[44,356,358],{"language":46,"code":357,"class":48},"const controller = new AbortController()\nconst { stream } = await streamEvents({ signal: controller.signal })\n\n\u002F\u002F elsewhere, for example on component unmount\ncontroller.abort()",[15,359,360,79,378,79,413,79,415,79,421],{"class":51},[53,361,362,364,367,369,372,375],{"class":55,"style":56},[53,363,86],{"style":59},[53,365,366],{"style":67},"controller ",[53,368,96],{"style":59},[53,370,371],{"style":59},"new ",[53,373,374],{"style":102},"AbortController",[53,376,377],{"style":63},"()",[53,379,380,382,384,386,388,390,392,394,397,400,402,405,407,410],{"class":55,"style":56},[53,381,86],{"style":59},[53,383,64],{"style":63},[53,385,91],{"style":67},[53,387,71],{"style":63},[53,389,96],{"style":59},[53,391,99],{"style":59},[53,393,103],{"style":102},[53,395,396],{"style":63},"({ ",[53,398,399],{"style":63},"signal",[53,401,201],{"style":59},[53,403,404],{"style":67},"controller",[53,406,141],{"style":59},[53,408,409],{"style":63},"signal ",[53,411,412],{"style":63},"})",[53,414],{"class":55,"style":56},[53,416,417],{"class":55,"style":56},[53,418,420],{"style":419},"color:#6a737d;--hls-dark:#6a737d","\u002F\u002F elsewhere, for example on component unmount",[53,422,423,425,427,430],{"class":55,"style":56},[53,424,404],{"style":67},[53,426,141],{"style":59},[53,428,429],{"style":102},"abort",[53,431,377],{"style":63},[28,433,435],{"id":434},"read-the-response","Read the response",[11,437,438,439,442],{},"Read status and headers from the native ",[15,440,441],{},"response"," before iterating:",[44,444,446],{"language":46,"code":445,"class":48},"const { stream, response } = await streamEvents({})\n\nconsole.info(response.status) \u002F\u002F 200\nconsole.info(response.headers.get('x-stream-id'))\n\nfor await (const event of stream) {\n  handle(event.data)\n}",[15,447,448,79,472,79,474,79,496,79,526,79,528,79,544,79,561],{"class":51},[53,449,450,452,454,456,459,462,464,466,468,470],{"class":55,"style":56},[53,451,86],{"style":59},[53,453,64],{"style":63},[53,455,127],{"style":67},[53,457,458],{"style":59},", ",[53,460,461],{"style":67},"response ",[53,463,71],{"style":63},[53,465,96],{"style":59},[53,467,99],{"style":59},[53,469,103],{"style":102},[53,471,106],{"style":63},[53,473],{"class":55,"style":56},[53,475,476,478,480,482,484,486,488,491,493],{"class":55,"style":56},[53,477,138],{"style":67},[53,479,141],{"style":59},[53,481,144],{"style":102},[53,483,116],{"style":63},[53,485,441],{"style":67},[53,487,141],{"style":59},[53,489,490],{"style":63},"status",[53,492,324],{"style":63},[53,494,495],{"style":419},"\u002F\u002F 200",[53,497,498,500,502,504,506,508,510,513,515,518,520,523],{"class":55,"style":56},[53,499,138],{"style":67},[53,501,141],{"style":59},[53,503,144],{"style":102},[53,505,116],{"style":63},[53,507,441],{"style":67},[53,509,141],{"style":59},[53,511,512],{"style":63},"headers",[53,514,141],{"style":59},[53,516,517],{"style":102},"get",[53,519,116],{"style":63},[53,521,522],{"style":77},"'x-stream-id'",[53,524,525],{"style":63},"))",[53,527],{"class":55,"style":56},[53,529,530,532,534,536,538,540,542],{"class":55,"style":56},[53,531,113],{"style":59},[53,533,116],{"style":63},[53,535,86],{"style":59},[53,537,121],{"style":67},[53,539,124],{"style":59},[53,541,127],{"style":67},[53,543,130],{"style":63},[53,545,546,548,551,553,555,557,559],{"class":55,"style":56},[53,547,135],{"style":63},[53,549,550],{"style":102},"handle",[53,552,116],{"style":63},[53,554,149],{"style":67},[53,556,141],{"style":59},[53,558,154],{"style":63},[53,560,157],{"style":63},[53,562,563],{"class":55,"style":56},[53,564,162],{"style":63},[28,566,568],{"id":567},"handle-errors","Handle errors",[11,570,571],{},"Catch non-2xx responses around the call and iteration, and rethrow other errors such as connection failures:",[44,573,575],{"language":46,"code":574,"class":48},"import { ResponseError } from '.\u002Fgen\u002F.kubb\u002Fclient'\n\ntry {\n  const { stream } = await streamEvents({})\n  for await (const event of stream) {\n    handle(event.data)\n  }\n} catch (error) {\n  if (!ResponseError.is(error)) throw error\n  console.error('stream rejected', error.status)\n}",[15,576,577,79,593,79,595,79,602,79,622,79,640,79,657,79,662,79,676,79,707,79,731],{"class":51},[53,578,579,581,583,586,588,590],{"class":55,"style":56},[53,580,60],{"style":59},[53,582,64],{"style":63},[53,584,585],{"style":102},"ResponseError ",[53,587,71],{"style":63},[53,589,74],{"style":59},[53,591,592],{"style":77},"'.\u002Fgen\u002F.kubb\u002Fclient'",[53,594],{"class":55,"style":56},[53,596,597,600],{"class":55,"style":56},[53,598,599],{"style":59},"try ",[53,601,192],{"style":63},[53,603,604,606,608,610,612,614,616,618,620],{"class":55,"style":56},[53,605,135],{"style":63},[53,607,86],{"style":59},[53,609,64],{"style":63},[53,611,91],{"style":67},[53,613,71],{"style":63},[53,615,96],{"style":59},[53,617,99],{"style":59},[53,619,103],{"style":102},[53,621,106],{"style":63},[53,623,624,626,628,630,632,634,636,638],{"class":55,"style":56},[53,625,135],{"style":63},[53,627,113],{"style":59},[53,629,116],{"style":63},[53,631,86],{"style":59},[53,633,121],{"style":67},[53,635,124],{"style":59},[53,637,127],{"style":67},[53,639,130],{"style":63},[53,641,642,645,647,649,651,653,655],{"class":55,"style":56},[53,643,644],{"style":63},"    ",[53,646,550],{"style":102},[53,648,116],{"style":63},[53,650,149],{"style":67},[53,652,141],{"style":59},[53,654,154],{"style":63},[53,656,157],{"style":63},[53,658,659],{"class":55,"style":56},[53,660,661],{"style":63},"  }",[53,663,664,666,669,671,674],{"class":55,"style":56},[53,665,71],{"style":63},[53,667,668],{"style":59},"catch ",[53,670,116],{"style":63},[53,672,673],{"style":67},"error",[53,675,130],{"style":63},[53,677,678,680,682,684,687,690,692,695,697,699,702,705],{"class":55,"style":56},[53,679,135],{"style":63},[53,681,307],{"style":59},[53,683,116],{"style":63},[53,685,686],{"style":59},"!",[53,688,689],{"style":102},"ResponseError",[53,691,141],{"style":59},[53,693,694],{"style":102},"is",[53,696,116],{"style":63},[53,698,673],{"style":67},[53,700,701],{"style":63},")) ",[53,703,704],{"style":59},"throw ",[53,706,673],{"style":67},[53,708,709,712,714,716,718,721,723,725,727,729],{"class":55,"style":56},[53,710,711],{"style":67},"  console",[53,713,141],{"style":59},[53,715,673],{"style":102},[53,717,116],{"style":63},[53,719,720],{"style":77},"'stream rejected'",[53,722,458],{"style":59},[53,724,673],{"style":67},[53,726,141],{"style":59},[53,728,490],{"style":63},[53,730,157],{"style":63},[53,732,733],{"class":55,"style":56},[53,734,162],{"style":63},[736,737,739,740,742,743,745],"blockquote",{"as":738},"note","A drop mid-stream ends the ",[15,741,41],{}," loop. Track the last event's ",[15,744,222],{}," if you need to reconnect\nfrom where the stream stopped.",{"title":747,"searchDepth":748,"depth":748,"links":749},"",5,[750,752,753,754],{"id":30,"depth":751,"text":31},2,{"id":251,"depth":751,"text":252},{"id":434,"depth":751,"text":435},{"id":567,"depth":751,"text":568},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-axios\u002Fguides\u002Fserver-sent-events",1793639047130]