闆惰窛绂绘帴瑙ebsocket馃殌
Posted 涓変綑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了闆惰窛绂绘帴瑙ebsocket馃殌相关的知识，希望对你有一定的参考价值。
浠€涔堟槸WebSocket
瀹氫箟
Websocket鏄竴涓寔涔呭寲鐨勭綉缁滈€氫俊鍗忚锛屽彲浠ュ湪鍗曚釜 TCP 杩炴帴涓婅繘琛?code>鍏ㄥ弻宸ラ€氳锛屾病鏈変簡Request鍜?code>Response鐨勬蹇碉紝涓よ€呭湴浣嶅畬鍏ㄥ钩绛夛紝杩炴帴涓€鏃﹀缓绔嬶紝瀹㈡埛绔拰鏈嶅姟绔箣闂村疄鏃跺彲浠ヨ繘琛屽弻鍚戞暟鎹紶杈?/p>
鍏宠仈鍜屽尯鍒?/h4>- HTTP
- HTTP鏄潪鎸佷箙鐨勫崗璁紝瀹㈡埛绔兂鐭ラ亾鏈嶅姟绔殑澶勭悊杩涘害鍙兘閫氳繃涓嶅仠鍦颁娇鐢?
Ajax杩涜杞鎴栬€呴噰鐢?long poll 鐨勬柟寮忔潵锛屼絾鏄墠鑰呭鏈嶅姟鍣ㄥ帇鍔涘ぇ锛屽悗鑰呭垯浼氬洜涓轰竴鐩寸瓑寰匯esponse閫犳垚闃诲 
- 铏界劧http1.1榛樿寮€鍚簡
keep-alive闀胯繛鎺ヤ繚鎸佷簡杩欎釜TCP閫氶亾浣垮緱鍦ㄤ竴涓狧TTP杩炴帴涓紝鍙互鍙戦€佸涓猂equest锛屾帴鏀跺涓猂esponse锛屼絾鏄竴涓猺equest鍙兘鏈変竴涓猺esponse銆傝€屼笖杩欎釜response涔熸槸琚姩鐨勶紝涓嶈兘涓诲姩鍙戣捣銆?/li> - websocket铏界劧鏄嫭绔嬩簬HTTP鐨勪竴绉嶅崗璁紝浣嗘槸websocket蹇呴』渚濊禆 HTTP 鍗忚杩涜涓€娆?code>鎻℃墜(鍦ㄦ彙鎵嬮樁娈垫槸涓€鏍风殑)锛屾彙鎵嬫垚鍔熷悗锛屾暟鎹氨鐩存帴浠?TCP閫氶亾浼犺緭锛屼笌 HTTP 鏃犲叧浜嗭紝鍙互鐢ㄤ竴寮犲浘鐞嗚В涓よ€呮湁浜ら泦锛屼絾鏄苟涓嶆槸鍏ㄩ儴銆?
![]()
- socket
- socket涔熻绉颁负
濂楁帴瀛?/code>锛屼笌HTTP鍜學ebSocket涓嶄竴鏍凤紝socket涓嶆槸鍗忚锛屽畠鏄湪绋嬪簭灞傞潰涓婂浼犺緭灞傚崗璁紙鍙互涓昏鐞嗚В涓篢CP/IP锛夌殑鎺ュ彛灏佽銆傚彲浠ョ悊瑙ｄ负涓€涓兘澶熸彁渚涚瀵圭鐨勯€氫俊鐨勮皟鐢ㄦ帴鍙ｏ紙API锛?/li>- 瀵逛簬绋嬪簭鍛樿€岃█锛屽叾闇€瑕佸湪 A 绔垱寤轰竴涓?socket 瀹炰緥锛屽苟涓鸿繖涓疄渚嬫彁渚涘叾鎵€瑕佽繛鎺ョ殑 B 绔殑 IP 鍦板潃鍜岀鍙ｅ彿锛岃€屽湪 B 绔垱寤哄彟涓€涓?socket 瀹炰緥锛屽苟涓旂粦瀹氭湰鍦扮鍙ｅ彿鏉ヨ繘琛岀洃鍚€傚綋 A 鍜?B 寤虹珛杩炴帴鍚庯紝鍙屾柟灏卞缓绔嬩簡涓€涓瀵圭鐨?TCP 杩炴帴锛屼粠鑰屽彲浠ヨ繘琛屽弻鍚戦€氫俊銆俉ebSocekt鍊熼壌浜?socket 鐨勬€濇兂锛屼负 client 鍜?server 涔嬮棿鎻愪緵浜嗙被浼肩殑鍙屽悜閫氫俊鏈哄埗
搴旂敤鍦烘櫙
Ajax杩涜杞鎴栬€呴噰鐢?long poll 鐨勬柟寮忔潵锛屼絾鏄墠鑰呭鏈嶅姟鍣ㄥ帇鍔涘ぇ锛屽悗鑰呭垯浼氬洜涓轰竴鐩寸瓑寰匯esponse閫犳垚闃诲 keep-alive闀胯繛鎺ヤ繚鎸佷簡杩欎釜TCP閫氶亾浣垮緱鍦ㄤ竴涓狧TTP杩炴帴涓紝鍙互鍙戦€佸涓猂equest锛屾帴鏀跺涓猂esponse锛屼絾鏄竴涓猺equest鍙兘鏈変竴涓猺esponse銆傝€屼笖杩欎釜response涔熸槸琚姩鐨勶紝涓嶈兘涓诲姩鍙戣捣銆?/li>濂楁帴瀛?/code>锛屼笌HTTP鍜學ebSocket涓嶄竴鏍凤紝socket涓嶆槸鍗忚锛屽畠鏄湪绋嬪簭灞傞潰涓婂浼犺緭灞傚崗璁紙鍙互涓昏鐞嗚В涓篢CP/IP锛夌殑鎺ュ彛灏佽銆傚彲浠ョ悊瑙ｄ负涓€涓兘澶熸彁渚涚瀵圭鐨勯€氫俊鐨勮皟鐢ㄦ帴鍙ｏ紙API锛?/li>- 瀵逛簬绋嬪簭鍛樿€岃█锛屽叾闇€瑕佸湪 A 绔垱寤轰竴涓?socket 瀹炰緥锛屽苟涓鸿繖涓疄渚嬫彁渚涘叾鎵€瑕佽繛鎺ョ殑 B 绔殑 IP 鍦板潃鍜岀鍙ｅ彿锛岃€屽湪 B 绔垱寤哄彟涓€涓?socket 瀹炰緥锛屽苟涓旂粦瀹氭湰鍦扮鍙ｅ彿鏉ヨ繘琛岀洃鍚€傚綋 A 鍜?B 寤虹珛杩炴帴鍚庯紝鍙屾柟灏卞缓绔嬩簡涓€涓瀵圭鐨?TCP 杩炴帴锛屼粠鑰屽彲浠ヨ繘琛屽弻鍚戦€氫俊銆俉ebSocekt鍊熼壌浜?socket 鐨勬€濇兂锛屼负 client 鍜?server 涔嬮棿鎻愪緵浜嗙被浼肩殑鍙屽悜閫氫俊鏈哄埗
WebSocket鍙互鍋氬脊骞曘€佹秷鎭闃呫€佸鐜╁娓告垙銆佸崗鍚岀紪杈戙€佽偂绁ㄥ熀閲戝疄鏃舵姤浠枫€佽棰戜細璁€佸湪绾挎暀鑲层€佽亰澶╁绛夊簲鐢ㄥ疄鏃剁洃鍚湇鍔＄鍙樺寲
Websocket鎻℃墜
- Websocket鎻℃墜璇锋眰鎶ユ枃锛?/li>
GET聽/chat聽HTTP/1.1
Host:聽server.example.com
Upgrade:聽websocket
Connection:聽Upgrade
Sec-WebSocket-Key:聽x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol:聽chat,聽superchat
Sec-WebSocket-Version:聽13
Origin:聽http://example.com
澶嶅埗浠ｇ爜涓嬮潰鏄笌浼犵粺 HTTP 鎶ユ枃涓嶅悓鐨勫湴鏂癸細
Upgrade:聽websocket
Connection:聽Upgrade
澶嶅埗浠ｇ爜琛ㄧず鍙戣捣鐨勬槸 WebSocket 鍗忚
Sec-WebSocket-Key:聽x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol:聽chat,聽superchat
Sec-WebSocket-Version:聽13
澶嶅埗浠ｇ爜Sec-WebSocket-Key 鏄敱娴忚鍣ㄩ殢鏈虹敓鎴愮殑锛岄獙璇佹槸鍚﹀彲浠ヨ繘琛學ebsocket閫氫俊锛岄槻姝㈡伓鎰忔垨鑰呮棤鎰忕殑杩炴帴銆?/p>
Sec_WebSocket-Protocol 鏄敤鎴疯嚜瀹氫箟鐨勫瓧绗︿覆锛岀敤鏉ユ爣璇嗘湇鍔℃墍闇€瑕佺殑鍗忚
Sec-WebSocket-Version 琛ㄧず鏀寔鐨?WebSocket 鐗堟湰銆?/p>
- 鏈嶅姟鍣ㄥ搷搴旓細
HTTP/1.1聽101聽Switching聽Protocols
Upgrade:聽websocket
Connection:聽Upgrade
Sec-WebSocket-Accept:聽HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol:聽chat
澶嶅埗浠ｇ爜101 鍝嶅簲鐮?/strong> 琛ㄧず瑕佽浆鎹㈠崗璁€?/p>
Connection: Upgrade 琛ㄧず鍗囩骇鏂板崗璁姹傘€?/p>
Upgrade: websocket 琛ㄧず鍗囩骇涓?WebSocket 鍗忚銆?/p>
Sec-WebSocket-Accept 鏄粡杩囨湇鍔″櫒纭锛屽苟涓斿姞瀵嗚繃鍚庣殑 Sec-WebSocket-Key銆傜敤鏉ヨ瘉鏄庡鎴风鍜屾湇鍔″櫒涔嬮棿鑳借繘琛岄€氫俊浜嗐€?/p>
Sec-WebSocket-Protocol 琛ㄧず鏈€缁堜娇鐢ㄧ殑鍗忚銆?/p>
鑷虫锛屽鎴风鍜屾湇鍔″櫒鎻℃墜鎴愬姛寤虹珛浜哤ebsocket杩炴帴锛孒TTP宸茬粡瀹屾垚瀹冩墍鏈夊伐浣滀簡锛屾帴涓嬫潵灏辨槸瀹屽叏鎸夌収Websocket鍗忚杩涜閫氫俊浜嗐€?/p>
鍏充簬Websocket
WebSocket蹇冭烦
鍙兘浼氭湁涓€浜涙湭鐭ユ儏鍐靛鑷碨OCKET鏂紑锛岃€屽鎴风鍜屾湇鍔＄鍗翠笉鐭ラ亾锛岄渶瑕佸鎴风瀹氭椂鍙戦€佷竴涓?code>蹇冭烦 Ping 璁╂湇鍔＄鐭ラ亾鑷繁鍦ㄧ嚎锛岃€屾湇鍔＄涔熻鍥炲涓€涓?code>蹇冭烦 Pong鍛婅瘔瀹㈡埛绔嚜宸卞彲鐢紝鍚﹀垯瑙嗕负鏂紑
WebSocket鐘舵€?/h4>
WebSocket 瀵硅薄涓殑readyState灞炴€ф湁鍥涚鐘舵€侊細
- 0: 琛ㄧず姝ｅ湪杩炴帴
- 1: 琛ㄧず杩炴帴鎴愬姛锛屽彲浠ラ€氫俊浜?/li>
- 2: 琛ㄧず杩炴帴姝ｅ湪鍏抽棴
- 3: 琛ㄧず杩炴帴宸茬粡鍏抽棴锛屾垨鑰呮墦寮€杩炴帴澶辫触
WebSocket瀹炶返
鏈嶅姟绔帴鏀跺彂閫佹秷鎭?/h4>
WebSocket鐨勬湇鍔＄閮ㄥ垎锛屾湰鏂囦細浠ode.js鎼缓
瀹夎express鍜岃礋璐ｅ鐞哤ebSocket鍗忚鐨?code>ws锛?/p>
npm聽install聽express聽ws
澶嶅埗浠ｇ爜瀹夎鎴愬姛鍚庣殑package.json:
鎺ョ潃鍦ㄦ牴鐩綍鍒涘缓server.js鏂囦欢:
//寮曞叆express聽鍜屄爓s
const聽express聽=聽require(\'express\');
const聽SocketServer聽=聽require(\'ws\').Server;
//鎸囧畾寮€鍚殑绔彛鍙?const聽PORT聽=聽3000;
//聽鍒涘缓express锛岀粦瀹氱洃鍚?000绔彛锛屼笖璁惧畾寮€鍚悗鍦╟onsol涓彁绀?const聽server聽=聽express().listen(PORT,聽()聽=>聽console.log(`Listening聽on聽${PORT}`));
//聽灏唀xpress浜ょ粰SocketServer寮€鍚疻ebSocket鐨勬湇鍔?const聽wss聽=聽new聽SocketServer({聽server聽});
//褰撀燱ebSocket聽浠庡閮ㄨ繛鎺ユ椂鎵ц
wss.on(\'connection\',聽(ws)聽=>聽{
聽聽//杩炴帴鏃舵墽琛屾聽console聽鎻愮ず
聽聽console.log(\'Client聽connected\');
聽聽//聽瀵筸essage璁剧疆鐩戝惉锛屾帴鏀朵粠瀹㈡埛绔彂閫佺殑娑堟伅
聽聽ws.on(\'message\',聽(data)聽=>聽{
聽聽聽聽//data涓哄鎴风鍙戦€佺殑娑堟伅锛屽皢娑堟伅鍘熷皝涓嶅姩杩斿洖鍥炲幓
聽聽聽聽ws.send(data);
聽聽});
聽聽//聽褰揥ebSocket鐨勮繛鎺ュ叧闂椂鎵ц
聽聽ws.on(\'close\',聽()聽=>聽{
聽聽聽聽console.log(\'Close聽connected\');
聽聽});
});
澶嶅埗浠ｇ爜鎵цnode server.js鍚姩鏈嶅姟锛岀鍙ｆ墦寮€鍚庝細鎵ц鐩戝惉鏃堕棿鎵撳嵃鎻愮ず锛岃鏄庢湇鍔″惎鍔ㄦ垚鍔?/p>
鍦ㄥ紑鍚疻ebSocket鍚庯紝鏈嶅姟绔細鍦╩essage涓洃鍚紝鎺ユ敹鍙傛暟data鎹曡幏瀹㈡埛绔彂閫佺殑娑堟伅锛岀劧鍚庝娇鐢╯end鍙戦€佹秷鎭?/p>
瀹㈡埛绔帴鏀跺彂閫佹秷鎭?/h4>
鍒嗗埆鍦ㄦ牴鐩綍鍒涘缓index.html鍜宨ndex.js鏂囦欢
- index.html
<html>
聽聽<body>
聽聽聽聽<script聽src="./index.js"></script>
聽聽</body>
</html>
澶嶅埗浠ｇ爜- index.js
//聽浣跨敤WebSocket鐨勫湴鍧€鍚戞湇鍔＄寮€鍚繛鎺?let聽ws聽=聽new聽WebSocket(\'ws://localhost:3000\');
//聽寮€鍚悗鐨勫姩浣滐紝鎸囧畾鍦ㄨ繛鎺ュ悗鎵ц鐨勪簨浠?ws.onopen聽=聽()聽=>聽{
聽聽console.log(\'open聽connection\');
};
//聽鎺ユ敹鏈嶅姟绔彂閫佺殑娑堟伅
ws.onmessage聽=聽(event)聽=>聽{
聽聽console.log(event);
};
//聽鎸囧畾鍦ㄥ叧闂悗鎵ц鐨勪簨浠?ws.onclose聽=聽()聽=>聽{
聽聽console.log(\'close聽connection\');
};
澶嶅埗浠ｇ爜涓婇潰鐨?code>url灏辨槸鏈満node寮€鍚殑鏈嶅姟鍦板潃锛屽垎鍒寚瀹氳繛鎺ワ紙onopen锛夛紝鍏抽棴锛坥nclose锛夊拰娑堟伅鎺ユ敹锛坥nmessage锛夌殑鎵ц浜嬩欢锛岃闂甴tml锛屾墦鍗皐s淇℃伅
鎵撳嵃浜?code>open connection璇存槑杩炴帴鎴愬姛锛屽鎴风浼氫娇鐢?code>onmessage澶勭悊鎺ユ敹
鍏朵腑event鍙傛暟鍖呭惈杩欐娌熼€氱殑璇︾粏淇℃伅锛屼粠鏈嶅姟绔洖浼犵殑娑堟伅浼氬湪event鐨刣ata灞炴€т腑銆?/p>
鎵嬪姩鍦ㄦ帶鍒跺彴璋冪敤send鍙戦€佹秷鎭紝鎵撳嵃event鍥炰紶淇℃伅:
鏈嶅姟绔畾鏃跺彂閫?/h4>
涓婇潰鏄粠瀹㈡埛绔彂閫佹秷鎭紝鏈嶅姟绔洖浼犮€傛垜浠篃鍙互閫氳繃setInterval璁╂湇鍔＄鍦ㄥ浐瀹氭椂闂村彂閫佹秷鎭粰瀹㈡埛绔?
server.js淇敼濡備笅:
//褰揥ebSocket浠庡閮ㄨ繛鎺ユ椂鎵ц
wss.on(\'connection\',聽(ws)聽=>聽{
聽聽//杩炴帴鏃舵墽琛屾聽console聽鎻愮ず
聽聽console.log(\'Client聽connected\');
+聽聽//鍥哄畾鍙戦€佹渶鏂版秷鎭粰瀹㈡埛绔?+聽聽const聽sendNowTime聽=聽setInterval(()聽=>聽{
+聽聽聽聽ws.send(String(new聽Date()));
+聽聽},聽1000);
-聽聽//瀵筸essage璁剧疆鐩戝惉锛屾帴鏀朵粠瀹㈡埛绔彂閫佺殑娑堟伅
-聽聽ws.on(\'message\',聽(data)聽=>聽{
-聽聽聽聽//data涓哄鎴风鍙戦€佺殑娑堟伅锛屽皢娑堟伅鍘熷皝涓嶅姩杩斿洖鍥炲幓
-聽聽聽聽ws.send(data);
-聽聽});
聽聽//褰撀燱ebSocket鐨勮繛鎺ュ叧闂椂鎵ц
聽聽ws.on(\'close\',聽()聽=>聽{
聽聽聽聽console.log(\'Close聽connected\');
聽聽});
});
澶嶅埗浠ｇ爜瀹㈡埛绔繛鎺ュ悗灏变細瀹氭椂鎺ユ敹锛岀洿鑷虫垜浠叧闂瓀ebsocket鏈嶅姟
澶氫汉鑱婂ぉ
濡傛灉澶氫釜瀹㈡埛绔繛鎺ユ寜鐓т笂闈㈢殑鏂瑰紡鍙細杩斿洖鍚勮嚜鍙戦€佺殑娑堟伅锛屽厛娉ㄩ噴鏈嶅姟绔畾鏃跺彂閫侊紝寮€鍚袱涓獥鍙ｆā鎷燂細
濡傛灉鎴戜滑瑕佽瀹㈡埛绔棿娑堟伅鍏变韩锛屼篃鍚屾椂鎺ユ敹鍒版湇鍔＄鍥炰紶鐨勬秷鎭憿锛?/p>
鎴戜滑鍙互浣跨敤clients鎵惧嚭褰撳墠鎵€鏈夎繛鎺ヤ腑鐨勫鎴风 锛屽苟閫氳繃鍥炰紶娑堟伅鍙戦€佸埌姣忎竴涓鎴风 涓細
淇敼server.js濡備笅:
...
//褰揥ebSocket浠庡閮ㄨ繛鎺ユ椂鎵ц
wss.on(\'connection\',聽(ws)聽=>聽{
聽聽//杩炴帴鏃舵墽琛屾聽console聽鎻愮ず
聽聽console.log(\'Client聽connected\');
-聽聽//鍥哄畾鍙戦€佹渶鏂版秷鎭粰瀹㈡埛绔?-聽聽const聽sendNowTime聽=聽setInterval(()聽=>聽{
-聽聽聽聽ws.send(String(new聽Date()));
-聽},聽1000);
+聽聽//瀵筸essage璁剧疆鐩戝惉锛屾帴鏀朵粠瀹㈡埛绔彂閫佺殑娑堟伅
+聽聽聽ws.on(\'message\',聽(data)聽=>聽{
+聽聽聽聽//鍙栧緱鎵€鏈夎繛鎺ヤ腑鐨劼犲鎴风
+聽聽聽聽let聽clients聽=聽wss.clients;
+聽聽聽聽//寰幆锛屽彂閫佹秷鎭嚦姣忎釜瀹㈡埛绔?+聽聽聽聽clients.forEach((client)聽=>聽{
+聽聽聽聽聽聽client.send(data);
+聽聽聽聽});
+聽聽聽});
聽聽//褰揥ebSocket鐨勮繛鎺ュ叧闂椂鎵ц
聽聽ws.on(\'close\',聽()聽=>聽{
聽聽聽聽console.log(\'Close聽connected\');
聽聽});
});
澶嶅埗浠ｇ爜杩欐牱涓€鏉ワ紝涓嶈鍦ㄥ摢涓鎴风鍙戦€佹秷鎭紝鏈嶅姟绔兘鑳藉皢娑堟伅鍥炰紶鍒版瘡涓鎴风 锛? 鍙互瑙傚療涓嬭繛鎺ヤ俊鎭?
鎬荤粨 馃
绾镐笂寰楁潵缁堣娴咃紝缁濈煡姝や簨瑕佽含琛?/strong>锛屽笇鏈涘ぇ瀹跺彲浠ユ妸鐞嗚閰嶅悎涓婇潰鐨勫疄渚嬭繘琛屾秷鍖栵紝鎼ソ鏈嶅姟绔篃鍙互鐩存帴浣跨敤娴嬭瘯宸ュ叿濂藉ソ鐜╄€嶄竴娉?/p>
鍙傝€冩枃绔?馃摐
鉂わ笍 闃竴宄?WebSocket 鏁欑▼
鉂わ笍 Using WebSockets on Heroku with Node.js
鉂わ笍 WebSocket 鏄粈涔堝師鐞嗭紵涓轰粈涔堝彲浠ュ疄鐜版寔涔呰繛鎺ワ紵
鎵╁睍 馃弳
濡傛灉浣犺寰楁湰鏂囧浣犳湁甯姪锛屽彲浠ユ煡鐪嬫垜鐨勫叾浠栨枃绔犫潳锔忥細
馃憤 Web寮€鍙戝簲浜嗚В鐨?绉嶈璁℃ā寮忦煃?/a>
馃憤 10涓畝鍗曠殑鎶€宸ц浣犵殑 vue.js 浠ｇ爜鏇翠紭闆咅煃?/a>
馃憤 Web寮€鍙戝簲璇ョ煡閬撶殑鏁版嵁缁撴瀯馃崐
馃憤 缁忓吀闈㈣瘯棰橈紒浠庤緭鍏RL鍒伴〉闈㈠睍绀轰綘杩樹笉璧剁揣瀛﹁捣鏉ワ紵馃崐
馃憤 娴呰皥SSL鍗忚鐨勬彙鎵嬭繃绋嬸煃?/a>
以上是关于闆惰窛绂绘帴瑙ebsocket馃殌的主要内容，如果未能解决你的问题，请参考以下文章