ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 使用WebSocket构建交互式Web应用程序 本指南将引导您完成创建“ Hello,world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消息。 WebSocket是TCP之上的薄而轻的层。 这使其适合使用“子协议”来嵌入消息。 在本指南中,我们将 [STOMP](https://en.wikipedia.org/wiki/Streaming_Text_Oriented_Messaging_Protocol) 消息与Spring结合使用来创建一个交互式Web应用程序。 STOMP是在较低级别的WebSocket之上运行的子协议。 ## 你会建立什么 您将构建一个服务器,该服务器接受带有用户名的消息。 作为响应,服务器会将问候语推送到客户端已订阅的队列中。 ## 你需要什么 * 约15分钟 * 最喜欢的文本编辑器或IDE * [JDK 1.8](http://www.oracle.com/technetwork/java/javase/downloads/index.html) 或更高版本 * [Gradle 4+](http://www.gradle.org/downloads) 或 [Maven 3.2+](https://maven.apache.org/download.cgi) * 您还可以将代码直接导入到IDE中: * [弹簧工具套件(STS)](https://spring.io/guides/gs/sts) * [IntelliJ IDEA](https://spring.io/guides/gs/intellij-idea/) ## 如何完成本指南 像大多数Spring 一样 [入门指南](https://spring.io/guides) ,您可以从头开始并完成每个步骤,也可以绕过您已经熟悉的基本设置步骤。 无论哪种方式,您最终都可以使用代码。 要 **从头开始** ,请继续进行“ [从Spring Initializr开始”](https://spring.io/guides/gs/messaging-stomp-websocket/#scratch) 。 要 **跳过基础知识** ,请执行以下操作: * [下载](https://github.com/spring-guides/gs-messaging-stomp-websocket/archive/master.zip) 并解压缩本指南的源存储库,或使用 对其进行克隆 [Git](https://spring.io/understanding/Git) : `git clone [https://github.com/spring-guides/gs-messaging-stomp-websocket.git](https://github.com/spring-guides/gs-messaging-stomp-websocket.git)` * 光盘进入 `gs-messaging-stomp-websocket/initial` * 继续 [创建资源表示形式类](https://spring.io/guides/gs/messaging-stomp-websocket/#initial) 。 **完成后** ,您可以根据中的代码检查结果 `gs-messaging-stomp-websocket/complete`. ## 从Spring Initializr开始 如果您使用Maven,请访问 [Spring Initializr](https://start.spring.io/#!type=maven-project&language=java&platformVersion=2.4.3.RELEASE&packaging=jar&jvmVersion=1.8&groupId=com.example&artifactId=messaging-stomp-websocket&name=messaging-stomp-websocket&description=Demo%20project%20for%20Spring%20Boot&packageName=com.example.messaging-stomp-websocket&dependencies=websocket) 以生成具有所需依赖项的新项目(Websocket)。 以下清单显示了 `pom.xml` 选择Maven时创建的文件: ~~~ <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.4.3</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>messaging-stomp-websocket</artifactId> <version>0.0.1-SNAPSHOT</version> <name>messaging-stomp-websocket</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> ~~~ 如果您使用Gradle,请访问 [Spring Initializr](https://start.spring.io/#!type=gradle-project&language=java&platformVersion=2.4.3.RELEASE&packaging=jar&jvmVersion=1.8&groupId=com.example&artifactId=messaging-stomp-websocket&name=messaging-stomp-websocket&description=Demo%20project%20for%20Spring%20Boot&packageName=com.example.messaging-stomp-websocket&dependencies=websocket) 以生成具有所需依赖项的新项目(Websocket)。 以下清单显示了 `build.gradle` 选择Gradle时创建的文件: ~~~ plugins { id 'org.springframework.boot' version '2.4.3' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' } group = 'com.example' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-websocket' testImplementation 'org.springframework.boot:spring-boot-starter-test' } test { useJUnitPlatform() } ~~~ ### 手动初始化(可选) 如果要手动初始化项目而不是使用前面显示的链接,请按照以下步骤操作: 1. 导航到 [https://start.spring.io](https://start.spring.io) 。 该服务提取应用程序所需的所有依赖关系,并为您完成大部分设置。 2. 选择Gradle或Maven以及您要使用的语言。 本指南假定您选择了Java。 3. 单击“ **依赖关系”,** 然后选择“ **Websocket”** 。 4. 点击 **生成** 。 5. 下载生成的ZIP文件,该文件是使用您的选择配置的Web应用程序的存档。 如果您的IDE集成了Spring Initializr,则可以从IDE中完成此过程。 ## 添加依赖项 在这种情况下,Spring Initializr不会提供您所需的一切。 对于Maven,您需要添加以下依赖项: ~~~ <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.0.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.1.1-1</version> </dependency> ~~~ 以下清单显示了成品 `pom.xml` 文件: ~~~ <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.4.3</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>messaging-stomp-websocket</artifactId> <version>0.0.1-SNAPSHOT</version> <name>messaging-stomp-websocket</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <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.0.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.1.1-1</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> ~~~ 如果使用Gradle,则需要添加以下依赖项: ~~~ implementation 'org.webjars:webjars-locator-core' implementation 'org.webjars:sockjs-client:1.0.2' implementation 'org.webjars:stomp-websocket:2.3.3' implementation 'org.webjars:bootstrap:3.3.7' implementation 'org.webjars:jquery:3.1.1-1' ~~~ 以下清单显示了成品 `build.gradle` 文件: ~~~ plugins { id 'org.springframework.boot' version '2.4.3' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' } group = 'com.example' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.webjars:webjars-locator-core' implementation 'org.webjars:sockjs-client:1.0.2' implementation 'org.webjars:stomp-websocket:2.3.3' implementation 'org.webjars:bootstrap:3.3.7' implementation 'org.webjars:jquery:3.1.1-1' testImplementation 'org.springframework.boot:spring-boot-starter-test' } test { useJUnitPlatform() } ~~~ ## 创建资源表示形式类 现在,您已经设置了项目和构建系统,您可以创建STOMP消息服务。 通过考虑服务交互来开始该过程。 该服务将接受正文为JSON对象的STOMP消息中包含名称的消息。 如果名字是 `Fred`,该消息可能类似于以下内容: ~~~ { "name": "Fred" } ~~~ 要对带有名称的消息进行建模,可以创建一个普通的旧Java对象,其中包含一个 `name` 属性和相应的 `getName()` 方法,如下清单(来自 `src/main/java/com/example/messagingstompwebsocket/HelloMessage.java`)显示: ~~~ package com.example.messagingstompwebsocket; public class HelloMessage { private String name; public HelloMessage() { } public HelloMessage(String name) { this.name = name; } public String getName() { return name; } public void setName(String name) { this.name = name; } } ~~~ 收到消息并提取名称后,服务将通过创建问候语并将该问候语发布到客户端已订阅的单独队列上来对其进行处理。 问候语也将是一个JSON对象,如以下清单所示: ~~~ { "content": "Hello, Fred!" } ~~~ 要对问候表示进行建模,请添加另一个普通的旧Java对象,其中包含 `content` 属性和相应的 `getContent()` 方法,如下清单(来自 `src/main/java/com/example/messagingstompwebsocket/Greeting.java`)显示: ~~~ package com.example.messagingstompwebsocket; public class Greeting { private String content; public Greeting() { } public Greeting(String content) { this.content = content; } public String getContent() { return content; } } ~~~ Spring将使用 [Jackson JSON](https://wiki.fasterxml.com/JacksonHome) 库自动封送类型的实例 `Greeting` 转换成JSON。 接下来,您将创建一个控制器来接收问候消息并发送问候消息。 ## 创建一个消息处理控制器 在Spring使用STOMP消息传递的方法中,可以将STOMP消息路由到 [`@Controller`](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/stereotype/Controller.html)类。 例如, `GreetingController` (从 `src/main/java/com/example/messagingstompwebsocket/GreetingController.java`)被映射为处理到 `/hello` 目的地,如以下清单所示: ~~~ package com.example.messagingstompwebsocket; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.SendTo; import org.springframework.stereotype.Controller; import org.springframework.web.util.HtmlUtils; @Controller public class GreetingController { @MessageMapping("/hello") @SendTo("/topic/greetings") public Greeting greeting(HelloMessage message) throws Exception { Thread.sleep(1000); // simulated delay return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!"); } } ~~~ 该控制器简洁明了,但仍在继续。 我们将其逐步分解。 这 [`@MessageMapping`](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/messaging/handler/annotation/MessageMapping.html) 注释可确保,如果有消息发送到 `/hello` 目的地, `greeting()` 方法被调用。 消息的有效负载绑定到 `HelloMessage` 对象,该对象被传递到 `greeting()`. 在内部,该方法的实现通过使线程休眠一秒钟来模拟处理延迟。 这表明客户端发送消息后,服务器可以花费其异步处理消息所需的时间。 客户可以继续进行所需的任何工作,而无需等待响应。 一秒钟的延迟后, `greeting()` 方法创建一个 `Greeting`对象并返回它。 返回值将广播给 `/topic/greetings`,如 [`@SendTo`](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/messaging/handler/annotation/SendTo.html)注解。 请注意,输入消息中的名称已被清除,因为在这种情况下,它将在客户端的浏览器DOM中回显并重新呈现。 ## 为STOMP消息传递配置Spring 现在已经创建了服务的基本组件,您可以配置Spring以启用WebSocket和STOMP消息传递。 创建一个名为的Java类 `WebSocketConfig` 类似于以下清单(来自 `src/main/java/com/example/messagingstompwebsocket/WebSocketConfig.java`): ~~~ package com.example.messagingstompwebsocket; 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 WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/gs-guide-websocket").withSockJS(); } } ~~~ `WebSocketConfig` 带有注释 `@Configuration`表示它是Spring配置类。 它也带有注释 [`@EnableWebSocketMessageBroker`](https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/messaging/simp/config/EnableWebSocketMessageBroker.html)。 顾名思义, `@EnableWebSocketMessageBroker` 启用由消息代理支持的WebSocket消息处理。 这 `configureMessageBroker()` 方法在中实现默认方法 `WebSocketMessageBrokerConfigurer`配置消息代理。 它首先通过调用 `enableSimpleBroker()` 使基于内存的简单消息代理能够将问候消息以前缀为前缀的目的地携带回客户端 `/topic`。 它还指定了 `/app` 消息的前缀,该消息绑定到带有方法注释的方法 `@MessageMapping`。 此前缀将用于定义所有消息映射。 例如, `/app/hello` 是端点 `GreetingController.greeting()` 方法被映射为句柄。 这 `registerStompEndpoints()` 方法注册 `/gs-guide-websocket`端点,启用SockJS后备选项,以便在WebSocket不可用时可以使用备用传输。 SockJS客户端将尝试连接到 `/gs-guide-websocket`并使用最佳的传输方式(websocket,xhr-streaming,xhr-polling等)。 ## 创建浏览器客户端 在服务器端组件就绪后,您可以将注意力转移到JavaScript客户端上,该客户端将向服务器端发送消息并从服务器端接收消息。 创建一个 `index.html` 类似于以下清单的文件(来自 `src/main/resources/static/index.html`): ~~~ <!DOCTYPE html> <html> <head> <title>Hello WebSocket</title> <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/main.css" rel="stylesheet"> <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> <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable Javascript and reload this page!</h2></noscript> <div id="main-content" class="container"> <div class="row"> <div class="col-md-6"> <form class="form-inline"> <div class="form-group"> <label for="connect">WebSocket connection:</label> <button id="connect" class="btn btn-default" type="submit">Connect</button> <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect </button> </div> </form> </div> <div class="col-md-6"> <form class="form-inline"> <div class="form-group"> <label for="name">What is your name?</label> <input type="text" id="name" class="form-control" placeholder="Your name here..."> </div> <button id="send" class="btn btn-default" type="submit">Send</button> </form> </div> </div> <div class="row"> <div class="col-md-12"> <table id="conversation" class="table table-striped"> <thead> <tr> <th>Greetings</th> </tr> </thead> <tbody id="greetings"> </tbody> </table> </div> </div> </div> </body> </html> ~~~ 这个HTML档案会汇入 `SockJS` 和 `STOMP`javascript库,这些库将用于通过websocket通过STOMP与我们的服务器进行通信。 我们也进口 `app.js`,其中包含我们客户应用程序的逻辑。 以下清单(来自 `src/main/resources/static/app.js`)显示该文件: ~~~ var stompClient = null; function setConnected(connected) { $("#connect").prop("disabled", connected); $("#disconnect").prop("disabled", !connected); if (connected) { $("#conversation").show(); } else { $("#conversation").hide(); } $("#greetings").html(""); } function connect() { var socket = new SockJS('/gs-guide-websocket'); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { setConnected(true); console.log('Connected: ' + frame); stompClient.subscribe('/topic/greetings', function (greeting) { showGreeting(JSON.parse(greeting.body).content); }); }); } function disconnect() { if (stompClient !== null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()})); } function showGreeting(message) { $("#greetings").append("<tr><td>" + message + "</td></tr>"); } $(function () { $("form").on('submit', function (e) { e.preventDefault(); }); $( "#connect" ).click(function() { connect(); }); $( "#disconnect" ).click(function() { disconnect(); }); $( "#send" ).click(function() { sendName(); }); }); ~~~ 该JavaScript文件的主要内容是 `connect()` 和 `sendName()` 功能。 这 `connect()`函数使用 [SockJS](https://github.com/sockjs) 和 [stomp.js](http://jmesnil.net/stomp-websocket/doc/) 打开与 `/gs-guide-websocket`,这是我们的SockJS服务器等待连接的地方。 连接成功后,客户端将订阅 `/topic/greetings`服务器将在其中发布问候消息的目的地。 在该目的地上收到问候语时,它将在DOM后面添加一个段落元素以显示问候语消息。 这 `sendName()` 函数检索用户输入的名称,并使用STOMP客户端将其发送到 `/app/hello` 目的地(哪里 `GreetingController.greeting()` 将会收到)。 这 `main.css` 可以根据需要将其省略,也可以创建一个空的,这样 `<link>` 可以解决。 ## 使应用程序可执行 Spring Boot为您创建一个应用程序类。 在这种情况下,无需进一步修改。 您可以使用它来运行该应用程序。 以下清单(来自 `src/main/java/com/example/messagingstompwebsocket/MessagingStompWebsocketApplication.java`)显示了应用程序类: ~~~ package com.example.messagingstompwebsocket; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class MessagingStompWebsocketApplication { public static void main(String[] args) { SpringApplication.run(MessagingStompWebsocketApplication.class, args); } } ~~~ `@SpringBootApplication` 是一个方便注释,它添加了以下所有内容: * `@Configuration`:将类标记为应用程序上下文的Bean定义的源。 * `@EnableAutoConfiguration`:告诉Spring Boot根据类路径设置,其他bean和各种属性设置开始添加bean。 例如,如果 `spring-webmvc` 在类路径上,此注释将应用程序标记为Web应用程序并激活关键行为,例如设置 `DispatcherServlet`. * `@ComponentScan`:告诉Spring在服务器中寻找其他组件,配置和服务 `com/example` 包,让它找到控制器。 这 `main()` 方法使用Spring Boot的 `SpringApplication.run()`启动应用程序的方法。 您是否注意到没有一行XML? 没有 `web.xml`文件。 该Web应用程序是100%纯Java,因此您无需处理任何管道或基础结构。 ### 建立可执行的JAR 您可以使用Gradle或Maven从命令行运行该应用程序。 您还可以构建一个包含所有必需的依赖项,类和资源的可执行JAR文件,然后运行该文件。 生成可执行jar使得在整个开发生命周期中,跨不同环境等等的情况下,都可以轻松地将服务作为应用程序进行发布,版本控制和部署。 如果您使用Gradle,则可以通过使用以下命令运行该应用程序 `./gradlew bootRun`。 或者,您可以通过使用以下命令构建JAR文件: `./gradlew build` 然后运行JAR文件,如下所示: ~~~ java -jar build/libs/gs-messaging-stomp-websocket-0.1.0.jar ~~~ 如果您使用Maven,则可以通过使用以下命令运行该应用程序 `./mvnw spring-boot:run`。 或者,您可以使用以下命令构建JAR文件: `./mvnw clean package` 然后运行JAR文件,如下所示: ~~~ java -jar target/gs-messaging-stomp-websocket-0.1.0.jar ~~~ 此处描述的步骤将创建可运行的JAR。 您还可以 构建经典的WAR文件 。 显示日志记录输出。 该服务应在几秒钟内启动并运行。 ## 测试服务 现在该服务正在运行,将浏览器指向 [http:// localhost:8080](http://localhost:8080) 并单击“ **连接”** 按钮。 打开连接后,系统会要求您输入名称。 输入您的姓名,然后单击 **发送** 。 您的姓名将通过STOMP作为JSON消息发送到服务器。 经过一秒钟的模拟延迟后,服务器将向页面发送回带有“ Hello”问候的消息,该问候显示在页面上。 此时,您可以发送其他名称,也可以单击“ **断开连接”** 按钮以关闭连接。 ## 概括 恭喜你! 您刚刚使用Spring开发了基于STOMP的消息传递服务。