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

一、开发工具

后端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 依赖包 --