基于HTML5页面Spring Boot配置的WebSocket_springboot h5页面配置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29451823/article/details/80430392

本文介绍了如何在Spring Boot项目中配置WebSocket，适用于通过jar包运行的场景。内容包括在pom.xml添加依赖，设置项目目录结构，创建WebSocketConfig和WebSocketServer类，以及加载静态资源如HTML、CSS和JS，最后展示了一个WebSocket.html的示例和实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该方式只适用于通过 jar 包直接运行项目的情况。
1.**添加依赖**pom.xml文件

<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 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>online.shixun.com</groupId>
  <artifactId>spring_Boot_DateSecond</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>spring_Boot_DateSecond Maven Webapp</name>
  <url>http://maven.apache.org</url>

    <!-- 定义公共资源版本 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.6.RELEASE</version>
        <relativePath />
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>

        <!-- 上边引入 parent，因此 下边无需指定版本 -->
        <!-- 包含 mvc,aop 等jar资源 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>true</scope>
        </dependency>
        <!-- freemarker代替JSP -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <!-- Thymeleaf 依赖 -->
        <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- 整合 Fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.35</version>
        </dependency>
        <!-- AOP依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <!-- 文件上传下载工具 -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <!-- WebSocket依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- 日志 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j2</artifactId>
        </dependency>
    </dependencies>

    <build>
        <finalName>spring_Boot_DateSecond</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <!-- 没有该配置，devtools 不生效 -->
                    <fork>true</fork>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

项目目录结构
SpringBoot 入口

package com.light.springboot;

    import java.util.EnumSet;

    import javax.servlet.DispatcherType;
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;

    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.web.servlet.ServletContextInitializer;


    /**
     * 
     * @author Administrator
     *改注解指定springboot项目，自动装备web依赖环境，由此类当作程序入口
     */
    @SpringBootApplication
    public class SpringbootApplication{

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

WebSocketConfig.java

 package com.light.springboot.webSocket;

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

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer.java

 package com.light.springboot.webSocketServer;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Component;

@ServerEndpoint(value = "/webSocketServer/{userName}")
@Component
public class WebSocketServer {

    private static final Set<WebSocketServer> connections = new CopyOnWriteArraySet<>();
    private String nickname;
    private Session session;

    private static String getDatetime(Date date) {
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        return format.format(date);
    }

    @OnOpen
    public void start(@PathParam("userName") String userName,Session session) {
        this.nickname = userName;
        this.session = session;
        connections.add(this);
        String message = String.format("* %s %s", nickname , "加入聊天!");
        broadcast(message);
    }

    @OnClose
    public void end() {
        connections.remove(this);
        String message = String.format("* %s %s", nickname,"退出聊天！");
        broadcast(message);

    }

    @OnMessage
    public void pushMsg(String message) {
        broadcast("[" + this.nickname + "]" +getDatetime(new Date()) + " : " + message);
    }

    public void onError(Throwable t) throws Throwable {

    }
    private void broadcast(String msg) {
        //广播形式发送消息
        for(WebSocketServer client : connections) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendText(msg);
                }
            } catch (IOException e) {
                connections.remove(client);
                try {
                    client.session.close();
                } catch (IOException e1) {
                    e.printStackTrace();
                }
                String message = String.format("* %s %s", client.nickname , "断开连接");
                broadcast(message);
            }
        }
    }
}

加载静态资源（css,js,image）

     package com.light.springboot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.ResourceUtils;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter{

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                //运行访问8088端口
                registry.addMapping("/fastjson/**").allowedOrigins("http://localhost:8088");
            }
        };
    }

     @Override  
        public void addResourceHandlers(ResourceHandlerRegistry registry) {  

            registry.addResourceHandler("/templates/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/templates/");  
            registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX+"/static/");  
            super.addResourceHandlers(registry);  
        }  
}

WebSocket.html

     <!DOCTYPE html>
<html>

<head lang="zh">
    <meta charset="UTF-8"></meta>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css"></link>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <style type="text/css">
    #msg {
        height: 400px;
        overflow-y: auto;
    }

    #userName {
        width: 200px;
    }

    #logout {
        display: none;
    }
    </style>
    <title>webSocket测试</title>
</head>
<body>
    <div class="container">
        <div class="page-header" id="tou">webSocket及时聊天Demo程序</div>
        <p class="text-right" id="logout">
            <button class="btn btn-danger" id="logout-btn">退出</button>
        </p>
        <div class="well" id="msg"></div>
        <div class="col-lg">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="发送信息..." id="message"></input> <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="send"
                        disabled="disabled">发送</button>
                </span>
            </div>
            <div class="input-group">
                <input id="userName" type="text" class="form-control" name="userName" placeholder="输入您的用户名" ></input>
                <button class="btn btn-default" type="button" id="connection-btn">建立连接</button>
            </div>
            <!-- /input-group -->
        </div>
        <!-- /.col-lg-6 -->
    </div>
    <!-- /.row -->

    <script type="text/javascript">
    $(function() {
        var websocket;
        $("#connection-btn").bind("click", function() {
            var userName = $("#userName").val();
            if (userName == null || userName == "") {
                alert("请输入您的用户名");
                return;
            }
            connection(userName);
        });

        function connection(userName) {
            var host = window.location.host;
          //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://" + host +
                    "/webSocketServer/" + userName);
            } else if ('MozWebSocket' in window) {
                websocket = new MozWebSocket("ws://" + host +
                    "/webSocketServer/" + userName);
            }
            websocket.onopen = function(evnt) {
                $("#tou").html("链接服务器成功!")
                $("#send").prop("disabled", "");
                $("#connection-btn").prop("disabled", "disabled");
                $("#logout").show();
            };
            websocket.onmessage = function(evnt) {
                $("#msg").html($("#msg").html() + "<br/>" + evnt.data);
            };
            websocket.onerror = function(evnt) {
                $("#tou").html("报错!")
            };
            websocket.onclose = function(evnt) {
                $("#tou").html("与服务器断开了链接!");
                $("#send").prop("disabled", "disabled");
                $("#connection-btn").prop("disabled", "");
                $("#logout").hide();
            }
        }

        function send() {
            if (websocket != null) {
                var $message = $("#message");
                var data = $message.val();
                if (data == null || data == "") {
                    return;
                }
                websocket.send(data);
                $message.val("");
            } else {
                alert('未与服务器链接.');
            }
        }

        $('#send').bind('click', function() {
            send();
        });

        $(document).on("keypress", function(event) {
            if (event.keyCode == "13") {
                send();
            }
        });

        $("#logout-btn").on("click", function() {
            websocket.close(); //关闭TCP连接
        });
    });
    </script>
</body>

</html>

效果图