http3替代websocket_WebSocket与HTTP比一比

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

本文链接&＃xff1a;https://blog.csdn.net/maidu_xbd/article/details/100730667

WebSocket与HTTP均建立在TCP之上&＃xff0c;通过TCP协议传输数据&＃xff1b;都是可靠性传输协议&＃xff1b;都是应用层协议。

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

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

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

常见的状态码&＃xff1a;

200 - 请求成功

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

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

500 - 内部服务器错误

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

WebSocket

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

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

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

var Socket &＃61; new WebSocket(url, [protocol] );

WebSocket 对象的相关事件描述

Socket.onopen连接建立时触发

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

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

Socket.onclose连接关闭时触发

WebSocket 对象的相关方法描述

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

Socket.close()关闭连接

// 创建 WebSocket 对象

let socket &＃61; new WebSocket("ws://localhost:8000/xxx");

socket.onmessage &＃61; res &＃61;> {

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

if (JSON.parse(res.data).state &＃61;&＃61;&＃61; "200") {

// do something...

}

this.sendImg(socket);

};

// 使用onopen时间建立连接

socket.onopen &＃61; res &＃61;> {

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

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

};

methods: {

// 发送图片数据

sendImg(socket) {

socket.send(

JSON.stringify({

img: this.imgData

})

);

}

}

Websocket优点&＃xff1a;

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

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

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

(4)Websocket支持持久连接&＃xff0c;HTTP不支持持久连接。

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

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

原文链接&＃xff1a;https://blog.csdn.net/maidu_xbd/article/details/100730667