WebSocket廣播通信

WebSocket爲瀏覽器和服務端相互的通信功能，瀏覽器可以向服務端發送消息，服務端也可以向瀏覽器發送消息。WebSocket需要瀏覽器的支持，目前大多數主流的瀏覽器都是支持的。

添加依賴

<!-- spring boot tomcat jsp 支持開啓 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!--servlet支持開啓-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

添加一個WebSocket的配置文件，代碼如下

package org.websocket.demo;

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

@Configuration
@EnableWebSocketMessageBroker
public class WebScoketConfig implements WebSocketMessageBrokerConfigurer
{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/servicekey").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}

如上所示，我們通過@EnableWebSocketMessageBroker註解開啓使用STOMP協議來傳輸消息，並且實現了registerStompEndpoints方法添加了對應的STOMP使用SockJS協議。接下來我們配置兩個實體用於瀏覽器與服務器端的通信交互。

我們創建2個簡單的實體類,用來定義我們的消息主體，代碼如下

package org.websocket.demo;


public class MessageBean {
    private String mymessage;

    public String getMymessage() {
        return mymessage;
    }

    public void setMymessage(String mymessage) {
        this.mymessage = mymessage;
    }
}

package org.websocket.demo;

public class ReponseMessage {
    private String responseMessage;

    public ReponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }

    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }
}

第一個用來接收web向服務器傳遞的消息，第二個用來接收定義服務器向web發送的消息

創建一個WebSocket的控制器，代碼如下

package org.websocket.demo;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getMessage")
    public ReponseMessage test(MessageBean message)
    {
        return new ReponseMessage("webScoket消息："+message.getMymessage());
    }
}

@MessageMapping：消息映射地址，類似@RequestMapping，當服務端有消息存在時，會對訂閱@SendTo中路徑的瀏覽器發送請求。接下來我們添加一個Jsp頁面來配置WebSocket的JS使用方式。

先修改配置文件，增加jsp支持

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

這裏還需要下載三個js文件，jquery.min.js、sockjs.min.js、stomp.min.js，放在static目錄下，這是spring爲我們提供的默認靜態資源目錄，如下所示

添加webapp文件夾，結構如下

添加簡單的一個jsp文件，代碼如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>WebScoket廣播通信</title>
    <script src="/sockjs.min.js"></script>
    <script src="/stomp.min.js"></script>
    <script src="/jquery.min.js"></script>
</head>
<body onload="disconnect()">
    <button id="connect" onclick="connect()">連接</button>
    <button id="disconnect" onclick="disconnect()" disabled="disabled">斷開</button><br/>
    <div id="inputDiv">
        輸入消息內容：<input type="text" id="message"/><br/>
        <button id="send" onclick="send()">發送</button><br/>
        <p id="response"></p>
    </div>
    <script>
        var stompClient = null;
        //設置連接狀態控制顯示隱藏
        function setConnected(connected)
        {
            $("#connect").attr("disabled",connected);
            $("#disconnect").attr("disabled",!connected);
            if(!connected) {
                $("#inputDiv").hide();
            }else{
                $("#inputDiv").show();
            }
            $("#reponse").html("");
        }
        //連接
        function connect()
        {
            var socket = new SockJS("/servicekey");
            stompClient = Stomp.over(socket);
            stompClient.connect({},function (frame) {
                setConnected(true);
                stompClient.subscribe("/topic/getMessage",function (response) {
                    showResponse(JSON.parse(response.body).responseMessage);
                })
            })
        }
        //斷開連接
        function disconnect(){
            if(stompClient!=null)
            {
                stompClient.disconnect();
            }
            setConnected(false);
        }
        //發送名稱到後臺
        function send(){
            var message = $("#message").val();
            stompClient.send("/welcome",{},JSON.stringify({'mymessage':message}));
        }
        //顯示socket返回消息內容
        function showResponse(message)
        {
            $("#response").html(message);
        }
    </script>
</body>
</html>

在創建一個映射文件，將我們的額index.jsp映射出去，代碼如下

package org.websocket.demo;

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


@Configuration
public class WebConfig implements WebMvcConfigurer
{
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("/index");
    }
}

這樣的話我們一個簡單的WebSocket廣播通信就完成了，我們來試一下，啓動項目，輸入http://127.0.0.1:8080/index