WebSocket
是什么： WebSocket是一种通讯手段，基于TCP协议，默认端口也是80和443，协议标识符是ws（加密为wss），它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据，不受跨域的限制。
有什么用： WebSocket用来解决http不能持久连接的问题，因为可以双向通信所以可以用来实现聊天室，以及其他由服务端主动推送的功能例如 实时天气、股票报价、余票显示、消息通知等。
EventSource
是什么： EventSource的官方名称应该是 Server-sent events（缩写SSE）服务端派发事件，EventSource 基于http协议只是简单的单项通信，实现了服务端推的过程客户端无法通过EventSource向服务端发送数据。喜闻乐见的是ie并没有良好的兼容当然也有解决的办法比如 npm install event-source-polyfill。虽然不能实现双向通信但是在功能设计上他也有一些优点比如可以自动重连接,event IDs,以及发送随机事件的能力（WebSocket要借助第三方库比如socket.io可以实现重连。）
有什么用： 因为受单项通信的限制EventSource只能用来实现像股票报价、新闻推送、实时天气这些只需要服务器发送消息给客户端场景中。EventSource的使用更加便捷这也是他的优点。
WebSocket & EventSource 的区别
WebSocket基于TCP协议，EventSource基于http协议。
EventSource是单向通信，而websocket是双向通信。
EventSource只能发送文本，而websocket支持发送二进制数据。
在实现上EventSource比websocket更简单。
EventSource有自动重连接（不借助第三方）以及发送随机事件的能力。
websocket的资源占用过大EventSource更轻量。
websocket可以跨域，EventSource基于http跨域需要服务端设置请求头
EventSource的实现案例
服务端代码：
1：nodejs +express 基于自签的https
//创建https服务
var app =require('../app');
var https =require('https');
var fs =require('fs');
var path =require('path');
const SSLPORT =443;
app.set('port', SSLPORT);
/**
* Create HTTP server.
*/
//根据项目的路径导入生成的证书文件
const privateKey =fs.readFileSync(path.join(__dirname, './server.key'), 'utf8');
const certificate =fs.readFileSync(path.join(__dirname, './server.crt'), 'utf8');
const credentials = {key:privateKey, cert:certificate};
const httpsServer =https.createServer(credentials, app);
//创建https服务器
httpsServer.listen(SSLPORT, function() {
console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});
格式说明
event-source必须编码成utf-8的格式，消息的每个字段使用"\n"来做分割，并且需要下面4个规范定义好的字段：
event: 事件类型
data: 发送的数据
id: 每一条事件流的ID
retry： 告知浏览器在所有的连接丢失之后重新开启新的连接等待的时间，在自动重新连接的过程中，之前收到的最后一个事件流ID会被发送到服务端。
其中data 数据的结束符必须是‘\n\n’两个哦。
如果没有数据发送的时候，最好定期发送以: xxx\n\n 的注释数据 防止与浏览器断开。
//添加routes url地址
var express =require('express');
var router =express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('index', {title:'Express'});
});
let reqs={};
router.get('/event-stream', function (req, res, next) {
let id =req.query.id;
reqs[id] = {
res:res,
};
res.writeHead(200, {
"Content-Type":"text/event-stream",
"Cache-Control":"no-cache",
"Connection":"keep-alive",
"Access-Control-Allow-Origin":'*',
});
res.write("retry: 10000\n");
res.write("id: "+id+"\n");
req.connection.addListener("close", function () {
console.info(id);
delete reqs[id]
}, false);
});
setInterval(function () {
let data = {
name:'张三',
age:Math.random()*100
}
console.info(Object.getOwnPropertyNames(reqs).length)
for (let id in reqs){
reqs[id].res.write("data: " + (JSON.stringify(data)) +"\n\n");
}
}, 1000);
module.exports =router;
前端代码：
如果使用vue的话需要引入第三方兼容插件
event-source-polyfill
import {NativeEventSource, EventSourcePolyfill }from 'event-source-polyfill'
let EventSource =NativeEventSource||EventSourcePolyfill
let params ='id='+Math.round(Math.random()*99999);
var source =new EventSource('https://192.168.4.15/event-stream?'+params, {withCredentials:true, format:'json' });
source.addEventListener('message', function(event) {
var data =event.data;
console.info(data);
// handle message
}, false);
见结果：
EventSource 使用场景一版是前端只是展示数据，而有的时候因为是https,呵呵买不起证书。所以自己生成了一套证书。但是websocket不支持非法证书。所以终于找到了这个玩意儿。
java 版 https://luoyuer.com/archives/springbooteventstream.html
抓包详解请转到 https://www.jianshu.com/p/3d7b0bbf435a
三种浏览器，包含了IE浏览器
后台记录客户端链接数
网友评论