服务端推送技术

2023-12-29 23:19:28

服务端推送技术

文章目录

- 服务端推送技术

环境声明
平台: windows 10
浏览器: chrome 95.0.4638.54
node: v10.16.0
npm: 6.9.0
node依赖:

express: 4.17.1

axios: v0.21.1

ws: 8.3.0
注意: express启动的服务器记得用 http://127.0.0.1:port/xxx 的方式访问前端页面

可行方案

1.短轮询
2.长轮询
3.websocket
4.server-sent events(SSE)

一、短轮询

由前端每隔一定时间发送请求。
优点： 纯前端代码，不需要后台做任何配置
缺点： 数据同步有延时(延时时间与轮询间隔有关)，且增加后端处理压力

实现：

import axios from 'axios';
let intervalId = setInterval(() => {
    axios.post(url[, data[, config]]).then(res => {
        if (xxx) {
            clearInterval(intervalId);
        } else {
            /** some code */
        }
    });
});

二、长轮询

由服务端决定是否响应请求，若还未到响应时机，则服务端hold住请求，直到返回数据时才关闭连接。
优点： 响应及时，不需要前端不停发送请求
缺点： 保持连接需要消耗网络资源，程序易超时

实现：

<!-- 客户端(前端) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <title>Index page</title>
</head>
<body>
    <button onclick="sendMessage()">sendMessage</button>
    <button onclick="printMsg()">printMsg</button>
    <script>
        function sendMessage() {
            axios.post('/getInfo')
                .then(res => {
                    console.log('get res: ', res)
                });
        }

        function printMsg() {
            // 测试程序是否被卡死
            console.log(123);
        }
    </script>
</body>
</html>

// 服务端(后台)
const path = require('path');
const express = require('express');

let app = express();

let hostName = '127.0.0.1'
let port = 8908

// 返回主页
app.get('/index', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/getInfo', function(req, res) {
    console.log('服务器接受到请求');
    // 挂起接口5s
    setTimeout(() => {
        res.send(JSON.stringify({
            error_code: 0
        }));
    }, 5000);
});

// 启动服务器
app.listen(port, hostName, () => {
    console.log('Server started on ' + port);
})

三、websocket

websocket是全双工通讯协议，基于TCP长连接通讯。它和HTTP同属于应用层协议。他两有相近部分，但是是两个完全独立的协议。
优点： 性能开销小，安全性高(wss)，有一定可扩展性
缺点： 需要浏览器支持 websocket支持情况
兼容性：

实现：

<!-- 客户端(前端) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <title>Index page</title>
</head>
<body>
    <button onclick="sendMessage()">send message</button>
    <button onclick="closeWs()">close ws</button>
    <script>
        // WebSocket实例化
        let ws = new WebSocket("ws://localhost:8756");
        ws.onopen = e => {
            //成功连接服务器回调
            console.log('---客户端：已连接到服务端---', e.data);
        }

        ws.onmessage = e => {
            console.log('接收到服务端消息： ', e.data);
        }

        function sendMessage() {
            ws.send('client say: hello');
        };

        function closeWs() {
            ws && ws.close();
        }
    </script>
</body>
</html>

// 服务端(后台)
const path = require('path');
const express = require('express');
// ws需要安装 npm install ws
const WebSocketServer = require('ws').Server;

let app = express();

let hostName = '127.0.0.1'
let port = 8906

// 返回主页
app.get('/index', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

wss = new WebSocketServer({ port: 8756 });
wss.on('connection', ws => {
    console.log('---服务端： 客户端已连接---');

    ws.on('message', message => {
        console.log('服务端接收消息： ', message.toString());
    });

    ws.on('close', message => {
        console.log('客户端已关闭： ', message.toString());
    });

    setInterval(() => {
        ws.send('server say');
    }, 5000);
});

// 启动服务器
app.listen(port, hostName, () => {
    console.log('Server started on ' + port);
})

四、server-sent events(SSE)

this segment is from server-sent_events after adding and deleting。
优点：

SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
SSE 默认支持断线重连，WebSocket 需要自己实现。
SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
SSE 支持自定义发送的消息类型。

缺点： 单向，只能由服务器向浏览器发送
兼容性：

SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。

总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单> 向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发> 送信息，就变成了另一次 HTTP 请求。

4.1 客户端API

4.1.1 EventSource对象

使用 SSE 时，浏览器首先生成一个EventSource实例，向服务器发起连接。

let source = new EventSource(url);

上面的url可以与当前网址同域，也可以跨域。跨域时，可以指定第二个参数，打开withCredentials属性，表示是否一起发送 Cookie。

let source = new EventSource(url, { withCredentials: true });

EventSource实例的readyState属性，表明连接的当前状态。该属性只读，可以取以下值。

0：相当于常量EventSource.CONNECTING，表示连接还未建立，或者断线正在重连。
1：相当于常量EventSource.OPEN，表示连接已经建立，可以接受数据。
2：相当于常量EventSource.CLOSED，表示连接已断，且不会重连。

4.1.2 基本用法

事件绑定

source.onxxx = function() {}
// or
source.addEventListener('xxx', function() {})

事件

open:
连接一旦建立，就会触发open事件
message:
客户端收到服务端发来的数据，就会触发message事件，数据放在event.data中
error:
通信错误（如连接中断）时则会触发onerror事件
自定义事件

默认情况下，服务器发来的数据会默认触发message事件，开发者也可以自己定义SSE事件。
```
source.addEventListener('self-event', event => {
    let data = event.data;
})
```
服务端的实现请看后文。
方法
close:
close方法用于关闭连接

4.2 服务器实现

4.2.1 数据格式

服务器向浏览器发送的SSE数据，必须是UTF-8编码的文本，具有如下头部信息：

Content-type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

每一次发送的信息，由若干个message组成，每个message之间用\n\n分隔。每个message内部由若干行组成，每一行都是如下格式。

[field]: value\n

field可取四个值：

data
event
id
retry

此外，还可以有以冒号开头的行，表示注释。通常服务器每隔一段时间会发送一个注释，以保持连接不会被断开。

:This is a comment

4.2.2 data字段

数据内容用data表示。

data:message\n\n

如果数据很长，可以分成多行，最后一行用\n\n结尾，前面都用\n结尾。、

data:begin\n
data:continue\n
data:end\n\n

4.2.3 id字段

数据标识符用id表示，相当于每一条数据的编号。

id:meg1\n
data:message\n\n

浏览器用lastEventId属性读取这个值。一旦连接断线，浏览器会发送一个 HTTP 头，里面包含一个特殊的Last-Event-ID头信息，将这个值发送回来，用来帮助服务器端重建连接。因此，这个头信息可以被视为一种同步机制。

4.2.4 event字段

event字段表示自定义的事件类型，默认是message事件。浏览器可以用addEventListener()监听该事件。

event: foo\n
data: a foo event\n\n

data: an unnamed event\n\n

event: bar\n
data: a bar event\n\n

上面的代码创造了三条信息。第一条的名字是foo，触发浏览器的foo事件；第二条未取名，表示默认类型，触发浏览器的message事件；第三条是bar，触发浏览器的bar事件。

4.2.5 retry 字段

服务器可以用retry字段，指定浏览器重新发起连接的时间间隔。

retry: 10000\n

两种情况会导致浏览器重新发起连接：一种是时间间隔到期，二是由于网络错误等原因，导致连接出错。

4.3 Node 服务器实例

SSE 要求服务器与浏览器保持连接。对于不同的服务器软件来说，所消耗的资源是不一样的。Apache 服务器，每个连接就是一个线程，如果要维持大量连接，势必要消耗大量资源。Node 则是所有连接都使用同一个线程，因此消耗的资源会小得多，但是这要求每个连接不能包含很耗时的操作，比如磁盘的 IO 读写。

下面是 Node 的 SSE 服务器:

<!-- 客户端(前端) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE</title>
</head>
<body>
    <script>
        let source = new EventSource("/connSSE");

        // 监听服务器SEE启动
        source.onopen = event => {
            console.log(`---event type:  ${event.type}---`);
			console.log('data: ', event.data);
            console.log(`------------------------\n\n`);
        }

        // 收到默认的message消息
		source.onmessage = event => {
            console.log(`---event type:  ${event.type}---`);
			console.log('data: ', event.data);
            console.log(`------------------------\n\n`);
		};

        // 自定义事件监听1
        source.addEventListener('projectOpen1', event => {
            console.log(`---event type:  ${event.type}---`);
			console.log('data: ', event.data);
            console.log(`------------------------\n\n`);
        });

        // 自定义事件监听2
        source.addEventListener('projectOpen2', event => {
            console.log(`---event type:  ${event.type}---`);
			console.log('data: ', event.data);
            console.log(`------------------------\n\n`);
        });

        // SEE连接发送错误
		source.onerror = event => {
            console.log('---link error!---');
			source.close();
		};
    </script>
</body>
</html>

// 服务端(后台)
// 服务端(后台)
const path = require('path');
const express = require('express');

let app = express();

let hostName = '127.0.0.1'
let port = 8908

// 返回主页
app.get('/index', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.get('/connSSE', function(req, res) {
    res.header({
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache'
    });

    let timeOut = 1000;

    setTimeout(() => {
        res.write('data:' + (new Date()) + '\n\n');
    }, timeOut);
    timeOut += 1000;

    setTimeout(() => {
        res.write('event: projectOpen1\n');
        res.write('data:' + (new Date()) + '\n\n');

        res.write('event: projectOpen2\n');
        res.write('data:' + (new Date()) + '\n\n');
    }, timeOut);
    timeOut += 1000;

    setTimeout(() => {
        res.write('event: close\n');
        res.write('data: test close');
    }, timeOut);
    timeOut += 1000;
});

// 启动服务器
app.listen(port, hostName, () => {
    console.log('Server started on ' + port);
})

码农公寓