一、什么是WebSocketWebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工（full-duplex）通信的协议。没有Request和Response的概念，两者地位完全平等。一旦建立连接，就建立了真正的持久连接，双方可以随时通过WebSocket向对方发送数据。WebSocket具有以下特点：HTML5出现Web端Socket，服务端和客户端可以互相发送消息。本质上，它是一种通过TCP连接产生的技术，解决客户端与服务端之间的实时通信。注意：WebSocket长连接需要基于Ping/Pong心跳机制来维护。服务器与客户端之间现有的双工通信技术：轮询：客户端每隔一定时间向后台发送请求，询问服务器是否有新的数据。缺点：1.延迟，需要固定的轮询时间，不一定是实时数据。2.大量消耗服务器内存和宽带资源。因为不停的向服务器请求，很多时候并没有新的数据更新，所以大部分请求都是无效请求。长轮询（LongPolling）：客户端向服务端发送HTTP后，是否有新消息，如果没有新消息，则一直等待。直到有消息或者超时才会返回给客户端。消息返回后，客户端再次建立连接，依此类推。优点：一定程度上减少了网络带宽和CPU占用率等问题。缺点：1.如果是实时性高的系统，肯定不会用这种方法。因为一个GET请求来回需要2个RTT，很可能在这段时间里，数据变化很大，客户端获取到的数据已经延迟了很多。2、网络带宽利用率低的问题没有从根本上解决。每个Request都会携带相同的Header。注：RTT（Round-TripTime）：往返时间??延迟。在计算机网络中，它是一个重要的性能指标，表示总时延RTT（Round-TripTime）：往返时延。在计算机网络中，它是一个重要的性能指标，是指从发送端发送数据到发送端收到接收端的确认（接收端收到数据后立即发送确认）所经历的总时延。流式传输：服务器保持与客户端的连接打开并处于活动状态，直到并且除非获取了所需的数据。在这种情况下，连接将无限期打开。缺点：1.流式传输包括HTTP标头，这会增加文件大小，增加延迟。2、从服务端推送到客户端，这个方向的流实时性更好。但它仍然是单向的，客户端仍然需要HTTP请求来请求服务器。AJAX：AJAX基于Javascript的XmlHttpRequest对象。它是异步Javascript和XML的缩写。XmlHttpRequest对象允许在不重新加载整个网页的情况下执行Javascript。AJAX仅发送和接收网页的一部分。缺点：1.需要发送HTTP头，数据量较大。2.是半双工的。3.服务器消耗更多资源2.原生的WebSocketWebSocket构造函数，为了与服务器建立WebSocket连接，使用WebSocket接口实例化一个WebSocket对象，指向一个表示要连接端点的URL。WebSocket协议定义了两种URL方案（URLScheme）：ws（WebSocket）：客户端和服务器之间的非加密流量，类似于HTTPURI方案。wss(WebSocketSecure)：客户端和服务器之间的加密流量。该方案表示使用传输层安全（TLS，也称为SSL）的WebSocket连接，使用HTTPS采用的安全机制来保证HTTP连接的安全。WebSocket构造函数所需的参数如下，必须是以ws://或wss://开头的完全限定URL。如：letws=newWebSocket("ws://aaa.com");//或letws=newWebSocket("ws://aaa.com","myProtocol");//或letws=newWebSocket("ws://aaa.com",["myProtocol1","myProtocol2"]);连接WebSocket服务器时，可以选择使用第二个参数列出应用程序支持的协议进行协议协商。协议协商对于确定WebSocket服务器支持的协议和版本很有用。应用程序可能支持多种协议，使用协议协商来选择与特定服务器通信的协议。1.WebSocket事件事件事件处理器描述openSocket.onopen触发messageSocket.onmessage当客户端从服务器接收数据时触发send(string)使用连接发送数据Socket.close(number,string)关闭连接2.WebSocket插件：socket.io(server)/socket.io-client(client)文档地址：https://socket.io/docs/v4/cli...客户端NPM安装：npminstallsocket.io-client客户端配置和连接到服务器：importiofrom"socket.io-client";constsocket=io("http://aaa.com",//java后台socket服务器地址{reconnection:true,//是否自动重连reconnectionDelay:10*1000,//每次重连延时超时时间:10000,//每次重连的时间间隔reconnectionAttempts:100,//尝试重连的次数//连接协议传输的顺序优先级：['websocket','flashsocket','htmlfile','xhr-multipart','xhr-polling','jsonp-polling']//});//其他配置请参考文档客户端监听服务器传过来的信息：console.log(socket.connected);//socket是否连接到服务器console.log(socket.disconnected);//socket是否断开与服务器的连接socket.open();//手动重连//连接成功socket.on("connect",()=>{console.log(socket.id,'监听客户端连接成功-connect');})//断开连接socket.on("disconnect",(reason)=>{console.log(socket.connected);console.log("disconnect-disconnect",reason);})//错误socket.on("error",(err)=>{console.log("Error-error",err);})//连接错误socket.on("connect_error",(err)=>{errconsole.log("connectionerror-connect_error");});//连接超时socket.on("connect_timeout",(data)=>{console.log("connectiontimeout-connect_timeout",data);});//重连成功socket.on("reconnect",(attemptNumber)=>{//重连尝试次数console.log("reconnectsuccessfully-reconnect",attemptNumber)});//triggersocket.on("reconnect_attempt",(attemptNumber)=>{//重连尝试次数console.log("Attempttoreconnect-reconnect_attempt",attemptNumber)});//触发socket.on("reconnecting",(attemptNumber)=>{//重连尝试次数console.log("isbeingTrying重新连接-重新连接",attemptNumber)});//重新连接尝试错误);//触发socket.on("reconnect_failed",()=>{console.log("clientfailedtoconnect-reconnect_failed")});//当发送ping触发socket.on("ping",()=>{console.log("apingsenttotheserver-ping")});//triggersocket.on("pong",(data)=>{//数据：延迟多少毫秒console.log("serverreceivedpong-pong",data);});client发送信息给serversocket:socket.emit("eventName",msg,handler)//handler回调可以接收到server返回的结果
