WebSocket与HTTP比一比

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不支持持久连接。