阅读目录
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>