仅接收服务器数据的长链接方案

在项目中或多或少有一些场景会使用到长链接，除去一些聊天的项目（双向数据交换）外，更多见的如：排行榜定时刷新，大屏数据动态刷新等，往往我们只是从服务器来获取数据进行展示即可，原来除了使用定时器来发送请求获取数据外还能想到的就是WebSocket了，因为WebSocket从0集成的成本相对较大，还需要处理一些状态，所以了解到了EventSource类。仅支持从服务器发送文本数据到客户端，用的也是常规的HTTP协议，最最关键是简单。

EventSource 是服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接，以text/event-stream 格式发送事件, 会一直保持开启直到被要求关闭。(摘自MDN)

Server-Sent Events 规范描述了一个内建的类 EventSource，它能保持与服务器的连接，并允许从中接收事件。与 WebSocket 类似，其连接是持久的。

EventSource介绍：

响应类型	Content-Type: text/event-stream	状态码200
消息格式	data: 消息文本	1. 冒号和消息文本间的空格可选 1. 实际开发消息文本大多沿用Json格式
支持跨域	EventSource(“http://localhost:8080/digits”);	服务器设置Access-Control-Allow-Origin
重新连接	自动连接	1. Content-Type不正常不重连 1. 状态码非301，307，200 和 204不重连 1. 关闭连接后需重新实例化ES对象打开
关闭连接	客户端关闭：eventSource.close()	1. 浏览器主动关闭 1. 服务器返回204状态码关闭
消息ID	客户端接收：eventSource.lastEventId 服务端接收：header的Last-Event-ID
连接状态	EventSource.CONNECTING = 0; EventSource.OPEN = 1; EventSource.CLOSED = 2;	1. 连接中或者重连中 1. 已连接 1. 连接已关闭

补充：

客户端代码：

封装EventSourceClient：

export default class EventSourceClient {
    constructor(url) {
        this.url = url;
        this.eventSource = null;
    }
      // 建立连接
    connection(openCallback, messageCallback, errorCallback) {
        this.eventSource = new EventSource(this.url);
        this.eventSource.onopen = openCallback;
        this.eventSource.onmessage = messageCallback;
        this.eventSource.onerror = function (e) {
            if (this.readyState == EventSource.CONNECTING) {
                console.log(`Reconnecting (readyState=${this.readyState})...`);
            } else {
                errorCallback && errorCallback(e)
            }
        };
    }
      // 断开连接
    disconnect() {
        this.eventSource && this.eventSource.close();
    }
    addAction(action, fn) {
        this.eventSource && this.eventSource.addEventListener(action, fn);
    }
}

使用EventSourceClient：

<script type="module">
    import EventSourceClient from './event-source-client.js'
    const url = 'http://localhost:8080/digits'
    window.esc = new EventSourceClient(url);
</script>
<script>
    function start() {
        window.esc.connection((e) => {
            console.log('建立连接', e);
        }, (e) => {
            console.log('接收数据', e.data);
        }, (e) => {
            console.log('发生错误', e);
        })
        window.esc.addAction('bye', (e) => {
            console.log('自定义动作', e.data);
        })
    }
    function stop() {
        window.esc.disconnect();
        console.log('关闭连接');
    }
</script>

服务端代码实现：

let http = require('http');
function onDigits(req, res) {
    // 设置请求头
    res.writeHead(200, {
        'Cache-Control': 'no-cache',
        // 支持跨域请求
        "Access-Control-Allow-Origin": "*",
        // 返回类型为text/event-stream
        'Content-Type': 'text/event-stream; charset=utf-8',
    });
    let i = 0;
    let timer = setInterval(write, 1000);
    write();
    function write() {
        i++;
        if (i == 4) {
            res.write('event: bye\ndata: bye-bye\n\n');
            clearInterval(timer);
            res.end();
            return;
        }
        res.write('data: ' + i + '\n\n');
    }
}
function accept(req, res) {
    if (req.url == '/digits') {
        onDigits(req, res);
    }
}
http.createServer(accept).listen(8080);

执行演示：

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。