当前位置: 首页 > Web前端 > JavaScript

技术博客|如何使用SSE进行通信

时间:2023-03-27 12:07:16 JavaScript

濡備綍浣跨敤SSE杩涜閫氫俊浣滆€咃細鏍肩墿閽涘墠绔伐绋嬪笀灏忛箍娓呭瓙鏄庡墠娈垫椂闂村湪Tensorbay鏁版嵁闆嗙鐞嗗钩鍙板墠绔紑鍙戣繃绋嬩腑锛岄渶瑕佸湪涓€涓姩浣滃姛鑳戒腑瀹炵幇娲诲姩鏃ュ織鐨勫疄鏃惰緭鍑猴紝绐佺劧鎺ヨЕ鍒颁竴涓柊鎶€鏈紝杩笉鍙婂緟鎯冲垎浜粰澶у锛佹嫋浜嗕笉鍒?涓湀锛孲SE涓嶆槸蹇潵浜嗗悧锛侌煒濅粈涔堬紵浠€涔堟槸SSE锛烻SE鐨勫叏绉版槸Server-SentEvents锛屽瓧闈㈡剰鎬濇槸鏈嶅姟鍣ㄥ悜瀹㈡埛绔帹閫佷俊鎭€傛垜浠煡閬擄紝瀹㈡埛绔笌鏈嶅姟绔殑閫氫俊涓€鑸兘鏄€氳繃http璇锋眰锛岃€宧ttp璇锋眰鏄棤娉曡鏈嶅姟绔富鍔ㄦ帹閫佷俊鎭殑銆備絾鏄湁涓€涓緥澶栵紝灏辨槸瀹㈡埛绔憡璇夋湇鍔″櫒鎺ヤ笅鏉ヨ姹傜殑淇℃伅鏄€滄祦淇℃伅鈥濄€備竴涓鏄撶悊瑙g殑渚嬪瓙鏄湪娴忚鍣ㄤ腑涓嬭浇鏂囦欢銆傚鎴风鍙戦€佷笅杞借姹傚悗锛屽鎴风浼氬憡璇夋湇鍔″櫒鎺ヤ笅鏉ヨ姹傗€滄祦淇℃伅鈥濓紝鏈嶅姟鍣ㄤ細鍚戝鎴风鍙戦€佽繛缁殑淇℃伅锛屽鎴风涓嶄細鍏抽棴杩炴帴锛岀瓑寰呮帴鏀朵俊鎭€係SE灏辨槸鍒╃敤杩欐牱鐨勬満鍒舵潵瀹炵幇鏈嶅姟鍣ㄥ悜瀹㈡埛绔帹閫佷俊鎭殑鍔熻兘銆係SE鍚捣鏉ユ湁鐐瑰儚WebSocket锛屼絾缁嗗績鐨勬湅鍙嬪彲浠ュ彂鐜帮紝SSE鏄竴绉嶅崟鍚戦€氶亾锛屽彧鑳借鏈嶅姟鍣ㄥ悜瀹㈡埛绔彂閫佷俊鎭€傚鎴风绗竴娆¤Е鍙慡SE璇锋眰鍚庯紝鍙兘鎺ユ敹銆傚洖澶嶃€備笅鍥炬槸SSE鐨勫ぇ姒傛祦绋嬶紙浣滆€呰嚜宸辨妱鐨勪綔鍝侊級HOW锛烻SE鏄浣曚娇鐢ㄧ殑锛熶簡瑙d簡SSE涔嬪悗锛屾垜浠浣曚娇鐢ㄥ憿锛熷湪瀹㈡埛绔紝SSE鐨勬墍鏈堿PI閮藉畾涔夊湪EventSource瀵硅薄涓紒EventSource鏄湇鍔$鎺ㄩ€佺殑缃戠粶浜嬩欢鎺ュ彛銆侲ventSource瀹炰緥灏嗘墦寮€涓嶩TTP鏈嶅姟鐨勬寔涔呰繛鎺ワ紝浠ユ枃鏈?浜嬩欢娴佹牸寮忓彂閫佷簨浠讹紝骞跺皢淇濇寔鎵撳紑鐘舵€佺洿鍒拌瑕佹眰鍏抽棴銆傛墦寮€杩炴帴鍚庯紝鏉ヨ嚜鏈嶅姟鍣ㄧ殑浼犲叆娑堟伅灏嗕互浜嬩欢鐨勫舰寮忓彂閫佸埌鎮ㄧ殑浠g爜銆傚鏋滄帴鏀跺埌鐨勬秷鎭腑鏈変簨浠跺瓧娈碉紝鍒欒Е鍙戠殑浜嬩欢涓庝簨浠跺瓧娈电殑鍊肩浉鍚屻€傚鏋滀笉瀛樺湪浜嬩欢瀛楁锛屽皢瑙﹀彂閫氱敤浜嬩欢銆侰onstructorEventSource()pc=newEventSource(url,configuration)url涓鸿繙绋嬭祫婧愪綅缃紝configuration鎻愪緵閰嶇疆鏂拌繛鎺ョ殑閫夐」銆傚睘鎬ventSource.onerror锛氭槸浜嬩欢澶勭悊绋嬪簭锛屽彂鐢熼敊璇椂璋冪敤EventSource.onmessage锛氭槸浜嬩欢澶勭悊绋嬪簭锛屾敹鍒版秷鎭椂璋冪敤EventSource.onopen锛氭槸浜嬩欢澶勭悊绋嬪簭锛屽缓绔嬭繛鎺ユ椂璋冪敤EventSource.close锛氬鏋滈摼鎺ュ瓨鍦紝鍏抽棴杩炴帴锛宺eadyState璁剧疆涓篶losedEventSource.readyState锛氳繑鍥炰竴涓彧璇诲€硷紝鑾峰彇褰撳墠閾炬帴鐨勭姸鎬佺洰鍓嶄笌SSE鐨勮繛鎺ュ湪action涓疄鐜版椿鍔ㄦ棩蹇楃殑瀹炴椂杈撳嚭鍦ㄤ簡瑙d簡SSE鍦ㄥ鎴风鐨凙PI鍚庯紝缁撳悎瀹炴椂杈撳嚭鏃ュ織鐨勯渶姹傦紝鎴戜滑鍙互灏濊瘯浣跨敤銆傞鍏堬紝鍒嗘瀽闇€姹傘€傞€夋嫨娲诲姩鏃讹紝搴斿湪灞忓箷鍙充晶瀹炴椂娓叉煋鍏舵棩蹇椼€傞偅涔堟樉鐒讹紝鎴戜滑闇€瑕佸噯澶囦互涓嬪唴瀹癸細鏈€閲嶈鐨勬湇鍔″櫒绔疷RL鍦ㄦ秷鎭噯澶囧ソ鍚庡緱鍒皁nmessage鍥炶皟锛屾垜浠⒊鐞嗕竴涓嬮€昏緫锛屾垜浠細鍦ㄩ〉闈腑缁存姢涓ょ鐘舵€侊紝涓€绉嶆槸EventSource瀵硅薄锛屼竴绉嶆槸EventSource瀵硅薄锛屽彟涓€涓渶瑕佹樉绀虹殑鏃ュ織鍐呭鏁版嵁const[data,setData]=React.useState('');const[event,setEvent]=React.useState(null);鏃ュ織椤甸潰娓叉煋鏃讹紝涓庡悗绔痵se寤虹珛杩炴帴constnewEvent=newEventSourcePolyfill(`urlValue`,{headers});鍚庣鍥炴帹娑堟伅鏃讹紝鎴戜滑鏀瑰彉data鐨勫€硷紝杈惧埌瀹炴椂杈撳嚭鐨勬晥鏋渘ewEvent.onmessage=(e:any)=>{logs=logs.concat(`${e.data}\n`);璁剧疆鏁版嵁锛堟棩蹇楋級锛泒;newEvent.onerror=()=>{newEvent.close();};缁嗗績鐨勬湅鍙嬪彲浠ョ湅鍒拌繖閲屾敞鎰忎竴涓粏鑺傦紒閭f槸锛佹垜鏍规湰娌℃湁浣跨敤涓婇潰鎻愬埌鐨凟ventSource()锛佺敤鐨勬槸涓€涓狤ventSourcePolyfill()锛岃矊浼艰灏佽浜嗭紝鍜孍ventSource()寰堝儚浣嗗張涓嶄竴鏍凤紒涓轰粈涔堟槸杩欐牱锛?绛旀鏄疎ventSource涓嶆敮鎸佷紶鍏ョ殑header锛屾墍浠ヤ笉鑳戒紶閫掔粰servertoken銆傛墍浠ュ浜庤繖涓渶瑕乼oken鐨勮祫婧愶紝涓嶉€氳繃token灏辩浉褰撲簬鏃犺瘉椹鹃┒锛屼笉缁欎笉缁欙紝鎴戝湪涓囪兘鐨刧ayhub涓婄爺绌朵簡EventSourcePolyfill锛屽彲浠ョ敤锛佺户缁紒鏈嶅姟鍣紒浠ょ墝锛佹渶鍚庣殑curl濡備笅锛歝url'https://gas.fat.graviti.cn/gatewayv2/venom-daemon/v1/activity/83639073cb30496c8a5794e9f9ad9276/logs/?&node_id=wf-i5ruzz-qsclf-1529545071&container=main&follow=true'\-H'authority:gas.fat.graviti.cn'\-H'sec-ch-ua:"Not;ABrand";v="99","GoogleChrome";v="91","Chromium";v="91"'\-H'accept:text/event-stream'\-H'x-token:7cd82d49be4b468eb746a283121574e9'\-H'sec-ch-ua-mobile:?0'\-H'user-agent:Mozilla/5.0(Macintosh;IntelMacOSX10_15_7)AppleWebKit/537.36(KHTML,likeGecko)Chrome/91.0.4472.114Safari/537.36'\-H'sec-fetch-site:same-origin'\-H'sec-fetch-mode:cors'\-H'sec-fetch-dest:empty'\-H'referer:https://gas.fat.graviti.cn/dataset/5c2d5481/zj_test/actions/wf/i5ruzz-qsclf?tab=log'\-H'鎺ュ彈璇█锛歾h-CN,zh;q=0.9,en;q=0.8'\-H'cookie:gr_user_id=a7f2dde3-1fb7-4f4e-8ef4-adf94a0f611e锛沨m_lvt_88214dfcc23a7cf3e22c61fc2032b3cc=1624525026锛沖ga=GA1.1.588941179.1620461955锛沨m_lpvt_88214dfcc23a7cf3e22c61fc2032b3cc=1625802074锛沨m_lvt_16e30fb4f44e9e645bce6c970883ebce=1625197778,1625638587,1625712443,1625802597;_ga_JMKPTKFK1Q=GS1.1.1625824946.4.0.1625824946.0;hm_lpvt_16e30fb4f44e9e645bce6c970883ebce=1625985701锛沊-浠ょ墝=7cd82d49be4b468eb746a283121574e9;9383fdc1263bf861_gr_last_sent_sid_with_cs1=46cc67df-d7aa-4e46-9d61-75332ce7016c;9383fdc1263bf861_gr_last_sent_cs1=bf3f0b777057a26f52b661c1f19eaa86;9383fdc1263bf861_gr_session_id=46cc67df-d7aa-4e46-9d61-75332ce7016c;9383fdc1263bf861_gr_session_id_46cc67df-d7aa-4e46-9d61-75332ce7016c=鐪燂紱9383fdc1263bf861_gr_cs1=bf3f0b777057a26f52b661c1f19eaa86'\--compressed鏈€涓嶅悓鐨勬槸杩欓噷锛?H'accept:text/event-stream'\-H'x-token:7cd82d49be4b468eb746a2883121574e9'\Therenderings闃呰瀹冦€傝鎴戜滑鏈変竴鐐瑰績鉂わ笍涓嬫瑙侊紒銆愬叧浜庢牸鐗╁彴銆戯細鏍肩墿鍙版櫤鑳界鎶€瀹氫綅涓洪潰鍚戞満鍣ㄥ涔犵殑鏁版嵁骞冲彴锛岃嚧鍔涗簬涓篈I寮€鍙戣€呮墦閫犱笅涓€浠f柊鍩虹璁炬柦锛屼粠鏍规湰涓婃敼鍙樺叾涓庨潪缁撴瀯鍖栨暟鎹殑浜や簰鏂瑰紡閫氳繃闈炵粨鏋勫寲鏁版嵁绠$悊宸ュ叿TensorBay鍜屽紑婧愭暟鎹泦绀惧尯OpenDatasets锛屽府鍔╂満鍣ㄥ涔犲洟闃熷拰涓汉闄嶄綆鏁版嵁鑾峰彇銆佸瓨鍌ㄥ拰澶勭悊鎴愭湰锛屽姞閫烝I寮€鍙戝拰浜у搧鍒涙柊锛岀敤浜哄伐鏅鸿兘璧嬭兘鍗冭鐧句笟锛岄┍鍔ㄤ骇涓氬崌绾ф彁渚涘潥瀹炲熀纭€銆?/p>