http3 替代websocket_WebSocket与HTTP比一比

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/maidu_xbd/article/details/100730667

WebSocket与HTTP均建立在TCP之上，通过TCP协议传输数据；都是可靠性传输协议；都是应用层协议。

HTTP--Hyper Text Transfer Protocol(超文本传输协议)

HTTP是一个基于TCP/IP通信协议来传递数据，用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。浏览器向服务器发出HTTP请求，服务器将数据返回给客户端的浏览器。

HTTP 请求可以使用多种请求方法。HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法

常见的状态码：

200 - 请求成功

301 - 资源(网页等)被永久转移到其它URL

404 - 请求的资源(网页等)不存在

500 - 内部服务器错误

这种方式的缺点通信只能由客户端发起，做不到服务器主动向客户端推送信息

WebSocket

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯(信息能够同时双向传送)的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket 协议能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

创建 WebSocket 对象,第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

//第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

var Socket = new WebSocket(url, [protocol] );

WebSocket 对象的相关事件描述

Socket.onopen连接建立时触发

Socket.onmessage客户端接收服务端数据时触发

Socket.onerror通信发生错误时触发

Socket.onclose连接关闭时触发

WebSocket 对象的相关方法描述

Socket.send()使用连接发送数据

Socket.close()关闭连接

// 创建 WebSocket 对象

let socket = new WebSocket("ws://localhost:8000/xxx");

socket.onmessage = res => {

// 客户端接收服务器端数据

if (JSON.parse(res.data).state === "200") {

// do something...

}

this.sendImg(socket);

};

// 使用onopen时间建立连接

socket.onopen = res => {

// 使用send()方法发送数据

socket.send(JSON.stringify({ name: this.information.name }));

};

methods: {

// 发送图片数据

sendImg(socket) {

socket.send(

JSON.stringify({

img: this.imgData

})

);

}

}

Websocket优点：

(1)HTTP每次都需要携带完整头部，其中真正有效的数据可能只是很小的一部分，这样会浪费很多的带宽等资源。使用WebSocket，客户端与服务端进行数据交换时，服务端到客户端的数据包头只有2到10字节，客户端到服务端需要加上另外4字节的掩码，数据格式轻量，性能开销小，实时性更好。

(2)HTTP只能由客户端发送强求，Websocket具有双向通信功能，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。

(3)AJAX轮询(客户端定时以固定的间隔向服务端发送请求)与Long Polling长轮询(客户端和浏览器保持一个长连接，等服务端有消息返回，断开。然后再重新连接，等服务端有消息返回，断开。然后再重新连接.......)。WebSocket一次握手，持久连接，以及主动推送的特点可以解决上边的问题，又不至于损耗性能

(4)Websocket支持持久连接，HTTP不支持持久连接。

————————————————

版权声明：本文为CSDN博主「maidu_xbd」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/maidu_xbd/article/details/100730667