websocket是H5新特性,是一种在单个TCP连接上进行的全双工通讯协议,允许服务端主动向客户端推送数据(双向通信)。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
http/https通信只能由客户端发起,服务器端不会主动发送数据(单向通信)。
实现后台推送数据功能的方式:
Ajax轮询(传统)
-使用http协议,通过定时器,每隔一段时间让前端发送一次请求,让后端返回数据(不推荐) ,浪费带宽等资源。
function getChart() {
var request = new XMLHttpRequest();
request.open('get', '后台接口');
request.send();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
var data = JSON.parse(request.responseText)
...
}
}
};
setInterval(getChart,2000)
Websocket连接服务器(需要后台配合)
-Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。Websocket 使用和 HTTP 相同的 TCP 端口,可以绕过大多数防火墙的限制。默认情况下,Websocket 协议使用 80 端口;运行在 TLS 之上时,默认使用 443 端口
var ws = new WebSocket('ws接口');
//连接成功
ws.onopen = function () {
alert('连接成功!');
};
//连接失败
ws.onerror = function () {
alert('连接失败!');
};
//连接关闭
ws.onclose = function () {
alert('连接关闭!');
};
//接收消息
ws.onmessage = function (msg) {
var data = JSON.parse(msg.data)
...
}