[{"data":1,"prerenderedAt":419},["ShallowReactive",2],{"term-w\u002Fwebsocket":3,"related-w\u002Fwebsocket":400},{"id":4,"title":5,"acronym":6,"body":7,"category":381,"description":382,"difficulty":383,"extension":384,"letter":385,"meta":386,"navigation":189,"path":387,"related":388,"seo":394,"sitemap":395,"stem":398,"subcategory":6,"__hash__":399},"terms\u002Fterms\u002Fw\u002Fwebsocket.md","WebSocket",null,{"type":8,"value":9,"toc":375},"minimark",[10,15,19,23,26,30,364,368,371],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"WebSocket is like upgrading a walkie-talkie from push-to-talk to a full phone call. Normal HTTP is push-to-talk (you ask, server responds, connection closes). WebSocket keeps the line open so both sides can talk anytime. Perfect for chat apps, live dashboards, and games.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"WebSocket is a full-duplex, bidirectional communication protocol over a single, persistent TCP connection. It starts with an HTTP handshake (upgrade request) then switches protocols. Unlike HTTP, either side can send data at any time without a new request.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F WebSocket client\nconst ws = new WebSocket('wss:\u002F\u002Fexample.com\u002Fsocket');\nws.onopen = () => ws.send('Hello Server!');\nws.onmessage = (event) => console.log('Received:', event.data);\n\n\u002F\u002F WebSocket server (Node.js + ws library)\nconst WebSocket = require('ws');\nconst wss = new WebSocket.Server({ port: 8080 });\nwss.on('connection', (ws) => {\n  ws.on('message', (msg) => ws.send(`Echo: ${msg}`));\n});\n","javascript","",[38,39,40,49,89,131,184,191,197,222,264,297,354],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F WebSocket client\n",[41,50,52,56,60,64,67,71,74,77,81,83,86],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," ws ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":62}," new",[41,68,70],{"class":69},"s2Zo4"," WebSocket",[41,72,73],{"class":58},"(",[41,75,76],{"class":62},"'",[41,78,80],{"class":79},"sfazB","wss:\u002F\u002Fexample.com\u002Fsocket",[41,82,76],{"class":62},[41,84,85],{"class":58},")",[41,87,88],{"class":62},";\n",[41,90,92,95,98,101,104,107,110,113,115,118,120,122,125,127,129],{"class":43,"line":91},3,[41,93,94],{"class":58},"ws",[41,96,97],{"class":62},".",[41,99,100],{"class":69},"onopen",[41,102,103],{"class":62}," =",[41,105,106],{"class":62}," ()",[41,108,109],{"class":54}," =>",[41,111,112],{"class":58}," ws",[41,114,97],{"class":62},[41,116,117],{"class":69},"send",[41,119,73],{"class":58},[41,121,76],{"class":62},[41,123,124],{"class":79},"Hello Server!",[41,126,76],{"class":62},[41,128,85],{"class":58},[41,130,88],{"class":62},[41,132,134,136,138,141,143,146,150,152,154,157,159,162,164,166,169,171,174,177,179,182],{"class":43,"line":133},4,[41,135,94],{"class":58},[41,137,97],{"class":62},[41,139,140],{"class":69},"onmessage",[41,142,103],{"class":62},[41,144,145],{"class":62}," (",[41,147,149],{"class":148},"sHdIc","event",[41,151,85],{"class":62},[41,153,109],{"class":54},[41,155,156],{"class":58}," console",[41,158,97],{"class":62},[41,160,161],{"class":69},"log",[41,163,73],{"class":58},[41,165,76],{"class":62},[41,167,168],{"class":79},"Received:",[41,170,76],{"class":62},[41,172,173],{"class":62},",",[41,175,176],{"class":58}," event",[41,178,97],{"class":62},[41,180,181],{"class":58},"data)",[41,183,88],{"class":62},[41,185,187],{"class":43,"line":186},5,[41,188,190],{"emptyLinePlaceholder":189},true,"\n",[41,192,194],{"class":43,"line":193},6,[41,195,196],{"class":47},"\u002F\u002F WebSocket server (Node.js + ws library)\n",[41,198,200,202,205,207,210,212,214,216,218,220],{"class":43,"line":199},7,[41,201,55],{"class":54},[41,203,204],{"class":58}," WebSocket ",[41,206,63],{"class":62},[41,208,209],{"class":69}," require",[41,211,73],{"class":58},[41,213,76],{"class":62},[41,215,94],{"class":79},[41,217,76],{"class":62},[41,219,85],{"class":58},[41,221,88],{"class":62},[41,223,225,227,230,232,234,236,238,241,243,246,250,253,257,260,262],{"class":43,"line":224},8,[41,226,55],{"class":54},[41,228,229],{"class":58}," wss ",[41,231,63],{"class":62},[41,233,66],{"class":62},[41,235,70],{"class":58},[41,237,97],{"class":62},[41,239,240],{"class":69},"Server",[41,242,73],{"class":58},[41,244,245],{"class":62},"{",[41,247,249],{"class":248},"swJcz"," port",[41,251,252],{"class":62},":",[41,254,256],{"class":255},"sbssI"," 8080",[41,258,259],{"class":62}," }",[41,261,85],{"class":58},[41,263,88],{"class":62},[41,265,267,270,272,275,277,279,282,284,286,288,290,292,294],{"class":43,"line":266},9,[41,268,269],{"class":58},"wss",[41,271,97],{"class":62},[41,273,274],{"class":69},"on",[41,276,73],{"class":58},[41,278,76],{"class":62},[41,280,281],{"class":79},"connection",[41,283,76],{"class":62},[41,285,173],{"class":62},[41,287,145],{"class":62},[41,289,94],{"class":148},[41,291,85],{"class":62},[41,293,109],{"class":54},[41,295,296],{"class":62}," {\n",[41,298,300,303,305,307,309,311,314,316,318,320,323,325,327,329,331,333,335,338,341,344,346,349,352],{"class":43,"line":299},10,[41,301,302],{"class":58},"  ws",[41,304,97],{"class":62},[41,306,274],{"class":69},[41,308,73],{"class":248},[41,310,76],{"class":62},[41,312,313],{"class":79},"message",[41,315,76],{"class":62},[41,317,173],{"class":62},[41,319,145],{"class":62},[41,321,322],{"class":148},"msg",[41,324,85],{"class":62},[41,326,109],{"class":54},[41,328,112],{"class":58},[41,330,97],{"class":62},[41,332,117],{"class":69},[41,334,73],{"class":248},[41,336,337],{"class":62},"`",[41,339,340],{"class":79},"Echo: ",[41,342,343],{"class":62},"${",[41,345,322],{"class":58},[41,347,348],{"class":62},"}`",[41,350,351],{"class":248},"))",[41,353,88],{"class":62},[41,355,357,360,362],{"class":43,"line":356},11,[41,358,359],{"class":62},"}",[41,361,85],{"class":58},[41,363,88],{"class":62},[11,365,367],{"id":366},"when-youll-hear-this","When You'll Hear This",[16,369,370],{},"\"Use WebSockets for real-time chat instead of polling.\" \u002F \"The live dashboard uses WebSocket to push updates without page refresh.\"",[372,373,374],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":36,"searchDepth":51,"depth":51,"links":376},[377,378,379,380],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":366,"depth":51,"text":367},"networking","WebSocket is like upgrading a walkie-talkie from push-to-talk to a full phone call.","intermediate","md","w",{},"\u002Fterms\u002Fw\u002Fwebsocket",[389,390,391,392,393],"Socket","HTTP","TCP","HTTP\u002F2","Protocol",{"title":5,"description":382},{"changefreq":396,"priority":397},"weekly",0.7,"terms\u002Fw\u002Fwebsocket","8ripVYggd_lkr0NjNEvpXXhDhkuQFWnwr93Dr8rF5wo",[401,406,409,412,415],{"title":390,"path":402,"acronym":403,"category":381,"difficulty":404,"description":405},"\u002Fterms\u002Fh\u002Fhttp","HyperText Transfer Protocol","beginner","HTTP is the language your browser uses to ask websites for stuff. You type a URL, your browser shouts 'hey, give me that page!",{"title":392,"path":407,"acronym":6,"category":381,"difficulty":383,"description":408},"\u002Fterms\u002Fh\u002Fhttp-2","HTTP\u002F2 is a supercharged version of HTTP. With HTTP\u002F1.1, you could only ask for one thing at a time per connection.",{"title":393,"path":410,"acronym":6,"category":381,"difficulty":404,"description":411},"\u002Fterms\u002Fp\u002Fprotocol","A protocol is just an agreed set of rules for how two parties communicate.",{"title":389,"path":413,"acronym":6,"category":381,"difficulty":383,"description":414},"\u002Fterms\u002Fs\u002Fsocket","A socket is the combination of an IP address plus a port number — it's the complete 'address' for a specific connection.",{"title":391,"path":416,"acronym":417,"category":381,"difficulty":383,"description":418},"\u002Fterms\u002Ft\u002Ftcp","Transmission Control Protocol","TCP is like sending a package with delivery confirmation.",1776518258075]