WebSocket實現方式二

時間  2019-12-18
標籤 websocket 實現 方式 简体版
原文   原文鏈接

Spring方式實現WebSocket

上一次咱們實現WebSocket是基於Tomcat的方式，見上一篇博文《WebSocket實現方式一》javascript

這一次咱們採用Spring的方式實現

用到的jar包以下：html

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
    <version>4.2.3.RELEASE</version>
</dependency>

後臺代碼：前端

WebSocketConfig.java類java

/**
 * 
 */
package nbs.omp.websocket;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import nbs.omp.interceptor.HandShakeInterceptor;

/**
 * @author David
 *
 */
@Configuration
@Component
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements WebSocketConfigurer {
	@Autowired
	MyWebSocketHandler handler;
	@Override
	public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
		registry.addHandler(handler, "/ws").addInterceptors(new HandShakeInterceptor());
	}

}

@Configuration  //指明該類爲Spring 配置類web

@Component //泛指組件，當組件很差歸類的時候，咱們能夠使用這個註解進行標註。 
@EnableWebSocket  //聲明該類支持WebSocket
不要忘記在springmvc的配置文件中配置對此類的自動掃描spring

<!-- 自動掃描websocket包下的全部類 -->
<context:component-scan base-package="nbs.omp.websocket" />

攔截器 HandShakeInterceptor.java類websocket

/**
 * 
 */
package nbs.omp.interceptor;

import java.util.Map;

import javax.servlet.http.HttpSession;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;

import nbs.omp.model.User;

/**
 * @author David
 *
 */
public class HandShakeInterceptor implements HandshakeInterceptor {

	@Override
	public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
		Map<String, Object> attributes) throws Exception {
		System.out.println("Websocket:用戶[ID:"+ ((ServletServerHttpRequest) request).getServletRequest()
		.getSession(false).getAttribute("user") + "]已經創建鏈接");
		if (request instanceof ServletServerHttpRequest) {
			ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
			HttpSession session = servletRequest.getServletRequest().getSession(false);
			// 標記用戶
			User user = (User) session.getAttribute("user");
			if (user != null) {
				attributes.put("userId", user.getUserId());
			} else {
				return false;
			}
		}
		return true;
	}

	@Override
	public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
			Exception exception) {
		// TODO Auto-generated method stub

	}

}

MyWebSocketHandler.java類session

/**
 * 
 */
package nbs.omp.websocket;

import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.concurrent.CopyOnWriteArrayList;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;


/**
 * @author David
 *
 */
@Component
public class MyWebSocketHandler implements WebSocketHandler {
	
	
	public static final List<Map<Integer, WebSocketSession>> userSocketSessionList;
	static {
		userSocketSessionList = new CopyOnWriteArrayList<Map<Integer, WebSocketSession>>();
	}

	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String userName = (String) session.getAttributes().get("");
        //業務代碼...
    	//發送消息
        session.sendMessage(new TextMessage());
    }

	@Override
	public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
		//業務代碼...
		//發送消息
		sendMessageToUsers(new TextMessage());
	}

	@Override
	public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
		if (session.isOpen()) {
			session.close();
		}
		for(Map userSocketSessionMap : userSocketSessionList){
			Iterator<Entry<Integer, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator();
			// 移除Socket會話
			while (it.hasNext()) {
				Entry<Integer, WebSocketSession> entry = it.next();
				if (entry.getValue().getId().equals(session.getId())) {
					userSocketSessionList.remove(entry.getKey());
					System.out.println("Socket會話已經移除:用戶ID" + entry.getKey());
					break;
				}
			}
		}
	}

	@Override
	public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
		System.out.println("Websocket:" + session.getId() + "已經關閉");
		for(Map userSocketSessionMap : userSocketSessionList){
			Iterator<Entry<Integer, WebSocketSession>> it = userSocketSessionMap.entrySet().iterator();
			// 移除Socket會話
			while (it.hasNext()) {
				Entry<Integer, WebSocketSession> entry = it.next();
				if (entry.getValue().getId().equals(session.getId())) {
					userSocketSessionList.remove(userSocketSessionMap);
					System.out.println("Socket會話已經移除:用戶ID" + entry.getKey());
					break;
				}
			}
		}
	}

	@Override
	public boolean supportsPartialMessages() {
		// TODO Auto-generated method stub
		return false;
	}
	/**
	 * 給某個指定用戶發送消息
	 * 
	 * @param userName
	 * @param message
	 * @throws IOException
	 */
	public void sendMessageToUser(Integer userId, TextMessage message)throws IOException {
		for(Map userSocketSessionMap : userSocketSessionList){
			WebSocketSession session = (WebSocketSession) userSocketSessionMap.get(userId);
			if (session != null && session.isOpen()) {
				session.sendMessage(message);
			}
		}
	}
	
	/**
     * 給全部在線用戶發送消息
     *
     * @param message
     */
    public void sendMessageToUsers(TextMessage message) {
        for (WebSocketSession user : users) {
            try {
                if (user.isOpen()) {
                    user.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }    

}

前端JS：mvc

<script type="text/javascript">
				
		var websocket;
		if ('WebSocket' in window) {
			websocket = new WebSocket("ws://" + path + "/ws");
		} else if ('MozWebSocket' in window) {
			websocket = new MozWebSocket("ws://" + path + "/ws");
		} else {
			websocket = new SockJS("http://" + path + "/ws/sockjs");
		}
		websocket.onopen = function(event) {
			console.log("WebSocket:已鏈接");
			console.log(event);
		};
		websocket.onmessage = function(event) {
			var data=JSON.parse(event.data);
			console.log("WebSocket:收到一條消息",data);
			var textCss=data.from==-1?"sfmsg_text":"fmsg_text";
			$("#content").append("<div class='fmsg'><label class='name'>"+data.fromName+"&nbsp;"+data.date+"</label><div class='"+textCss+"'>"+data.text+"</div></div>");
			scrollToBottom();
		};
		websocket.onerror = function(event) {
			console.log("WebSocket:發生錯誤 ");
			console.log(event);
		};
		websocket.onclose = function(event) {
			console.log("WebSocket:已關閉");
			console.log(event);
		}
		function sendMsg(){
			var data={};
			websocket.send(JSON.stringify(data));				
			}
		}
						
		function send(event){
			var code;
			if(window.event){
			     code = window.event.keyCode; // IE
				 }else{
					 code = e.which; // Firefox
				 }
				if(code==13){ 
					sendMsg();            
				}
			}
			
			function clearAll(){
				$("#content").empty();
			}
		</script>

HTML頁面：app

<html>
<body>
	<h1>Spring整合WebSocket實現</h1>
	<div id="content"></div>
	<input type="text" placeholder="請輸入要發送的信息" id="msg" class="msg" onkeydown="send(event)">
	<input type="button" value="發送" class="send" onclick="sendMsg()" >
	<input type="button" value="清空" class="clear" onclick="clearAll()">
    <div id="message"></div>
 
</body>
</html>

至此代碼完畢，下面咱們來分析一下代碼執行的步驟

1，當spring容器啓動時會自動加載WebSocketConfig類，由於該類實現了WebSocketConfigurer接口，因此會調用registerWebSocketHandlers(...)方法。

2，當用戶登陸後頁面會調用JS執行websocket = new WebSocket("ws://" + path + "/ws");這行代碼，這時後臺攔截器會對「ws://" + path + "/ws」進行攔截，就進入了beforeHandshake(...)方法，握手成成功後進入afterHandshake(...)方法。

3，當攔截器順利經過後，程序就進入了MyWebSocketHandler類的supportsPartialMessages(...)方法，而後就是重要的afterConnectionEstablished(...)方法。連接成功會調用前端JS的websocket.onopen方法。

4，在afterConnectionEstablished(...)方法中就能夠寫業務邏輯並利用sendMessageToUser(...)發送消息了。

5，sendMessageToUser(...)方法的實質是利用webSocketSession.sendMessage(...)方法發送消息。

6，消息發送成功，這是會調用前端JS的websocket.onmessage方法。

7，當用戶經過頁面發送消息，即調用JS代碼websocket.send(JSON.stringify(data))，這時就進入了MyWebSocketHandler類的handleMessage(...)方法處理信息。

8，當有來自底層WebSocket消息傳輸錯誤時會調用後臺MyWebSocketHandler類的handleTransportError(...)方法進行WebSocketSession的close()等處理。

9，當用戶關閉WebSocket時會調用後臺MyWebSocketHandler類的afterConnectionClosed(...)方法移除會話。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程