spring boot(学习笔记第十五课)

news2024/9/9 5:36:45

spring boot(学习笔记第十五课)

Spring boot的websocket(广播)

学习内容：

Spring boot的websocket（广播）

1. Spring boot的websocket（广播）

回顾下web server的进化
- 1. 第一代Web程序，使用整体页面刷新技术，对整个页面进行刷新。
    缺点：明明不需要的页面部分，也要全部刷新，对于网络带宽占用较大，而且效率很低。
- 1. 第二代Web程序，使用ajax刷新技术，对页面进行局部刷新。
    优点：仅仅需要刷新页面的部分，向服务器发出请求，并将应答数据进行web页面局部刷新。
    缺点：只能浏览器主动pull到web server。不能实时realtime检测到web server的数据变化。
- 1. 第二代Web程序，使用ajax刷新技术，对web server进行长轮训long polling。
- 1. 第三代Web程序，使用web socket刷新技术，让web client和web server进行实时数据交互。

开始练习spring boot上的web socket

向spring boot添加必要的依赖（服务器端配置）

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>

进行endPoint，messageBroker以及destinationPrefixes初始化配置（服务器端配置）

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) {
        messageBrokerRegistry.enableSimpleBroker("/topic");
        messageBrokerRegistry.setApplicationDestinationPrefixes("/app");
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry){
        stompEndpointRegistry.addEndpoint("/chat").withSockJS();
    }
}

addEndPoint
web socket的server和client交互的端点。
setApplicationDestinationPrefixes
web socket client向web server发起请求的url
enableSimpleBroker
web server向web socket client发起请求的messageBroker

配置controller（服务器端配置）

@Controller
public class WebSocketController {
    @MessageMapping("hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

Message message是从web socket client传递来的参数
@SendTo("/topic/greetings")是利用topic这个messageBroker讲消息在转发到web socket client

配置客户端静态页面/static/chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<div>
    <label for="name">请输入用户名:</label>
    <input type="text" id="name" placeholder="用户名">
</div>
<div>
    <button id="connect" type="button">连接</button>
    <button id="disconnect" type="button" disabled="disabled">断开</button>
</div>
<div id="chat" style="display:none;">
    <div>
        <label for="content">请输入聊天内容:</label>
        <input type="text" id="content" placeholder="聊天内容">
    </div>
    <button id="send" type="button">发送</button>
    <div id="greetings">
        <div id="conversation" style="display:none">群聊进行中</div>
    </div>
</div>
</body>
</html>

配置客户端的javascript /static/app.js

与web socket的连接处理

function connect(){
    if(!$("#name").val()){
        return;
    }
    var socket = new SockJS('/chat'); //连接endPoint
    stompClient = Stomp.over(socket);
    stompClient.connect({},function (frame){
        setConnected(true); //渲染控件
        stompClient.subscribe('/topic/greetings',function(greeting){ //注册web server报文接收的callback
            showGreeting(JSON.parse(greeting.body));
        });
    });
}

点击发送的处理函数

function sendName(){
    stompClient.send("/app/hello",{},
    JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}));
}

页面的初始化函数

$(function(){
    $("#connect").click(function(){connect();});
    $("#discontent").click(function(){disconnect()});
    $("#send").click(function(){sendName()});
});

/static/app.js的全体

var stompClient = null;
function setConnected(connected){
    $("#connect").prop("disabled",connected);
    $("#disconnect").prop("disabled",!connected);
    if(connected){
        $("#conversation").show();
        $("#chat").show();
    }else{
        $("#conversation").hide();
        $("#chat").hide();
    }
    $("#greetings").html("");
}
function connect(){
    if(!$("#name").val()){
        return;
    }
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket);
    stompClient.connect({},function (frame){
        setConnected(true);
        stompClient.subscribe('/topic/greetings',function(greeting){
            showGreeting(JSON.parse(greeting.body));
        });
    });
}
function disconnect(){
    if(stompClient != null){
        stompClient.disconnect();
    }
    setConnected(false);
}
function sendName(){
    stompClient.send("/app/hello",{},
    JSON.stringify({'name':$("#name").val(),'content':$("#content").val()}));
}
function showGreeting(message){
    $("#greetings").append("<div>" + message.name +
    ":" + message.content + "</div>");
}
$(function(){
    $("#connect").click(function(){connect();});
    $("#discontent").click(function(){disconnect()});
    $("#send").click(function(){sendName()});
});