springboot+vue实现websocket配置过程解析

下面我将详细讲解如何使用SpringBoot和Vue.js实现WebSocket的配置过程，整个过程需要分为以下几个步骤：

1. 配置后端SpringBoot实现WebSocket
2. 配置前端Vue.js实现WebSocket
3. 前后端WebSocket通信示例

接下来我将详细讲解每个步骤的具体实现。

1. 配置后端SpringBoot实现WebSocket

首先，我们需要在pom.xml文件中添加相关依赖，在这里我们需要添加以下两个依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-messaging</artifactId>
</dependency>

接下来我们需要在启动类上添加@EnableWebSocketMessageBroker注解，并实现WebSocketMessageBrokerConfigurer接口中的相关方法，具体代码如下所示：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }

}

在上述代码中，我们使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理，并在configureMessageBroker方法中配置消息代理，使用/topic作为消息前缀。 setApplicationDestinationPrefixes方法配置应用程序预先设置的前缀，这里我们使用/app作为前缀。

在registerStompEndpoints方法中注册了一个简单的端点，并使用SockJS支持跨浏览器客户端。这个端点就是WebSocket的端点，我们的客户端通过这个端点建立WebSocket连接。

配置完成后，我们需要在Controller中添加WebSocket相关的接口，示例如下：

@Controller
public class WebSocketController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greetig greeting(HelloMessage message) throws Exception {
        return new Greeting("Hello, " + message.getName() + "!");
    }

}

在上述代码中，我们使用@MessageMapping注解指定消息的目的地，并在SendTo中指定消息要发送的目的地。在这里，当发送名为“/hello”的消息时，WebSocket将会把它转发到/topic/greetings位置。

2. 配置前端Vue.js实现WebSocket

在前端的实现中，我们需要安装vue-socket.io插件，具体操作可以在终端中使用以下命令进行安装：

npm install vue-socket.io --save

安装完成后，在Vue.js中我们需要配置相关的WebSocket事件和回调函数。我们需要在Vue.js实例的created()方法中添加如下代码：

import VueSocketIO from 'vue-socket.io'
import io from 'socket.io-client'

export default {
  name: 'App',
  created() {
    const socket = io('http://localhost:8080/')
    Vue.prototype.$socket = socket
    Vue.use(new VueSocketIO({
      debug: true,
      connection: 'http://localhost:8080/',
    }))
  },
}

在这里，我们首先导入了vue-socket.io库和socket.io-client库，然后在created()方法中创建一个WebSocket实例，并将它绑定到Vue.js的原型上，以便在整个Vue.js应用程序中都可以使用。最后我们使用VueSocketIO配置了WebSocket的连接设置。

3. 前后端WebSocket通信示例

在前后端WebSocket配置完成后，我们就可以进行WebSocket的通信了。以下是一个简单的前后端WebSocket通信的示例：

后端代码（Java）：

@Controller
public class WebSocketController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greetig greeting(HelloMessage message) throws Exception {
        return new Greeting("Hello, " + message.getName() + "!");
    }

}

前端代码（Vue.js）：

<template>
  <div>
    <input type="text" v-model="name" />
    <button @click="send">Send</button>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      name: '',
      messages: [],
    }
  },
  methods: {
    send() {
      if (this.name && this.name.trim().length > 0) {
        this.$socket.emit('hello', { name: this.name })
      }
    },
  },
  sockets: {
    'topic/greetings'(data) {
      this.messages.push(data.content)
    },
  },
}
</script>

在上述代码中，我们首先在前端通过一个文本框输入一个名字，并且通过点击按钮后，将输入的消息通过WebSocket发送到了后台。在后端将消息处理完成后，WebSocket将会把它转发到/topic/greetings位置。在前端收到消息后，将会自动刷新页面。

至此，我们已经完成了SpringBoot和Vue.js实现WebSocket的配置过程，并且进行了一条包含前后端WebSocket通信示例的演示。