閱讀目錄1、什么是webSocket?2、webSocket實(shí)現(xiàn)原理3、webSocket優(yōu)點(diǎn)4、webSocket和socket的區(qū)別5、webSocket API6、webSocket的使用================================================================ 1、什么是webSocket?webSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。默認(rèn)端口號(hào)80和443 2、webSocket實(shí)現(xiàn)原理在實(shí)現(xiàn)webSocket連線過(guò)程中，需要通過(guò)瀏覽器發(fā)出webSocket連線請(qǐng)求，然后服務(wù)器發(fā)出回應(yīng)，這個(gè)過(guò)程通常稱為“握手”。在webSocket API,瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以互相傳遞數(shù)據(jù)。 3、webSocket優(yōu)點(diǎn)在以前的消息推送機(jī)制中，用的都是Ajax輪詢(polling)，在特定的時(shí)間間隔由瀏覽器自動(dòng)發(fā)出請(qǐng)求，將服務(wù)器的消息主動(dòng)獲取回來(lái)，這種方式是非常好資源的，因?yàn)樗举|(zhì)還是http請(qǐng)求，而且顯得非常笨拙。而 webSocket在瀏覽器和服務(wù)器完成一個(gè)握手的動(dòng)作，在建立連接之后，服務(wù)器可以主動(dòng)傳送數(shù)據(jù)給客戶端，客戶端也可以隨時(shí)向服務(wù)器發(fā)送數(shù)據(jù)。
4、 webSocket和socket的區(qū)別1） webSocket
open：值為1，表示連接成功，可以開始通信 closing:值為2，表示連接正在關(guān)閉 closed：值為3，表示連接已經(jīng)關(guān)閉，或者打開連接失敗 (3)webSocket.onopen onopen(): 連接成功后的回調(diào)函數(shù)  (4)webSocket.onclose
onclose(): 連接關(guān)閉后的回調(diào)函數(shù)
 (5)webSocket.onmessage
onmessage(): 接收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)
 (6)webSocket.send()
send方法用于向服務(wù)器發(fā)送數(shù)據(jù)
(7)webSocket.bufferedAmount
bufferedAmount屬性，表示還有多少字節(jié)的二進(jìn)制數(shù)據(jù)沒(méi)有發(fā)送出去。它可以用來(lái)判斷發(fā)送是否結(jié)束(7)webSocket.onerror onerror(): 連接發(fā)生錯(cuò)誤后的回調(diào)函數(shù) (8)webSocket.heartMessage heartMessage: 發(fā)送給后臺(tái)的心跳包參數(shù)（必填），給服務(wù)器端的心跳包就是定期給服務(wù)器發(fā)送消息 (9)webSocket.timer timer: 給后臺(tái)傳送心跳包的時(shí)間間隔，不傳時(shí)使用默認(rèn)值3000毫秒 (10)webSocket.isReconnect isReconnect: 連接斷掉是否重新連接，傳true為重新連接 6、webSocket的應(yīng)用（Github地址：https://github.com/sherry726/webSocket） 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>webSocket封裝</title>
8 </head>
9 <body>
10 <script>
11 /* webSocket封裝
12 * @param url: webSocket接口地址與攜帶參數(shù)（必填）
13 * @param onopen(): 連接成功后的回調(diào)函數(shù)
14 * @param onmessage(): 接收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)
15 * @param onclose(): 連接關(guān)閉后的回調(diào)函數(shù)
16 * @param onerror(): 連接發(fā)生錯(cuò)誤后的回調(diào)函數(shù)
17 * @param heartMessage: 發(fā)送給后臺(tái)的心跳包參數(shù)（必填），給服務(wù)器端的心跳包就是定期給服務(wù)器發(fā)送消息
18 * @param timer: 給后臺(tái)傳送心跳包的時(shí)間間隔，不傳時(shí)使用默認(rèn)值3000毫秒
19 * @param isReconnect: 連接斷掉是否重新連接，傳true為重新連接
20 */
21 function useWebSocket(url,onOpenFunc,onMessageFunc,onCloseFunc,onErrorFunc,heartMessage,timer,isReconnect){
22 let isConnected = false; //設(shè)置已連接webSocket標(biāo)識(shí)
23 let ws = null; //定義webSocket對(duì)象
24 //創(chuàng)建并連接webSocket
25 let connect = function(){
26 if(!isConnected){
27 //若未連接webSocket，則創(chuàng)建一個(gè)新的webSocket
28 console.log(url);
29 ws = new WebSocket(url);
30 isConnected = true;
31 }
32 }
33 //向后臺(tái)發(fā)送心跳消息
34 let heartCheck = function(){
35 ws.send(JSON.stringify(heartMessage));
36 }
37 //初始化事件回調(diào)函數(shù)
38 let initEventHandle = function(){
39 console.log('已連接');
40 ws.addEventListener('open',function(event){
41 //給后臺(tái)發(fā)心跳請(qǐng)求
42 heartCheck();
43 //若傳入函數(shù)，執(zhí)行onOpenFunc
44 if(!onOpenFunc){
45 return false;
46 }else{
47 onOpenFunc(event);
48 }
49 })
50 ws.addEventListener('message',function(event){
51 //接收到任何后臺(tái)的消息都說(shuō)明當(dāng)前連接是正常的
52 if(!event){
53 return false;
54 }else{
55 //若獲取到后臺(tái)消息，則timer毫秒后再次發(fā)起心跳請(qǐng)求給后臺(tái)，檢測(cè)是否斷開連接
56 setTimeout(()=>{
57 heartCheck(); //給后臺(tái)發(fā)心跳請(qǐng)求
58 },!timer ? 3000 : timer)
59 }
60 //若傳入了函數(shù)，執(zhí)行onMessageFunc
61 if(!onMessageFunc){
62 return false;
63 }else{
64 onMessageFunc(event);
65 }
66 })
67 ws.addEventListener('close',function(event){
68 //若傳入函數(shù)，執(zhí)行onCloseFunc
69 if(!onCloseFunc){
70 return false;
71 }else{
72 onCloseFunc(event);
73 }
74 if(isReconnect){ //若斷開立即重新連接標(biāo)志為true
75 connect(); //重新連接webSocket
76 }
77 })
78 ws.addEventListener('error',function(event){
79 //若傳入函數(shù)，執(zhí)行onErrorFunc
80 if(!onErrorFunc){
81 return false;
82 }else{
83 onErrorFunc(event);
84 }
85 if(isReconnect){ //若斷開立即重新連接標(biāo)志為true
86 connect(); //重新連接webSocket
87 }
88 })
89 }
90 window.onload = function(){
91 //初始化webSocket
92 (function(){
93 //1.創(chuàng)建并連接webSocket
94 connect();
95 //2.初始化事件回調(diào)函數(shù)
96 initEventHandle();
97 //3.返回是否已連接
98 return ws;
99 })()
100 }
101 }
102 useWebSocket("ws://10.170.6.45:8888/websocket/23", //服務(wù)器url
103 null, //onopen的回調(diào)函數(shù)
104 function(event){
105 let res = event.data; //后端返回的數(shù)據(jù)，onmessage的回調(diào)函數(shù)
106 console.log(res);
107 },
108 null, //onclose的回調(diào)函數(shù)
109 null, //onerror的回調(diào)函數(shù)
110 { //心跳包消息
111 "action":"66",
112 "eventType":"88",
113 "requestId":"123"
114 },
115 null, //傳送心跳包的間隔時(shí)間
116 true //true表示連接斷開立即重新連接
117 )
118 </script>
119 </body>
120 </html>來(lái)源：https://www./content-4-592901.html
|
|
|
