SpringBoot整合WebSocket

最新推荐文章于 2024-05-23 10:50:00 发布

quest101

最新推荐文章于 2024-05-23 10:50:00 发布

阅读量239

点赞数

分类专栏： SpringBoot 文章标签： websocket

本文链接：https://blog.csdn.net/quest101/article/details/118446629

版权

SpringBoot 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

概述

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

WebSocket和HTTP一样，都是一种网络通信协议。比起HTTP只能由客户端发起通信，WebSocket支持双向通信，即客户端可以主动向服务器发送信息，服务器同样可以主动向客户端推送信息。

STOMP（面向流文本的消息传递协议）是 WebSocket 之上的一个子协议。

项目依赖

JDK 1.8 or later
SpringBoot 2.4.3

整合WebSocket

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.kang</groupId>
    <artifactId>SpringBoot-WebSocket</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringBoot-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>

创建一个表示的资源类

服务将接收一个 STOMP 消息的名字，消息体是一个 JSON 对象，它的名字是 Fred。

{
    "name": "Fred"
}

创建包含名字的属性对象

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!"
}

创建一个包含内容的对象

public class Greeting {

  private String content;

  public Greeting() {
  }

  public Greeting(String content) {
    this.content = content;
  }

  public String getContent() {
    return content;
  }

}

创建一个 controller 接收 hello 消息和发送一个 greeting 消息。

创建一个处理消息的 Controller

@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 确保如果一个消息发送到 /hello 目的， greeting () 方法将执行。

在客户端发送消息后，服务器可以根据需要对消息进行异步处理。客户端发送消息是异步的，无需等待响应。

该方法 greeting () 创建一个Greeting对象并返回它。返回值将广播给所有的订阅者 /topic/greetings，如 @SendTo 注释中所指定。它将被回显并在客户端的浏览器 DOM 中重新呈现。

配置 Spring 的STOMP 消息

配置 Spring 启用 WebSocket 和 STOMP 消息传递。

@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();
  }

}

@Configuration 它是一个 Spring 配置类。

@EnableWebSocketMessageBroker 启动 WebSocket 消息处理，通过一个 broker 返回消息。

该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 等）。

创建浏览客户端

该客户端将向服务器端发送消息并从服务器端接收消息。

创建 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 and STOMP 包，它将通过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);
        });
    });
}

该connect()函数使用SockJS和stomp.js 连接到/gs-guide-websocket 。成功连接后，客户端订阅/topic/greetings目标，服务器将在其中发布问候消息。当该目的地收到问候语时，它会将一个段落元素附加到 DOM 以显示问候语消息。

该sendName()函数检索用户输入的名称，并使用 STOMP 客户端将其发送到/app/hello目的地（GreetingController.greeting()将在何处接收）。

应用程序执行

运行应用程序

@SpringBootApplication
public class WebSocketApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
    }
}

测试服务

启动服务，打开两个浏览器访问 http://localhost:8080 并单击Connect按钮。

两个文本框输入 Jack、Tom 发送，订阅了/topic/greetings 将收到消息，并在页面上展示。

在这里插入图片描述

參考

https://socket.io/

https://spring.io/guides/gs/messaging-stomp-websocket/

quest101

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
SpringBoot整合WebSocket

概述HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。WebSocket和HTTP一样，都是一种网络通信协议。比起HTTP只能由客户端发起通信，WebSocket支持双向通信，即客户端可以主动向服务器发送信息，服务器同样可以主动向客户端推送信息。STOMP（面向流文本的消息传递协议）是 WebSocket 之上的一个子协议。项目依赖JDK 1.8 or laterSpringBoot 2.4.3整合We
复制链接

扫一扫