阅读目录1、什么是webSocket?2、webSocket实现原理3、webSocket优点4、webSocket和socket的区别5、webSocket API6、webSocket的使用================================================================ 1、什么是webSocket?webSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。默认端口号80和443 2、webSocket实现原理在实现webSocket连线过程中，需要通过浏览器发出webSocket连线请求，然后服务器发出回应，这个过程通常称为“握手”。在webSocket API,浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以互相传递数据。 3、webSocket优点在以前的消息推送机制中，用的都是Ajax轮询(polling)，在特定的时间间隔由浏览器自动发出请求，将服务器的消息主动获取回来，这种方式是非常好资源的，因为它本质还是http请求，而且显得非常笨拙。而 webSocket在浏览器和服务器完成一个握手的动作，在建立连接之后，服务器可以主动传送数据给客户端，客户端也可以随时向服务器发送数据。
4、 webSocket和socket的区别1） webSocket
open：值为1，表示连接成功，可以开始通信 closing:值为2，表示连接正在关闭 closed：值为3，表示连接已经关闭，或者打开连接失败 (3)webSocket.onopen onopen(): 连接成功后的回调函数  (4)webSocket.onclose
onclose(): 连接关闭后的回调函数
 (5)webSocket.onmessage
onmessage(): 接收到服务器数据后的回调函数
 (6)webSocket.send()
send方法用于向服务器发送数据
(7)webSocket.bufferedAmount
bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束(7)webSocket.onerror onerror(): 连接发生错误后的回调函数 (8)webSocket.heartMessage heartMessage: 发送给后台的心跳包参数（必填），给服务器端的心跳包就是定期给服务器发送消息 (9)webSocket.timer timer: 给后台传送心跳包的时间间隔，不传时使用默认值3000毫秒 (10)webSocket.isReconnect isReconnect: 连接断掉是否重新连接，传true为重新连接 6、webSocket的应用（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接口地址与携带参数（必填）
13 * @param onopen(): 连接成功后的回调函数
14 * @param onmessage(): 接收到服务器数据后的回调函数
15 * @param onclose(): 连接关闭后的回调函数
16 * @param onerror(): 连接发生错误后的回调函数
17 * @param heartMessage: 发送给后台的心跳包参数（必填），给服务器端的心跳包就是定期给服务器发送消息
18 * @param timer: 给后台传送心跳包的时间间隔，不传时使用默认值3000毫秒
19 * @param isReconnect: 连接断掉是否重新连接，传true为重新连接
20 */
21 function useWebSocket(url,onOpenFunc,onMessageFunc,onCloseFunc,onErrorFunc,heartMessage,timer,isReconnect){
22 let isConnected = false; //设置已连接webSocket标识
23 let ws = null; //定义webSocket对象
24 //创建并连接webSocket
25 let connect = function(){
26 if(!isConnected){
27 //若未连接webSocket，则创建一个新的webSocket
28 console.log(url);
29 ws = new WebSocket(url);
30 isConnected = true;
31 }
32 }
33 //向后台发送心跳消息
34 let heartCheck = function(){
35 ws.send(JSON.stringify(heartMessage));
36 }
37 //初始化事件回调函数
38 let initEventHandle = function(){
39 console.log('已连接');
40 ws.addEventListener('open',function(event){
41 //给后台发心跳请求
42 heartCheck();
43 //若传入函数，执行onOpenFunc
44 if(!onOpenFunc){
45 return false;
46 }else{
47 onOpenFunc(event);
48 }
49 })
50 ws.addEventListener('message',function(event){
51 //接收到任何后台的消息都说明当前连接是正常的
52 if(!event){
53 return false;
54 }else{
55 //若获取到后台消息，则timer毫秒后再次发起心跳请求给后台，检测是否断开连接
56 setTimeout(()=>{
57 heartCheck(); //给后台发心跳请求
58 },!timer ? 3000 : timer)
59 }
60 //若传入了函数，执行onMessageFunc
61 if(!onMessageFunc){
62 return false;
63 }else{
64 onMessageFunc(event);
65 }
66 })
67 ws.addEventListener('close',function(event){
68 //若传入函数，执行onCloseFunc
69 if(!onCloseFunc){
70 return false;
71 }else{
72 onCloseFunc(event);
73 }
74 if(isReconnect){ //若断开立即重新连接标志为true
75 connect(); //重新连接webSocket
76 }
77 })
78 ws.addEventListener('error',function(event){
79 //若传入函数，执行onErrorFunc
80 if(!onErrorFunc){
81 return false;
82 }else{
83 onErrorFunc(event);
84 }
85 if(isReconnect){ //若断开立即重新连接标志为true
86 connect(); //重新连接webSocket
87 }
88 })
89 }
90 window.onload = function(){
91 //初始化webSocket
92 (function(){
93 //1.创建并连接webSocket
94 connect();
95 //2.初始化事件回调函数
96 initEventHandle();
97 //3.返回是否已连接
98 return ws;
99 })()
100 }
101 }
102 useWebSocket("ws://10.170.6.45:8888/websocket/23", //服务器url
103 null, //onopen的回调函数
104 function(event){
105 let res = event.data; //后端返回的数据，onmessage的回调函数
106 console.log(res);
107 },
108 null, //onclose的回调函数
109 null, //onerror的回调函数
110 { //心跳包消息
111 "action":"66",
112 "eventType":"88",
113 "requestId":"123"
114 },
115 null, //传送心跳包的间隔时间
116 true //true表示连接断开立即重新连接
117 )
118 </script>
119 </body>
120 </html>来源：https://www./content-4-592901.html
|
|
|
