SSE和WebSocket的用法和比較

在咱們平常開發中，會遇到服務端和客戶端的通信，今天咱們就來比較一下HTML5新特性SSE和WebSocket的用法。

一，SSE

簡介

SSE（Server-Sent Events，服務器發送事件）是圍繞只讀Comet 交互推出的API 或者模式。
SSE API容許網頁得到來自服務器的更新（HTML5），用於建立到服務器的單向鏈接，服務器經過這個鏈接能夠發送任意數量的數據。服務器響應的MIME類型必須是text/event-stream，並且是瀏覽器中的JavaScript API 能解析格式輸出。SSE 支持短輪詢、長輪詢和HTTP 流，並且能在斷開鏈接時自動肯定什麼時候從新鏈接。

客戶端

//判斷是否支持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);

}

 

客戶端只須要直接使用**window.EventSource**對象，而後調用該對象的相應方法便可。

 

服務端

/**
* 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是http請求，可是又限定是一個長鏈接，因此要設置MIME類型爲text/event-stream。返回的爲字符串。

消息的格式

服務器向瀏覽器發送的 SSE 數據，必須是 UTF-8 編碼的文本；

每一次發送的信息，由若干個message組成，每一個message之間用\n\n分隔。每一個message內部由若干行組成；

格式

[field]:value\n

其中field能夠爲四種

1. data
2. event
3.  id
4.  retry

data表明數據，event表明事件名稱，id表明id，retry表明多少時間輪訓一次。

因此個人服務端寫的消息就能夠翻譯爲：事件名稱爲**like**，數據爲**我是一個data 如今時間是+當前時間**，每5秒輪訓一次

data: 我是一個data 如今時間是"+nowDate+" \nevent:like\n retry:5000\n\n

 

下面是接收消息：

二，Websocket

簡介

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);
}

 

能夠看到客戶端直接調用ws地址就能夠了。

 

服務端

/**
* 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--;
}
}

 

演示

 

後臺輸出：

有新鏈接加入！當前在線人數爲1
來自客戶端的消息:123
來自客戶端的消息:456

 

三，總結

SSE與WebSocket有類似功能，都是用來創建瀏覽器與服務器之間的通訊渠道。二者的區別在於：

• WebSocket是全雙工通道，能夠雙向通訊，功能更強；SSE是單向通道，只能服務器向瀏覽器端發送。
• WebSocket是一個新的協議，須要服務器端支持；SSE則是部署在 HTTP協議之上的，現有的服務器軟件都支持。
• SSE是一個輕量級協議，相對簡單；WebSocket是一種較重的協議，相對複雜。
• SSE默認支持斷線重連，WebSocket則須要額外部署。
• SSE支持自定義發送的數據類型。
• SSE不支持CORS 參數url就是服務器網址，必須與當前網頁的網址在同一個網域（domain），並且協議和端口都必須相同。