websocket在springboot+vue中的使用教程

下面是关于使用WebSocket在Spring Boot和Vue中的完整攻略。

WebSocket 在 Spring Boot 和 Vue 中的使用教程

什么是 WebSocket？

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单、更便捷，且可以实现低延迟实时通信。

Spring Boot 中使用 WebSocket

在 Spring Boot 中使用 WebSocket 可以结合 Spring WebSocket 和 SockJS 库实现。

在 Spring Boot 中，我们需要在应用程序中添加一个 Web Socket 配置类，该类要实现 WebSocketConfigurer 接口，然后在 registerWebSocketHandlers() 方法中注册一个 WebSocket 处理器。

示例：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler").setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }

}

其中 MyHandler 是我们自己实现的 WebSocket 处理器。

Vue 中使用 WebSocket

在 Vue 中，我们可以使用 vue-native-websocket 库来实现 WebSocket 的功能。

我们需要在 Vue 应用程序中添加该库，然后在 created() 钩子中创建 WebSocket 连接。

示例：

import VueNativeSock from 'vue-native-websocket'

export default {
  created() {
    this.$options.sockets.onmessage = (data) => {
      console.log(data)
    }

    this.$options.sockets.onerror = (data) => {
      console.error(data)
    }
  },
  sockets: {
    reconnect: true,
    url: 'ws://localhost:8080/myHandler'
  }
}

完整示例

下面是一个完整的示例，演示如何在 Spring Boot 和 Vue 中使用 WebSocket 实现实时数据传输。

Spring Boot 示例中，我们创建了一个简单的 Greeting 类：

public class Greeting {

    private String content;

    public Greeting() {
    }

    public Greeting(String content) {
        this.content = content;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

}

然后我们创建了一个 WebSocket 处理器，它会在连接建立时向客户端发送一条欢迎信息，然后每隔 5 秒向客户端发送一条消息。

public class MyHandler extends WebSocketHandlerAdapter {

    private final Logger logger = LoggerFactory.getLogger(MyHandler.class);
    private static final String[] greetings = {"Hello, ", "Guten Tag, ", "Bonjour, ", "Hola, ", "Ciao, ", "こんにちは, ", "안녕하세요, "};

    private int count = 0;

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        int randomNum = ThreadLocalRandom.current().nextInt(greetings.length);

        String message = greetings[randomNum] + session.getId() + "!";

        session.sendMessage(new TextMessage(message));

        Runnable task = new Runnable() {
            @Override
            public void run() {
                while (true) {
                    try {
                        Thread.sleep(5000);

                        String message = "You have received new message #" + count++;

                        session.sendMessage(new TextMessage(message));

                    } catch (IOException e) {
                        e.printStackTrace();
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        };

        new Thread(task).start();

        logger.info("WebSocket连接已建立：{}", session.getId());

        super.afterConnectionEstablished(session);
    }

}

Vue 示例中，我们创建了一个简单的组件，它会在创建时创建一个 WebSocket 连接，并在接收到消息时将消息显示在页面上。

<template>
  <div class="message">
    <div>{{ message }}</div>
  </div>
</template>

<script>
import VueNativeSock from 'vue-native-websocket'

export default {
  created() {
    this.$options.sockets.onmessage = (data) => {
      console.log(data)
      this.message = data.data
    }

    this.$options.sockets.onerror = (data) => {
      console.error(data)
    }
  },
  data() {
    return {
      message: ''
    }
  },
  sockets: {
    reconnect: true,
    url: 'ws://localhost:8080/myHandler'
  }
}
</script>

最后我们在一个简单的页面中引入该组件：

<template>
  <div class="container">
    <h1>WebSocket 示例</h1>
    <message></message>
  </div>
</template>

<script>
import Message from './components/Message'

export default {
  components: {
    Message
  }
}
</script>

现在我们启动应用程序，并在浏览器中打开该页面，就可以看到实时消息的传递了。

总结

本文介绍了如何在 Spring Boot 和 Vue 中使用 WebSocket 实现实时数据传输。我们使用了 Spring WebSocket 和 SockJS 库在 Spring Boot 中创建 WebSocket 处理器，然后在 Vue 中使用 vue-native-websocket 库来创建 WebSocket 连接。最后，我们演示了一个完整的示例，它会每隔 5 秒向客户端发送一条消息，然后在客户端中将消息显示在页面上。