Spring Boot STOMP聊天应用中，如何在JS中动态获取应用上下文路径？

当然可以搞定！既然你用的是Thymeleaf，其实有几种很方便的方式来动态获取上下文路径，彻底摆脱硬编码的麻烦，下面给你详细说说：

方法1：Thymeleaf JS内联表达式直接注入 #

这是最直接的方式，利用Thymeleaf的内联JavaScript功能，把上下文路径直接注入到JS变量中：

<!-- 开启JS内联模式 -->
<script th:inline="javascript">
    // 用Thymeleaf的@{/}表达式获取上下文根路径，自动适配你的server.contextPath配置
    const contextPath = [[@{/}]];
    
    // 然后创建SockJS实例时就可以动态拼接了
    const socket = new SockJS(contextPath + 'chat');
</script>

解释一下：[[@{/}]]是Thymeleaf的URL表达式，它会自动读取你配置的server.contextPath（或者Spring Boot 2.x+的server.servlet.context-path），生成对应的路径。比如你配置的是/chatapp，这个表达式就会输出/chatapp/，拼接chat后正好是/chatapp/chat，和你原来的硬编码效果一致，但完全不用手动维护路径。

方法2：通过Base标签全局共享 #

如果不想在每个需要路径的JS里都写内联表达式，可以在页面的<head>里定义一个<base>标签，然后JS通过DOM读取这个base路径：

<head>
    <!-- 用Thymeleaf设置base标签的href为上下文根 -->
    <base th:href="@{/}">
</head>

<script>
    // 从base标签获取全局的根路径
    const baseUrl = document.baseURI;
    // 拼接创建SockJS实例
    const socket = new SockJS(baseUrl + 'chat');
</script>

这种方式的好处是上下文路径全局可用，不管哪个JS文件里都能直接读取document.baseURI来使用，适合多个地方需要路径的场景。

方法3：纯JS解析URL（不依赖Thymeleaf） #

如果出于某些原因不想依赖Thymeleaf的模板能力，也可以通过纯JS解析当前页面的URL来提取上下文路径，不过这个方法相对来说可靠性稍低（比如上下文路径包含多段时需要调整逻辑）：

function getContextPath() {
    const pathSegments = window.location.pathname.split('/');
    // 假设上下文路径是URL中的第一个非空分段
    if (pathSegments.length > 1 && pathSegments[1]) {
        return '/' + pathSegments[1];
    }
    // 如果没有配置上下文路径，返回空字符串
    return '';
}

// 使用函数获取路径并创建SockJS实例
const socket = new SockJS(getContextPath() + '/chat');

这个方法的局限性在于，如果你的上下文路径是多段（比如/app/v2），上面的逻辑就需要调整，但大部分Spring Boot应用的上下文路径都是单段的，所以也能应付简单场景。

总的来说，推荐前两种基于Thymeleaf的方法，因为它们能准确匹配你的配置，完全避免硬编码的维护成本。

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