一.服務端推送常用技術介紹
服務端主流推送技術：websocket、SSE等
1.客戶端輪詢：ajax定時拉取后台數據
js setInterval定時函數 + ajax異步加載 定時向服務器發送請求
服務器壓力會較大
2.服務端主動推送：websocket《推薦使用》
全雙工即雙向通訊，本質上是一個額外的TCP連接，建立和關閉時握手使用http協議，其他數據傳輸不使用http協議，更加復雜一些，適用於需要進行復雜雙向數據通訊的場景，支持大部分主流瀏覽器。
開發成本較高，適用性較好，適用於聊天功能等。
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
客戶端代碼
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/WebSocketTest/websocket");
}
else {
alert('當前瀏覽器 Not support websocket')
}
//連接發生錯誤的回調方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
}
//接收到消息的回調方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//連接關閉的回調方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket連接關閉");
}
//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
}
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關閉WebSocket連接
function closeWebSocket() {
websocket.close();
}
//發送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
服務端代碼
/**
* websocket服務
* @author like
*
*/
@ServerEndpoint("/websocket")
public class WebsocketTest {
private static int onlineCount=0;//記錄當前在線人數
//確保線程安全
private static CopyOnWriteArraySet<WebsocketTest> webSocketSet=new CopyOnWriteArraySet<WebsocketTest>();
private Session session;
@OnOpen
public void onOpen(Session session){
this.session=session;
webSocketSet.add(this);
addOnlineCount();
System.out.println("有新連接加入！當前在線人數為" + getOnlineCount());
}
@OnClose
public void OnClose(){
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //在線數減1
System.out.println("有一連接關閉！當前在線人數為" + getOnlineCount());
}
@OnMessage
public void OnMessage(String message, Session session){
System.out.println("來自客戶端的消息:" + message);
//群發消息
for(WebsocketTest item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
@OnError
public void OnError(Session session, Throwable error){
System.out.println("發生錯誤");
error.printStackTrace();
}
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebsocketTest.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebsocketTest.onlineCount--;
}
}
3.服務端主動推送：SSE（Server Send Event）
簡介：
SSE（Server-Sent Events，服務器發送事件）是圍繞只讀Comet 交互推出的API 或者模式。
SSE API允許網頁獲得來自服務器的更新（HTML5），用於創建到服務器的單向連接，服務器通過這個連接可以發送任意數量的數據。
服務器響應的MIME類型必須是text/event-stream，而且是瀏覽器中的JavaScript API 能解析格式輸出。
SSE 支持短輪詢、長輪詢和HTTP 流，而且能在斷開連接時自動確定何時重新連接。
SSE是html5新標准，用來實現從服務端實時推送數據導瀏覽器端
直接建立在當前http協議上，本質上是保持一個http長連接，輕量級協議
適用於簡單的服務器數據推送場景，使用服務器推送事件
學習資料:https://www.w3school.com.cn/html5/html_5_serversentevents.asp
前端代碼
客戶端只需要直接使用**window.EventSource**對象，然后調用該對象的相應方法即可。
//判斷是否支持SSE
if('EventSource' in window){
//初始化SSE
var url="http:localhost:8080/test/push";
var source=new EventSource(url);
//開啟時調用
source.onopen=(event)=>{
console.log("開啟SSE");
}
//監聽message事件
source.onmessage=(event)=>{
var data=event.data;
$("body").append($("<p>").text(data));
}
//監聽like事件
source.addEventListener('like',function(event){
var data=event.data;
$("body").append($("<p>").text(data));
},false);
//發生異常時調用
source.onerror=(event)=>{
console.log(event);
}
服務端代碼
由於SSE是http請求，但是又限定是一個長連接，所以要設置MIME類型為text/event-stream。返回的為字符串。
/**
* SSE后台controller
* @author like
*
*/
@Controller
@RequestMapping(value="/test")
public class TestSSEController {
@ResponseBody
@RequestMapping(value="/push",produces="text/event-stream;charset=UTF-8")
public String push(HttpServletResponse res){
res.setHeader("Access-Control-Allow-Origin","*");
Date date=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("YYYY-MM-dd HH:mm:ss");
String nowDate=sdf.format(date);
return "data: 我是一個data 現在時間是"+nowDate+" \nevent:like\n retry:5000\n\n";
}
}
消息體格式
服務器向瀏覽器發送的 SSE 數據，必須是 UTF-8 編碼的文本；
每一次發送的信息，由若干個message組成，每個message之間用\n\n分隔。每個message內部由若干行組成；
格式
[field]:value\n
其中field可以為四種
- data
- event
- id
- retry
data代表數據，event代表事件名稱，id代表id，retry代表多少時間輪訓一次。
所以我的服務端寫的消息就可以翻譯為：事件名稱為**like**，數據為**我是一個data 現在時間是+當前時間**，每5秒輪訓一次
data: 我是一個data 現在時間是"+nowDate+" \nevent:like\n retry:5000\n\n
SSE與WebSocket有相似功能，都是用來建立瀏覽器與服務器之間的通信渠道。兩者的區別在於：
- WebSocket是全雙工通道，可以雙向通信，功能更強；SSE是單向通道，只能服務器向瀏覽器端發送。
- WebSocket是一個新的協議，需要服務器端支持；SSE則是部署在 HTTP協議之上的，現有的服務器軟件都支持。
- SSE是一個輕量級協議，相對簡單；WebSocket是一種較重的協議，相對復雜。
- SSE默認支持斷線重連，WebSocket則需要額外部署。
- SSE支持自定義發送的數據類型。
- SSE不支持CORS 參數url就是服務器網址，必須與當前網頁的網址在同一個網域（domain），而且協議和端口都必須相同。