赞
踩
由于
http
存在一个明显的弊端(消息只能有客户端推送到服务器端,而服务器端不能主动推送到客户端),导致如果服务器如果有连续的变化,这时只能使用轮询,而轮询效率过低,并不适合。于是WebSocket
被发明出来。
WebSocket是一种在单个TCP连接上进行全双工通信的协议,数据是通过http协议传输的,但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。客户端和服务器都可以随时向互相发送数据,能更好的节省服务器资源和带宽并达到实时通讯的目的。
1.WebSocket 采用了二进制帧结构,语法、语义与 HTTP 完全不兼容,但因为它的主要运行环境是浏览器,在使用习惯上尽量向 HTTP 靠拢。
2.WebSocket 没有使用 TCP 的“IP 地址 + 端口号”,WebSocket 使用ws或wss协议,分别表示明文和加密的 WebSocket 协议。
WebSocket约定了一个通信的规范,通过一个握手的机制,客户端和服务器之间能建立一个类似tcp服务器保持长连接,数据发送是双向。
websocket优点:
相同点:
不同点:
联系:WebSocket在建立握手时,数据是通过HTTP传输的。但是建立之后,在真正传输时候是不需要HTTP协议的
1. 短轮询
短轮询的基本思路:
浏览器每隔一段时间向浏览器发送 http 请求,服务器端在收到请求后,不论是否有数据更新,都直接进行 响应。
这种方式实现的即时通信,本质上还是浏览器发送请求,服务器接受请求的一个过程,通过让客户端不断的进行请求,使得客户端能够模拟实时地收到服务器端的数据的变化。
优缺点
优点是比较简单,易于理解。
缺点是这种方式由于需要不断的建立 http 连接,严重浪费了服务器端和客户端的资源。当用户增加时,服务器端的压力就会变大,这是很不合理的。
2. 长轮询
长轮询的基本思路:
首先由客户端向服务器发起请求,当服务器收到客户端发来的请求后,服务器端不会直接进行响应,而是先将 这个请求挂起,然后判断服务器端数据是否有更新。
如果有更新,则进行响应,如果一直没有数据,则到达一定的时间限制才返回。客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。
优缺点
长轮询和短轮询比起来,它的优点是明显减少了很多不必要的 http 请求次数,相比之下节约了资源。
长轮询的缺点在于,连接挂起也会导致资源的浪费
3. WebSocket
WebSocket 是 Html5 定义的一个新协议,与传统的 http 协议不同,该协议允许由服务器主动的向客户端推送信息。
使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。WebSocket 是一个全双工的协议,也就是通信双方是平等的,可以相互发送消息。
从图片可知,分三个阶段
TCP握手
客户端和服务端都需要直到各自可收发,因此需要三次握手
三次握手
三次握手过程中可以携带数据吗
ESTABLISHED (已建立连接状态)
,对于客户端来说,已经建立起连接了,并且也已经知道服务器的接收、发送能力是正常的了,所以能携带数据也是没问题的。四次挥手
所谓的四次挥手即TCP连接的释放(解除)。连接的释放必须是一方主动释放,另一方被动释放
当只有服务端把所有的报文都发送完了,才会发送 FIN 报文,告诉客户端可以断开连接了,因此在断开连接时需要四次挥手。
SOCKET
,也即你可能还需要发送一些数据给对方之后,再发送FIN报文给对方来表示你同意现在可以关闭连接了,所以它这里的ACK
报文和FIN报文多数情况下都是分开发送的。
为什么建立连接只通信了三次,而断开连接却用了四次?
服务端经过一个等待,确定可以关闭连接了,再发一条 FIN 给客户端
。1.创建websocket对象 ,通过地址客户端与服务器端的连接。
websocket 当前状态:
ws.readyState
// 0: 'CONNECTING',表示正在连接
// 1: 'OPEN', 表示连接成功,可以通信了
// 2: 'CLOSING', 表示连接正在关闭
// 3: 'CLOSED', 表示连接已经关闭,或者打开连接失败。
- // 创建WebSocket连接.
- const socket = new WebSocket('ws://localhost:8080');
2. 连接成功触发
连接触发事件:
- ws.onopen = function () {
- // 指定连接成功后的回调函数
- }
- ws.onclose = function () {
- // 指定连接关闭后的回调函数
- }
- ws.onmessage = function () {
- // 指定收到服务器数据后的回调函数
- }
- ws.onerror = function () {
- // 指定报错时的回调函数
- }
3. 发送数据
ws.send(message) 向服务器发送数据
4.关闭连接
ws.close() 关闭当前连接
使用场景
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。