一、SSE 的本質(zhì)
嚴(yán)格地說，HTTP 協(xié)議無法做到服務(wù)器主動(dòng)推送信息。但是，有一種變通方法，就是服務(wù)器向客戶端聲明，接下來要發(fā)送的是流信息（streaming）。
也就是說，發(fā)送的不是一次性的數(shù)據(jù)包，而是一個(gè)數(shù)據(jù)流，會(huì)連續(xù)不斷地發(fā)送過來。這時(shí)，客戶端不會(huì)關(guān)閉連接，會(huì)一直等著服務(wù)器發(fā)過來的新的數(shù)據(jù)流，視頻播放就是這樣的例子。本質(zhì)上，這種通信就是以流信息的方式，完成一次用時(shí)很長(zhǎng)的下載。
SSE 就是利用這種機(jī)制，使用流信息向?yàn)g覽器推送信息。它基于 HTTP 協(xié)議，目前除了 IE/Edge，其他瀏覽器都支持。
二、SSE 的特點(diǎn)
SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務(wù)器之間的通信渠道，然后服務(wù)器向?yàn)g覽器推送信息。
總體來說，WebSocket 更強(qiáng)大和靈活。因?yàn)樗侨p工通道，可以雙向通信；SSE 是單向通道，只能服務(wù)器向?yàn)g覽器發(fā)送，因?yàn)榱餍畔⒈举|(zhì)上就是下載。如果瀏覽器向服務(wù)器發(fā)送信息，就變成了另一次 HTTP 請(qǐng)求。
三、SSE 和WebSocket 區(qū)別
1、SSE 使用 HTTP 協(xié)議，現(xiàn)有的服務(wù)器軟件都支持。WebSocket 是一個(gè)獨(dú)立協(xié)議。
2、SSE 屬于輕量級(jí)，使用簡(jiǎn)單；WebSocket 協(xié)議相對(duì)復(fù)雜。
3、SSE 默認(rèn)支持?jǐn)嗑€重連，WebSocket 需要自己實(shí)現(xiàn)。
4、SSE一般只用來傳送文本，二進(jìn)制數(shù)據(jù)需要編碼后傳送，WebSocket 默認(rèn)支持傳送二進(jìn)制數(shù)據(jù)。
5、SSE 支持自定義發(fā)送的消息類型。
因此，兩者各有特點(diǎn)，適合不同的場(chǎng)合。
四、使用
SSE后端代碼
SpringMVC中，已經(jīng)集成了該功能，所以無需額外引入jar包，直接上代碼：
@Slf4j
@RestController
@RequestMapping("/sse")
public class SseController {
private static final Map<String, SseEmitter> SSE_CACHE = new ConcurrentHashMap<>();
/**
* 建立連接
*/
@GetMapping("/connect/{driverId}")
public SseEmitter connect(@PathVariable String driverId) {
log.info("司機(jī)ID:{}", driverId);
SseEmitter sseEmitter = new SseEmitter(0L);
//注入監(jiān)聽對(duì)象
SSE_CACHE.put(driverId,sseEmitter);
return sseEmitter;
}
/**
* 推送消息
*/
@GetMapping("/push")
public String push(@RequestParam String driverId,@RequestParam String content){
try {
SseEmitter sseEmitter = SSE_CACHE.get(driverId);
if (null == sseEmitter) {
return "連接斷開,請(qǐng)重新建立連接";
}
sseEmitter.send(content);
} catch (IOException e) {
throw new RuntimeException(e);
}
return "給用戶:" + driverId + "，發(fā)送了消息：" + content;
}
/**
* 斷開連接
*/
@GetMapping(path = "over")
public String over(String driverId) {
SseEmitter sseEmitter = SSE_CACHE.get(driverId);
if (sseEmitter != null) {
sseEmitter.complete();
SSE_CACHE.remove(driverId);
}
return "over";
}
}
前端代碼，簡(jiǎn)單測(cè)試文章來源：http://www.zghlxwxcb.cn/news/detail-666656.html
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>司機(jī)監(jiān)聽測(cè)試頁面-模擬司機(jī)客戶端</h1>
<button onclick="setMegContent('鼠標(biāo)點(diǎn)我了')">測(cè)試meg展示</button>
<div id="message">展示服務(wù)的推送過來消息的地方</br></div>
<script>
driverId = 1;
if (window.EventSource) {
console.info("此瀏覽器支持SSE")
source = new EventSource("http://localhost:7000/sse/connect/" + driverId)
source.onmessage = function (event) {
setMegContent(event.data);
};
} else {
setMegContent("此瀏覽器不支持SSE")
}
function setMegContent(content) {
document.getElementById("message").innerHTML += (content + '</br>');
}
</script>
</body>
</html>
效果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-666656.html
到了這里，關(guān)于介紹Server-Sent Events，以及使用，超級(jí)簡(jiǎn)單！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![SSE[Server-Sent Events]實(shí)現(xiàn)頁面流式數(shù)據(jù)輸出(模擬ChatGPT流式輸出)](https://imgs.yssmx.com/Uploads/2024/01/813587-1.png)
