springboot3搭建WebSocket服务

springboot3搭建WebSocket服务

文章目录

• springboot3搭建WebSocket服务
• 前言
• 一、创建SpringBoot工程
• 二、pom.xml中引入依赖
• • 1.引入库
  • [2. application.yml配置](#2. application.yml配置)
• 三、主启动类
• 四、WebSocket配置类
• 五、编写WebSocket服务类
• 六、编写测试页面
• 总结

---

前言

本文详细介绍了如何在SpringBoot项目中搭建WebSocket服务，包括创建工程、添加依赖、配置文件、主启动类和WebSocket相关类的实现，以及编写测试页面以验证功能。

一、创建SpringBoot工程

在Intellij IDEA工具中使用SpringBoot项目初始化向导新建一个工程。

二、pom.xml中引入依赖

1.引入库

代码如下（示例）：

<?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>

    <groupId>com.yuhao</groupId>
    <artifactId>websocket</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>websocket</name>
    <description>websocket</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <spring.boot.version>3.3.1</spring.boot.version>
        <fastjson.version>1.2.83</fastjson.version>
        <java.version>17</java.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring.boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>

        <!--websocket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>3.2.0</version>
        </dependency>

        <!-- 统一 fastjson 版本 解决alibaba组件序列化漏洞问题 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</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>

2. application.yml配置

代码如下（示例）：

server:
  port: 2001
  max-http-header-size: 8192
spring:
  thymeleaf:
    cache: false

该处使用的url网络请求的数据。

---

三、主启动类

package com.yuhao.websocket;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
import org.springframework.web.socket.config.annotation.EnableWebSocket;

@SpringBootApplication
@EnableWebSocket
@ServletComponentScan
public class WebsocketApplication {

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

}

四、WebSocket配置类

package com.yuhao.websocket.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    /**
     * 注入ServerEndpointExporter，
     * 这个bean会自动注册使用了@ServerEndpoint注解声明的WebSocket Endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

五、编写WebSocket服务类

package com.yuhao.websocket.ws;


import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import lombok.EqualsAndHashCode;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;


@ServerEndpoint("/ws/automate")
@Component
@Slf4j
@EqualsAndHashCode
public class WebSocketServer {
    private static int onLineCount = 0;//记录在线连接数，应该做成线程安全的

    //线程安全set,用来存储每个客户的WebSocketServer对象
    private static CopyOnWriteArraySet<WebSocketServer> webSocketServers = new CopyOnWriteArraySet<>();

    //与某个客户端的连接会话，需要通过它来给客户发送数据
    private Session session;

    /**
     * <p>
     * Description: 连接建立成功后调用的方法<br>
     * <p>
     * Datetime: 2020/5/28 22:25
     * </p>
     *
     * @return
     * @since 2020/5/28 22:25
     */
    @OnOpen
    public void onOpen(Session session) {
        System.out.println("连接了哦");
        this.session = session;
        webSocketServers.add(this);
        addOnlineCount();
        System.out.println();
    }

    /**
     * <p>
     * Description: 关闭会话连接<br>
     * <p>
     * Datetime: 2020/5/28 22:39
     * </p>
     *
     * @param
     * @param
     * @return
     * @since 2020/5/28 22:39
     */
    @OnClose
    public void onClose(Session session) {
        webSocketServers.remove(this);
        subOnlineCount();
    }


    /**
     * <p>
     * Description: 发送消息<br>
     * <p>
     * Datetime: 2020/5/28 22:39
     * </p>
     * @since 2020/5/28 22:39
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息：" + message);
        for (WebSocketServer socket : webSocketServers) {
            try {
                socket.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }


    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("发送消息失败");
        error.printStackTrace();
    }

    public static synchronized void addOnlineCount() {
        WebSocketServer.onLineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketServer.onLineCount--;
    }

    public static synchronized int getOnLineCount() {
        return onLineCount;
    }

}

六、编写测试页面

创建index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
Welcome to WebSocket demo<br>
请输入消息：<input type="texarea" id="msg">
<button onclick="send()">发送消息</button>
<hr>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr>

<div id="message"></div>
</body>
</html>
<script>
    let webSocket = null;
    if ('WebSocket' in window) {
        webSocket = new WebSocket('ws://localhost:2001/ws/automate')
    } else {
        alert("当前浏览器不支持WebSocket协议");
    }
    //连接出错时的回调
    webSocket.onerror = () => {
        setMessageInnerHTML("WebSocket连接失败");
    }
    //连接成功建立的回调
    webSocket.onopen = () => {
        setMessageInnerHTML("WebSocket连接成功");
    }
    //接收到消息的回调方法
    webSocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //监听窗口关闭事件
    window.onbeforeunload = () => {
        closeWebSocket();
    }

    //关闭WebSocket连接
    closeWebSocket = () => {
        webSocket.close();
    }

    const send = () => {
        let message = document.getElementById("msg").value;
        webSocket.send(message);
    }

    function setMessageInnerHTML(innerHTML) {
        document.getElementById("message").innerHTML += innerHTML + '<br>';
    }
</script>

启动SpringBoot应用后,浏览器中输入地址进行测试：http://localhost:2001

总结

WebSocket 是一种在客户端和服务器之间实现双向通信的协议。它的应用场景和作用如下：

1. 即时聊天应用：WebSocket 可以实现实时的双向通信，适用于即时聊天应用，如在线聊天室、社交媒体平台的聊天功能等。
2. 实时数据更新：WebSocket可以在服务器端有新数据时，自动将更新推送到客户端，适用于实时数据展示应用，如股票行情展示、实时监控系统等。
3. 多人协作应用：WebSocket 可以方便地在多个用户之间实现实时协作，适用于多人在线编辑应用，如实时协作文档编辑、多人游戏等。
4. 通知和提醒功能：WebSocket 可以用于发送通知和提醒给客户端，适用于实时消息提醒功能，如邮件通知、订单状态更新等。
5. 实时地理定位：WebSocket 可以实时地将客户端的地理位置信息发送到服务器，适用于位置共享应用，如实时地图导航、出租车服务等。

总的来说，WebSocket 的作用是实现客户端和服务器之间的双向通信，可以实时地传递数据和消息，适用于需要实时交互和通信的应用场景。它相对于传统的 HTTP 请求-响应模式，具有更低的延迟和更高的效率。