《Web应用项目开发》_web应用开发项目-优快云博客

Spring Boot 对 WebSocket 提供了非常友好的支持，可以方便开发者在项目中快速集成WebSocket 功能，实现单聊或者群聊。

前言

Web应用项目开发基础建设是一个涉及多个方面的复杂过程，它包括了从项目规划到部署的各个阶段

一、消息群发

1.创建项目

首先创建一个 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>10
<artifactId>sockjs-client</artifactId>
<version>l.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>

spring-boot-starter-websocket依赖是 Web Socket相关依赖，其他的都是前端库，使用jar包的形式对这些前端库进行统一管理，使用webjar添加到项目中的前端库，在Spring Boot 项目中已经默认添加了静态资源过滤，因此可以直接使用。

2.配置 WebSocket

Spring框架提供了基于 WebSocket的STOMP 支持，STOMP 是一个简单的可互操作的协议,通常被用于通过中间服务器在客户端之间进行异步消息传递。WebSocket配置如下:

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

代码解释:

自定义类 WebSocketConfig继承自WebSocketMessageBrokerConfigurer 进行 WebSocket 配置,然后通过@EnableWebSocketMessageBroker 注解开启 WebSocket 消息代理。
config.enableSimpleBroker("/topic")表示设置消息代理的前缀，即如果消息的前缀是“/topic”就会将消息转发给消息代理(broker)，再由消息代理将消息广播给当前连接的客户端。
config.setApplicationDestinationPrefixes("/app")表示配置一个或多个前缀，通过这些前缀过滤出需要被注解方法处理的消息。例如,前缀为“/app”的 destination 可以通@MessageMapping注解的方法处理，而其他 destination(例如“/topic”“/queue”)将被直接交给 broker 处理。
registry.addEndpoint("/chat").withSockJS()则表示定义一个前缀为“/chat”的endPoint，并开启sockis 支持，sockjs 可以解决浏览器对 WebSocket 的兼容性问题，客户端将通过这里配置的URL 来建立 WebSocket 连接。

3.定义 Controller

定义一个 Controller 用来实现对消息的处理，代码如下：

@Controller
public class GreetingController {
    @MessageMapping("/hello" )
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }
}
public class Message {
    private String name;
    private String content;
    //省略getter/setter
}

根据第2步的配置，@MessageMapping("ello")注解的方法将用来接收“/app/hello”路径发送来的消息，在注解方法中对消息进行处理后，再将消息转发到@SendTo 定义的路径上,而@SendTo路径是一个前缀为“/topic”的路径，因此该消息将被交给消息代理broker，再由broker 进行广播。

4.构建聊天页面

在resources/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="name">请输入聊天内容:</label>
<input type="text" id="content" placeholder="聊天内容">
</div>
<button id="send" type="button">发送</button>
<div id="qreetings">
<div id="conversation" style="display: none">群聊进行中...</div>
</div>
</div>
</body>
</html>

注意，第6~8行是引入外部的JS库，这些JS库在 pom.xml文件中通过依赖加入进来。app.js是一个自定义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") .va1())));
}
function showGreeting(message) {
    $("#greetings")
        .append("<div>" + message.name+" :"+message.content + "</div>");
}
$(function() {
    $("#connect")click(function(){ connect();});
    $("#disconnect").click(function(){ disconnect();));
    $("#send"),click(function(){ sendName(); });
});

代码解释:

connect方法表示建立一个 WebSocket 连接,在建立 WebSocket连接时,用户必须先输入用户名，然后才能建立连接。
第 19~26 行首先使用 SockJS 建立连接，然后创建一个 STOMP 实例发起连接请求，在连接成功的回调方法中，首先调用 setConnected(true);方法进行页面的设置，然后调用 STOMP 中的subscribe 方法订阅服务端发送回来的消息，并将服务端发送来的消息展示出来(使用showGreeting方法)。
调用 STOMP 中的 disconnect方法可以断开一个 WebSocket 连接。