编写一个 JAVA+VUE+WebSocket的代码

以下是一个简单的 Java Vue WebSocket 应用程序的示例代码，其中使用了 Spring Boot 作为后端框架，前端使用 Vue.js。这个应用程序将向客户端发送一个简单的问候语，并且可以在客户端发送消息时回显该消息。

Java 代码：

package com.example.websocketdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@SpringBootApplication
@EnableWebSocket
public class WebsocketDemoApplication implements WebSocketConfigurer {

    public static void main(String[] args) {
        SpringApplication.run(WebsocketDemoApplication.class, args);
    }

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

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

Vue.js 代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <input type="text" v-model="inputMessage" @keyup.enter="sendMessage">
  </div>
</template>

<script>
import { WebSocketClient } from 'vue-native-websocket'

export default {
  name: 'App',
  data: () => ({
    message: '',
    inputMessage: ''
  }),
  mounted () {
    this.websocket = new WebSocketClient('ws://localhost:8080/websocket')
    this.websocket.onMessage(this.handleMessage)
  },
  methods: {
    handleMessage (data) {
      this.message = data
    },
    sendMessage () {
      this.websocket.send(this.inputMessage)
      this.inputMessage = ''
    }
  }
}
</script>

WebSocket 处理程序代码：

package com.example.websocketdemo;

import java.io.IOException;
import javax.websocket.OnMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")
public class WebSocketHandler {

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        session.getBasicRemote().sendText("Hello, " + message);
    }
}

这个示例程序使用了 Spring Boot 和 Vue.js，其中后端的 WebSocket 处理程序使用了 Java WebSocket API，前端使用了 vue-native-websocket 库。运行这个应用程序，可以在浏览器中打开应用程序的 URL，输入一些文本并按下 Enter 键，可以看到服务器回显这个文本。