sse

web workers sse websocket

• web workers

: 单独开一个线程，进行大量数据的处理

• sse（Server-sent Events）
  参考文章：
  https://mp.weixin.qq.com/s?__biz=MjM5MDI3MjA5MQ==&mid=2697266556&idx=1&sn=7115ba3d95e9619289287d396b5ce8da&chksm=8376fa48b401735e1d1aad6aa659054991a5956d8c3554aa570a4705dcafbf4098595507bdb2&mpshare=1&scene=1&srcid=10130ANm40s3xS6OfetJwyGj&pass_ticket=tPRWL

特点： 单向通道，建立连接后，只能服务器想客户端发送消息
如果客户端需要想服务器发送消息，需要新的http请求，这对比websocket开销更大

SSE本质是发送的不是一次性的数据包，而是一个数据流
因为ie上的XMLHttpRequest对象不支持获取部分的响应内容，只有在响应完成之后才能获取其内容。

sse最大优势：
sse可以利用原先的http协议
1 基与http协议，不需要服务器单独支持，存在基础设施优势

• websocket

1、全双工通信的，可以很方便的实现两端的自由交流。
2、二进制协议，对于二进制数据传输更合适
3、 频率大于1次/秒，甚至更频繁，WebSocket更适合
 
缺点：
1 需要服务器支持

实现对比

分析	短轮询	长轮询	web socket	sse
通讯方式	http	http	基于TCP长连接通讯	http
触发方式	轮询	轮询	事件	事件
优点	兼容好容错性强，实现简单	http	全双工通讯协议，性能开销小、安全性高，有一定可扩展性	实现简便，开发成本低
缺点	安全性差，占较多的内存资源与请求数	安全性差，占较多的内存资源与请求数	传输数据需要进行二次解析，增加开发成本及难度	只适用高级浏览器
适用范围	b/s服务	b/s服务	网络游戏、银行交互和支付	服务端到客户端单向推送

分析	轮询	web socket	sse
服务器部署	no	yes	no
浏览器兼容性	good	许多现代浏览器支持	高级浏览器，ie不支持
后端推送	yes	yes	no

• 如何选择

1 数据够频繁:数据推送，(例如几分钟一个这种，直接用数据拉取的方式更好，这样可以减少服务器资源占用)

2 数据频率：如果发送频率大于1次/秒，甚至更频繁，WebSocket更适合

3 是否需要二进制数据交流，如果有大量二进制数据需要传输，用WebSocket

4 如果大部分用户是移动用户，用数据推送

ifame

https://www.jb51.net/article/116273.htm

event source

https://segmentfault.com/a/1190000009276347

• 代码实现

var express = require('express')
var fs = require('fs')
var app = express()

app.get('/count', function(req, res) {
    console.log(111)

    res.writeHead(200, {
        "Content-Type":"text/event-stream", 
        "Cache-Control":"no-cache", 
    });
    let count = 0

    interval = setInterval(function() {
        res.write("data: " + (++count) + "\n\n");
    }, 3000);

    req.connection.addListener("close", function () {
        clearInterval(interval);
    }, false);
})

app.use(function(req, res) {
    fs.readFile('./static/test.html', 'utf8',function(err, html) {
        if (err) {
            console.log(err)
            return
        }
        res.send(html)
    })
})

app.listen(4000, function(err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('listening on port 4000')
})

• 短轮训

定时器，发http请求

缺点：
1 固定频率发请求，数据可能没更新，浪费带宽，
2 假死状态，主线程遇到大量任务，导致setTimeout未按时执行发请求，无法响应

• 长轮询

同样是定时发请求，只是服务端不会立即返回数据而已
等数据更新才返回

缺点：
1、保持连接会消耗资源。
2、服务器没有返回有效数据，程序超时。

• iframe

1、IE、Mozilla Firefox会显示加载没有完成，图标会不停旋转。

2、服务器维护一个长连接会增加开销

参考文章

https://www.jianshu.com/p/ef054d3d1b62