websocket前端应用

基本了解        

首先要对websocket有一个基本了解：WebSocket是一种在Web浏览器和Web服务器之间创建持久连接的技术。它允许在客户端和服务器之间进行全双工通信，而不需要在每次通信时都发起新的HTTP请求。主要作用包括实时通信、减少延迟、减少宽带消耗、服务器推送、支持双向通信等。

与HTTPAPI的区别

        然后就是要了解websocket和普通HTTP API之间的区别：

        1.通信模式：

                HTTP API：HTTP API基于请求-响应模式，客户端发送请求，服务器返回响应，然后连接关闭。每个请求都需要建立新的连接。

                WebSocket：WebSocket时全双工通信协议，允许客户端和服务器之间建立持久连接，双方可以同时发送和接收数据，不需要每次请求都建立新的连接。

        2.延迟和性能：

                HTTP API：因为每个HTTP请求都需要建立新的连接，并且请求都需要携带HTTP头部信息，因此HTTP API有较高的延迟和较低的性能。

                WebSocket：WebSocket建立了持久连接，使用头部信息较少，因此可以大幅度降低延迟并提高性能。

        3.服务器推送

                HTTP API：HTTP API服务器不能主动向客户端推送数据，只能在客户端发起请求时才能发送响应。

                WebSocket：WebSocket允许服务器主动向客户端推送数据，而不需要客户端发起请求。这使得WebSocket非常适合实现服务器推送功能。

        4.协议和支持

                HTTP API：HTTP API使用HTTP协议进行通信，因此能够与各种类型的客户端和服务器兼容，并且受到广泛支持。

                WebSocket：WebSocket是一种独立的协议，需要客户端和服务器都支持WebSocket协议才能进行通信。虽然现代浏览器和大多数服务器都支持WebSocket，但是某些环境中会受到限制。

        WebSocket适用于需要实时通信和服务器推送功能的场景，而HTTP API则更适用于传统的请求-相应模式的通信。

API与基本使用

        最后就是了解WebSocket的连接方法和基本API：

        1.连接方法(创建WebSocket对象)：

                let ws=new WebSocket("连接路径");        //其中ws为自己定义的变量名。

                经过连接之后客户端与服务器就已经开始连接。

        2.ws.onopen=()=>{

                console.log(`连接状态${ws.readyState}`)        //通常在第一行打印连接状态

        }

        本API在WebSocket对象创建之后被调用，可以展示WebSocket对象被创建之后的连接状态：

                0：连接正在进行，WebSocket对象被创建，但是连接还没有建立；

                1：连接已经建立成功并且可以通信；(这个状态是最常见的，也是大家最希望看到的)

                2：连接正在关闭；

                3：连接已经关闭。

        3.ws.onmessage=e=>{

                console.log("返回的数据",e.data)

        }

        该API在每次服务器向客户端发送信息时被调用，并通过第一行的打印代码打印出得到的信息。也可在其中写上判断代码，根据服务器返回的数据id或者type进行相应的操作。

        4.ws.onclose=()=>{

                console.log(“连接已关闭”)

        }

        该API在WebSocket由于断网或者主动调用ws.close()方法关闭连接之后调用，一般在这里面用来关闭心跳检测。

        5.ws.οnerrοr=error=>{

                console.log("发生错误",error)

        }

        该API在发生错误时调用，第一行打印错误原因，一般用不到。

        6.ws.send(数据)

        本API可以向服务器发送信息，可以穿插在onmessage和onopen中使用，在相应的时候向服务器发送相应的数据。

关于心跳检测：

        至于心跳检测，其实就是一个定时函数，在服务器规定时间内向服务器发送一段指定数据。

//向服务器发送指定数据的方法
function sendPING() {ws.send("PING");    //具体发送内容由后端决定，不一定都是字符串PING。
}
let timer = setInterval(sendPING, 5000);    //每五秒调用一次发送方法，具体时间由项目决定