WebSocket
背景: ajax/fetch发送的http请求,是无状态的、无连接的、单向的应用层协议,通信请求只能由客户端发起(浏览器),服务端对请求做出应答处理。无法实现服务器主动向客户端发起消息.
解决: 轮询 每过一段时间,客户端就通过JavaScript和XML(AJAX)请求服务端, 实时获取服务端信息, 实现长轮询。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开).
解决二: websocker websocker只需要建立一次连接,就可以一直保持连接状态,客户端端可以实时获取服务端的信息.
faye.js
基于websocker封装的一个插件,前端可以通过他,来与服务端获取连接,从而实时获取后端信息.
产品需求:下载时,从服务端获取下载进度,在前端展示百分比进度.
解决: 用faye,和服务端建立起链接,实时接受消息.
安装: npm install faye
代码:
import Faye from 'faye';
// faye实例化一个对象, 这时候已经和服务端建立起连接了
// url是需要建立连接的后端服务, opt是一些配置参数, 可以用来配置过期时间等
var client = new Faye.Client(url, opt);
// 这是服务中需要监听的部分, 回调函数中可以写拿到服务端传过来的数据后的具体操作
var subscription = client.subscribe('/foo', function(message) {
// handle message
});
// 监听完毕以后, 记得关闭通道
subscription.cancel();
复制代码