Spring框架中自帶了WebSocket的jar包，利用它可以實現與H5中WebSocket進行對接，實現互動。使用Spring WebSocket並不複雜，下面一起來看下怎麼實現吧（注：本例子是通過SpringBoot構建的專案，除了專案的啟動程式碼配置不一樣外，WebSocket的配置程式碼可在SpringMVC上無縫使用）。

這個例子會通過模擬登陸，在Session中儲存使用者資訊，然後進行WebSocket通訊時，從Session中將使用者資訊取出來，並將資訊轉發給指定使用者。

一、所需POM配置

SpringMVC配置：

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

通過SpringMVC來構建專案的話，除了一些基本的Spring jar包之外，只需要新增上面這個jar包即可。

SpringBoot配置：

<build>
    <plugins>
      <plugin>
        <groupId
 
>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId
 
>
    <version>1.5.6.RELEASE</version>
    <relativePath/>
  </parent>

  <dependencies>
    <dependency>  
        <groupId>org.springframework.boot</groupId>  
        <artifactId>spring-boot-starter</artifactId>  
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>  
        <groupId>org.springframework.boot</groupId>  
        <artifactId>spring-boot-starter-thymeleaf</artifactId>  
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-websocket</artifactId>
    </dependency>
  </dependencies>

使用SpringBoot來構建專案的話，需要使用上面這些jar包，上面的jar包包含了SpringBoot的配置、WebSocket的配置。

二、程式碼實現

啟動類

@SpringBootApplication
@Controller
@ComponentScan(basePackages={"com.test.spring.boot"})   //自定義自動掃描
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

上面程式碼是SpringBoot的一個專案啟動類，執行main方法就可以啟動服務，相關配置在這篇文章裡不是重點，就不寫出來了，感興趣可以看這篇文章：SpringBoot+Thymeleaf整合開發例項。

這裡需要注意的是 @ComponentScan(basePackages={"com.test.spring.boot"})，代表了掃描的包名。

訪問Controller

@Controller
@RequestMapping("/")
public class HelloController {

    private static final String SESSION_USER = "user";

    @Autowired
    private MyWebSocketHandler myWebSocketHandler;

    // 訪問跳轉到websocket.html頁面
    @RequestMapping("/socket")
    public String websocket() {
        return "websocket";
    }

    // 模擬登陸操作，將使用者資訊存入Session
    @RequestMapping("/login")
    public @ResponseBody String login(UserBean userBean, HttpServletRequest request) {
        System.out.println("========================== 開始登入 ===================");
        System.out.println("userId="+userBean.getId());
        System.out.println("userId="+userBean.getUsername());
        System.out.println("userId="+userBean.getPhone());

        request.getSession().setAttribute(SESSION_USER, userBean);
        System.out.println("========================== 登入成功 ===================");
        return "success";
    }

    // 普通操作，觸發WebSocket通訊
    @RequestMapping("/send/message")
    public @ResponseBody String sendMessage(HttpServletRequest request) {
        UserBean userBean = (UserBean) request.getSession().getAttribute(SESSION_USER);
        boolean isSuccess = myWebSocketHandler.sendMessageToUser(userBean.getId(), "測試傳送訊息");
        System.out.println(isSuccess);
        return "message";
    }
}

註冊WebSocket處理類

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket").addInterceptors(new WebSocketInterceptor());
    }

}

這是一個WebSocket配置類，實現介面來配置Websocket請求的路徑和攔截器。 這裡是將請求路徑 /websocket繫結到MyWebSocketHandler()類，並設定一個攔截器WebSocketInterceptor()，
註解不要忘掉，否則無法註冊這個配置類。

WebSocket攔截器

/**
 * WebSocket 攔截器，用於將使用者資訊從session中存入map，方便後面websocket請求時從map中找到指定的使用者session資訊
 * @author Administrator
 *
 */
public class WebSocketInterceptor implements HandshakeInterceptor {

    private static final String SESSION_USER = "user";

    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, 
            WebSocketHandler wsHandler, Map<String, Object> map) throws Exception {
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;
            HttpSession session = serverHttpRequest.getServletRequest().getSession();
            if (session != null) {
                map.put(SESSION_USER, session.getAttribute(SESSION_USER));
            }

        }
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request,
            ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {

    }

}

這個攔截器的作用是在請求WebSocket時，將Session中的使用者資訊轉存到map中，方便後面WebSocket請求處理時，能夠從map中獲取到使用者資訊。

WebSocket具體請求處理類

在貼程式碼之前，我們先來看下WebSocket具體請求處理類中的那些方法可以重寫，他們是什麼含義：

1. 在afterConnectionEstablished連線建立成功之後，記錄使用者的連線標識，便於後面發信息，這裡我是記錄將id記錄在Map集合中。

2. 在handleTextMessage中可以對H5 Websocket的send方法進行處理。

3. handleTransportError連接出錯處理，主要是關閉出錯會話的連線，和刪除在Map集合中的記錄。

4. afterConnectionClosed連線已關閉，移除在Map集合中的記錄。

@Component
public class MyWebSocketHandler extends TextWebSocketHandler {

    //線上使用者列表
    private static final Map<Integer, WebSocketSession> users = new HashMap<Integer, WebSocketSession>();
    //使用者標識
    private static final String SESSION_USER = "user";

    /**
     * 連線已關閉，移除在Map集合中的記錄
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        users.remove(getUserId(session));
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        if (session.isOpen()) {
            session.close();
        }
        System.out.println("連接出錯");
        users.remove(getUserId(session));
    }

    /**
     * 連線建立成功之後，記錄使用者的連線標識，便於後面發信息
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("成功建立連線");
        Integer userId = getUserId(session);
        System.out.println(userId);
        if (userId != null) {
            users.put(userId, session);
            session.sendMessage(new TextMessage("成功建立socket連線"));
            System.out.println(userId);
            System.out.println(session);
        }
    }

    /**
     * 處理收到的websocket資訊
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

    }

     /**
     * 傳送資訊給指定使用者
     * @param clientId
     * @param message
     * @return
     */
    public boolean sendMessageToUser(Integer clientId, String message) {
        if (users.get(clientId) == null) {
            return false;
        }

        WebSocketSession session = users.get(clientId);
        System.out.println("sendMessage:" + session);

        if (!session.isOpen()) {
            return false;
        }
        try {
            int count = 1;
            TextMessage textMessage = null; 
            String newMessage = "";

            // 迴圈向客戶端傳送資料
            while(true) {
                newMessage = message + String.valueOf(count);
                textMessage = new TextMessage(newMessage);
                session.sendMessage(textMessage);
                Thread.sleep(5000);
                newMessage = "";
            }
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        } catch (InterruptedException e) {
            e.printStackTrace();
            return false;
        }
    }

    /**
     * 廣播資訊
     * @param message
     * @return
     */
    public boolean sendMessageToAllUsers(TextMessage message) {
        boolean allSendSuccess = true;
        Set<Integer> clientIds = users.keySet();
        WebSocketSession session = null;
        for (Integer clientId : clientIds) {
            try {
                session = users.get(clientId);
                if (session.isOpen()) {
                    session.sendMessage(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
                allSendSuccess = false;
            }
        }
        return  allSendSuccess;
    }

     /**
     * 獲取使用者標識
     * @param session
     * @return
     */
    private Integer getUserId(WebSocketSession session) {
        try {
            UserBean userBean = (UserBean) session.getAttributes().get(SESSION_USER);
            return userBean.getId();
        } catch (Exception e) {
            return null;
        }
    }
}

前端實現

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>WebSocket Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" th:href="@{/css/main.css}"/>
<script th:src="@{/js/jQuery-2.1.4.min.js}" type="text/javascript"></script>

</head>
<body>
    <div>
        <input type="button" id="btn_test" value="點選獲取資料"/>
    </div>
    <div>
        <div id="test_1">
        </div>
    </div>
</body>
<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function() {
    var websocket =  null;
    var sendData = {"id": 1, "username": "tanjin", "phone": "1888221322122"};
    // 模擬登陸
    $.post("login", sendData, function(data) {
        // 初始化一個WebSocket連線
        websocket = new WebSocket("ws://localhost:8082/websocket");
        websocket.onerror = function(event) {onError(event);};
        websocket.onopen = function(event) {onOpen(event);};
        // websocket接收的資訊會通過這個回撥方法返回給前端
        websocket.onmessage = function(event) {onMessage(event);};
    })

    // 列印收到的websocket返回資訊
    function onMessage(event) {
        $("#test_1").append("<label class='navbar-label'>" + event.data + "</label>").append("</br>");
        $("#test_1").scrollTop( $("#test_1")[0].scrollHeight);
    }

    // 開啟websocket請求回撥處理
    function onOpen(event) {
        $("#test_1").empty();
        var label = $("<label>").html("開始執行....");
        $("#test_1").append(label).append("<br>").append("<br>");
    }

    //報錯處理回撥函式
    function onError(event) {
        alert(event.data);
    }

    //點選頁面上的一個按鈕，通過一個普通方法來開始一個websocket請求
    $("#btn_test").click(function() {
        $.post("send/message", null, function() {})
    })
})
//]]>
</script>
</html>

//<![CDATA[ 這個標籤在這裡是由於thymeleaf的語法限制使用的，如果是JSP則不需要。

處理結果