場景
websocket是Html5新增加特性之一,目的是瀏覽器與服務(wù)端建立全雙工的通信方式,解決http請求-響應(yīng)帶來過多的資源消耗,同時對特殊場景應(yīng)用提供了全新的實現(xiàn)方式,比如聊天、股票交易、游戲等對對實時性要求較高的行業(yè)領(lǐng)域。
背景
在瀏覽器中通過http僅能實現(xiàn)單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,并需要服務(wù)器有較好的支持; flash中的socket和xmlsocket可以實現(xiàn)真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項功能. 可以預(yù)見,如果websocket一旦在瀏覽器中得到實現(xiàn),將會替代上面兩項技術(shù),得到廣泛的使用.面對這種狀況,HTML5定義了WebSocket協(xié)議,能更好的節(jié)省服務(wù)器資源和帶寬并達到實時通訊。目前各大主流瀏覽器都支持websocket,IE瀏覽器要IE10+
一、POM依賴
POM依賴,spring4.1.4.RELEASE,spring核心依賴請自行添加,下面是websocket相關(guān)jar
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>4.1.4.RELEASE</version>
</dependency>
二、WebSocket入口
@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
//允許連接的域,只能以http或https開頭
String[] allowsOrigins = {"http://www."};
//WebIM WebSocket通道
registry.addHandler(chatWebSocketHandler(),"/ webSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor());
registry.addHandler(chatWebSocketHandler(), "/sockjs/w ebSocketIMServer").setAllowedOrigins(allowsOrigins).addInterceptors(myInterceptor()).withSockJS();
}
@Bean
public ChatWebSocketHandler chatWebSocketHandler() {
return new ChatWebSocketHandler();
}
@Bean
public WebSocketHandshakeInterceptor myInterceptor(){
return new WebSocketHandshakeInterceptor();
}
}
- 實現(xiàn)WebSocketConfigurer接口,重寫registerWebSocketHandlers方法,這是一個核心實現(xiàn)方法,配置websocket入口,允許訪問的域、注冊Handler、SockJs支持和攔截器。
- registry.addHandler注冊和路由的功能,當(dāng)客戶端發(fā)起websocket連接,把/path交給對應(yīng)的handler處理,而不實現(xiàn)具體的業(yè)務(wù)邏輯,可以理解為收集和任務(wù)分發(fā)中心。
- setAllowedOrigins(String[] domains),允許指定的域名或IP(含端口號)建立長連接,如果只允許自家域名訪問,這里輕松設(shè)置。如果不限時使用"*"號,如果指定了域名,則必須要以http或https開頭。
- addInterceptors,顧名思義就是為handler添加攔截器,可以在調(diào)用handler前后加入我們自己的邏輯代碼。
- spring websocket也支持STOMP協(xié)議,下回再分享。
三、攔截器實現(xiàn)
public class WebSocketHandshakeInterceptor implements HandshakeInterceptor {
@Override
public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object
> attributes) throws Exception {
if (request instanceof ServletServerHttpRequest) {
attributes.put("username",userName);
}
return true;
}
@Override
public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {
}
}
beforeHandshake,在調(diào)用handler前處理方法。常用在注冊用戶信息,綁定WebSocketSession,在handler里根據(jù)用戶信息獲取WebSocketSession發(fā)送消息。
四、Handler處理類
public class ChatWebSocketHandler extends TextWebSocketHandler{
private final static List<WebSocketSession> sessions = Collections.synchronizedList(new ArrayList<WebSocketSession>());
//接收文本消息,并發(fā)送出去
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
chatTextMessageHandler(message.getPayload());
super.handleTextMessage(session, message);
}
//連接建立后處理
@SuppressWarnings("unchecked")
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
logger.debug("connect to the websocket chat success......");
sessions.add(session);
//處理離線消息
}
//拋出異常時處理
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
if(session.isOpen()){
session.close();
}
logger.debug("websocket chat connection closed......");
sessions.remove(session);
}
//連接關(guān)閉后處理
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
logger.debug("websocket chat connection closed......");
sessions.remove(session);
}
@Override
public boolean supportsPartialMessages() {
return false;
}
}
五、客戶端連接
var host = window.location.host;
var websocket;
if ('WebSocket' in window) {
websocket = new ReconnectingWebSocket("ws://"
+ host + "/webSocketIMServer", null, {debug:true, maxReconnectAttempts:4});
} else if ('MozWebSocket' in window) {
websocket = new MozWebSocket("ws://" + host
+ "/webSocketIMServer");
} else {
websocket = new SockJS("http://" + host
+ "/sockjs/webSocketIMServer");
}
websocket.onopen = function(evnt) {
console.log("websocket連接上");
};
websocket.onmessage = function(evnt) {
messageHandler(evnt.data);
};
websocket.onerror = function(evnt) {
console.log("websocket錯誤");
};
websocket.onclose = function(evnt) {
console.log("websocket關(guān)閉");
}
這里用到了ReconnectingWebSocket.js,對瀏覽器自帶websocket添加了擴展,例如重連,連接超時時間,失敗重連間隔,嘗試連接最大次數(shù)等。
項目主頁:ReconnectingWebSocket
ps:如果有疑問,你也可以關(guān)注我的微信公眾號『ITNotes』, 一起交流學(xué)習(xí) 。
|