Kotlin实现SpringBoot WebSocket功能时JS客户端无法运行问题求助

问题排查及解决方案 #

1. 检查webjars依赖完整性 #

你只引入了webjars-locator还不够，需要同时引入sockjs和stomp对应的webjars依赖：

• Maven示例：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>sockjs-client</artifactId>
    <version>1.5.1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>stomp-websocket</artifactId>
    <version>2.3.4</version>
</dependency>

• Gradle Kotlin DSL示例：

implementation("org.webjars:sockjs-client:1.5.1")
implementation("org.webjars:stomp-websocket:2.3.4")

2. 修正HTML中JS资源引用路径 #

配合webjars-locator使用时不需要加版本号，正确引用写法如下：

<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>

如果还是出现资源404，也可以直接将两个JS文件下载后放入项目resources/static目录下，直接用相对路径引用，避免webjars路径匹配问题。

3. 补充跨域配置（如果前后端端口不一致） #

修改WebSocket配置类的端点注册逻辑，添加跨域允许规则：

override fun registerStompEndpoints(registry: StompEndpointRegistry) {
    registry.addEndpoint("/stomp-endpoint")
        .setAllowedOriginPatterns("*") // 生产环境建议替换为实际前端域名
        .withSockJS()
}

4. 确认客户端连接代码逻辑 #

参考正确的连接代码示例，检查端点路径、调用逻辑是否正确：

// 注意端点路径要和配置的/stomp-endpoint完全一致
const socket = new SockJS('/stomp-endpoint');
const stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    console.log('连接成功：' + frame);
    // 连接成功后再执行订阅、发送消息等逻辑
})

内容的提问来源于stack exchange，提问作者Ipkiss