阅读目录
1、什么是webSocket?
2、webSocket实现原理
3、webSocket优点
4、webSocket和socket的区别
5、webSocket API
6、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
- websocket通讯的建立阶段是依赖于http协议的。最初的握手阶段是http协议，握手完成后就切换到websocket协议，并完全与http协议脱离了。
- 建立通讯时，也是由客户端主动发起连接请求，服务端被动监听。
- 通讯一旦建立连接后，通讯就是“全双工”模式了。也就是说服务端和客户端都能在任何时间自由得发送数据，非常适合服务端要主动推送实时数据的业务场景。
- 交互模式不再是“请求-应答”模式，完全由开发者自行设计通讯协议。
- 通信的数据是基于“帧(frame)”的，可以传输文本数据，也可以直接传输二进制数据，效率高。当然，开发者也就要考虑封包、拆包、编号等技术细节。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是ws(如果加密，则为wws)，服务器网址是url。
2） socket
- 服务端监听通讯，被动提供服务；客户端主动向服务端发起连接请求，建立起通讯。
- 每一次交互都是：客户端主动发起请求（request），服务端被动应答（response）。
- 服务端不能主动向客户端推送数据。
- 通信的数据是基于文本格式的。二进制数据（比如图片等）要利用base64等手段转换为文本后才能传输。
5、webSocket API
(1)webSocket构造函数
用于创建一个webSocket实例，执行后，客户端就会与服务器端连接
var ws = new WebSocket('ws://localhost:8080/mesg'); //服务器地址就是URL，如：ws://localhost:8080/mesg
(2)webSocket.readyState
readyState属性返回实例对象的当前状态，共有四种。
connecting:值为0，表示正常连接
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>