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

WebSocket与HTTP比一比

推荐阅读