VUE使用websocket

在之前搭建好的项目的基础上新版security demo（二）前端-CSDN博客

目录

一、代码改造

1、后端改造

2、VUE使用websocket

3、测试

二、按用户推送

1、完整代码如下

1.1、前端

1.2、后端：

2、测试

一、代码改造

1、后端改造

（1）把websocket相关代码复制到web项目：

（2）添加白名单

web-socket端口无需token验证，SecurityWebConfig添加白名单

 @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().requestMatchers("/param/**", "/user-websocket-endpoint/**","/menu-websocket-endpoint/**");
    }

2、VUE使用websocket

<template>
  <div>this is user manage</div>
</template>
<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
      inputMessage: ''
    };
  },
  mounted() {
    // Create a new WebSocket connection
    this.socket = new WebSocket("ws://localhost:2222/securityDemo/user-websocket-endpoint");
    
    // Set up event listeners
    this.socket.onopen = (event) => {
      console.log('WebSocket connection opened.');
      this.socket.send("Hello Server! This is menu client");
    };
    
    this.socket.onmessage = (event) => {
      this.message = event.data;
    };
    
    this.socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };
    
    this.socket.onclose = (event) => {
      console.log('WebSocket connection closed.');
    };
  },
  methods: {
    sendMessage() {
      if (this.socket && this.inputMessage) {
        this.socket.send(this.inputMessage);
        this.inputMessage = ''; // Clear the input field after sending
      }
    }
  },
  // beforeDestroy() {
  //   // Close the WebSocket connection when the component is destroyed
  //   if (this.socket) {
  //     this.socket.close();
  //   }
  // }
};
</script>

menumanage.vue代码和这个类似。 

3、测试

分别启动前后端，打开浏览器

（1）查看消息收发

切换到菜单管理：