在spring boot中使用webSocket組件（一）

時間 2019-11-17

標籤 spring boot 使用 websocket 組件欄目 Spring 简体版

原文原文鏈接

最近在項目中使用到了spring的webSocket組件，在這裏和你們分享下，若有錯誤，歡迎你們指正。javascript

在這裏我使用的IDE工具是Intellij idea，框架是spring boot。spring boot的主要功能是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員再也不須要定義樣板化的配置。（簡單點講就是幫你整合好了框架，不用本身搭建了，不用再寫xml配置文件了！！！）html

一，首先先搭建spring boot的框架，如圖：File-->New-->Project,前端

而後會進入如下頁面，選擇左邊的Spring Initiailzr,而後nextjava

下圖，用來編輯本身項目的一些信息，能夠根據本身的需求進行編輯，而後nextjquery

下圖，用來選擇spring boot的一些服務，咱們這裏選擇（websocket和Thymeleaf），web

在這裏選擇什麼組件，spring boot就會幫你下載對應的jar包，是否是很方便啊。spring

Thymeleaf是一個JAVA庫，一個XML/XHTML/HTML5的可擴展的模板引擎，而且它能夠在WEB和非WEB環境下運行。瀏覽器

（在本人使用Thymeleaf的過程當中感受功能相似JSP中的EL表達式，可能更增強大，將在下次進行講解）服務器

下圖，填寫項目名和項目存放路徑，而後finishwebsocket

二，spring boot環境搭建好後，開始寫代碼！！

1.首先先加入三個JS，如圖：

2.建立WebSocketConfig類，代碼以下：

package com.wisely.ch7_6;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker//1
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/endpointWisely").withSockJS(); //2
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");//3
    }
}

(1),@EnableWebSocketMessageBroker註解用於開啓使用STOMP協議來傳輸基於代理（MessageBroker）的消息，這時候控制器（controller）開始支持@MessageMapping,就像是使用@requestMapping同樣。

(2),註冊一個Stomp的節點（endpoint）,並指定使用SockJS協議。

(3),配置消息代理（MessageBroker）。

3.建立WiselyMessage類（瀏覽器向服務器傳送消息，用該類進行接收），代碼以下：

package com.wisely.ch7_6.domain;

public class WiselyMessage {
    private String name;
    public String getName(){
        return name;
    }
}

4.建立WiselyResponse類（服務器向瀏覽器傳送消息，用該類進行傳送），代碼以下：

package com.wisely.ch7_6.domain;

public class WiselyResponse {
    private String responseMessage;
    public WiselyResponse(String responseMessage){
        this.responseMessage = responseMessage;
    }
    public String getResponseMessage(){
        return responseMessage;
    }
}

5.建立WsController類，代碼以下：

@Controller
public class WsController {
    @MessageMapping("/welcome")//1
    @SendTo("/topic/getResponse")//2
    public WiselyResponse say(WiselyMessage message) throws Exception {
        return new WiselyResponse("Welcome, " + message.getName() + "!");
    }
}

(1)@MessageMapping和@RequestMapping功能相似，用於設置URL映射地址，瀏覽器向服務器發起請求，須要經過該地址。

(2)若是服務器接受到了消息，就會對訂閱了@SendTo括號中的地址傳送消息。

6.建立前端頁面ws.html,代碼以下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Spring Boot+WebSocket+廣播式</title>

</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的瀏覽器不支持websocket</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">鏈接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">斷開鏈接</button>
    </div>
    <div id="conversationDiv">
        <label>輸入你的名字</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">發送</button>
        <p id="response"></p>
    </div>
</div>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>
<script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }
    
    function connect() {
        var socket = new SockJS('/endpointWisely'); //1
        stompClient = Stomp.over(socket);//2
        stompClient.connect({}, function(frame) {//3
            setConnected(true);
            console.log('開始進行鏈接Connected: ' + frame);
            stompClient.subscribe('/topic/getResponse', function(respnose){ //4
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }
    
    
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $('#name').val();
        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//5
    }

    function showResponse(message) {
          var response = $("#response");
          response.html(message);
    }
</script>
</body>
</html>

（1）鏈接SockJS的endpoint是「endpointWisely」，與後臺代碼中註冊的endpoint要同樣。

（2）建立STOMP協議的webSocket客戶端。

（3）鏈接webSocket的服務端。

（4）經過stompClient.subscribe（）訂閱服務器的目標是'/topic/getResponse'發送過來的地址，與@SendTo中的地址對應。

（5）經過stompClient.send（）向地址爲"/welcome"的服務器地址發起請求，與@MessageMapping裏的地址對應。

7.建立WebMvcConfig類（該類的做用是能夠爲ws.html提供便捷的地址映射,只須要在地址欄裏面輸入localhost:8080/ws,就會找到ws.html），代碼以下：

package com.wisely.ch7_6;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig  extends WebMvcConfigurerAdapter{
    
     @Override
       public void addViewControllers(ViewControllerRegistry registry) {
           registry.addViewController("/ws").setViewName("/ws");
       }
}