springboot+websocket及部署tomcat后404问题的处理

最新推荐文章于 2023-12-23 13:58:20 发布

weixin_42851857

最新推荐文章于 2023-12-23 13:58:20 发布

阅读量3.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： websocket 文章标签： spring boot tomcat vue java web

本文链接：https://blog.csdn.net/weixin_42851857/article/details/104399884

本文介绍了在SpringBoot项目中使用WebSocket，并在Vue前端进行集成的配置方法。在开发环境中，通过PROXY_HOST代理解决跨域问题。在部署到Tomcat时遇到404错误，原因是WebSocketConfig类在生产环境中不需要。最后，解决了WebSocket握手失败的问题，通过判断环境动态添加项目名到WebSocket URL。

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

一、开发工具

后端intellij，前端vscode，部署环境tomcat9

二、前端vue+websocket

1、在系统主页Main.vue中初始化和关闭websocket，相关的js放在websocket.js文件中
**Main.vue**

import {
   
   initWebSocket,closeWebSocket} from '@/commons/websocket.js';

created(){
   
   
	initWebSocket();
}
destroyed(){
   
   
    closeWebSocket();
}

websocket.js
内容在网上都可以找到这里只记录一下重点。
1)接收到数据后如何在其他vue里使用，采用记录到store，使用的页面进行监听
**websocket.js**
import store from '@/store';
onmessage=(event)=>{
	var message = JSON.parse(event.data);
	 //publishinfo为store里action里定义的函数
	store.dispatch("publishInfo", message);
}

**store的app.js里**
actions: {
    publishInfo(store,info){
    	//在store的state定义好变量message
        store.state.message = info;
    }
}
**其他需要使用数据的页面**
computed:{
	publishInfo(){
            return this.$store.state.app.message;
    }
},
watch:{
	publishInfo(message){
		业务代码...
	}
}
2)访问后端的websocket的url，在vscode中启动项目的话访问不需要加项目名，在tomcat里启动访问项目的话需要加上项目名，所以在此进行处理，开发环境为空，打包时会加上项目名。
**websocket.js**
const getWsUrl = () => {
var host = serverHost(); //window.location.host
var project = process.env.API_ROOT;
if(process.env.NODE_ENV === "development"){
    host = process.env.PROXY_HOST;
    project = "";
}
return "ws://" + host + project +"/websocket/" + getContext().user.id;

}
config/dev.env.js
加了PROXY_HOST: ‘“localhost:8888”’

二、springboot+websocket

pom.xml加入

<!-- spring boot websocket 依赖包 -->
   <

最低0.47元/天解锁文章

200万优质内容无限畅学