springboot+vue+websocket实现在线留言

实现在线留言的过程可以分为以下几个步骤：

1. 服务器端搭建WebSocket服务

使用SpringBoot中的WebSocket模块可以快速搭建WebSocket服务，只需要在配置文件中添加以下配置即可：

spring:
  websocket:
    prefix: /ws

然后创建一个WebSocket处理器类，用于处理客户端发送的信息和服务端发送的信息。

2. 客户端与服务端建立WebSocket连接

在Vue中使用WebSocket可以使用`WebSocket`对象，使用`new WebSocket(url)`方法来建立连接。其中`url`是WebSocket服务端的地址，可以使用`ws://localhost:8080/ws`来连接上面搭建的WebSocket服务。

3. 实现在线留言功能

客户端在发送留言时，通过WebSocket向服务端发送消息，服务端接收到消息后将消息广播给所有连接的客户端。客户端接收到服务端发送的消息后，将消息显示在留言板上。

具体实现代码示例如下：

服务端：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/ws").setAllowedOrigins("*");
    }
 
    @Bean
    public WebSocketHandler myHandler() {
        return new MyWebSocketHandler();
    }
}

public class MyWebSocketHandler extends TextWebSocketHandler {
 
    private static final List<WebSocketSession> sessions = new ArrayList<>();
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }
 
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }
}

客户端：

<template>
  <div>
    <div>
      <input v-model="message" type="text" placeholder="请输入留言内容">
      <button @click="sendMessage">发送</button>
    </div>
    <div>
      <ul>
        <li v-for="(msg, index) in messages" :key="index">{{msg}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: []
    }
  },
  mounted() {
    this.socket = new WebSocket('ws://localhost:8080/ws')
    this.socket.onmessage = (event) => {
      this.messages.push(event.data)
    }
  },
  methods: {
    sendMessage() {
      this.socket.send(this.message)
      this.message = ''
    }
  }
}
</script>

这样就可以实现在线留言功能了。当客户端发送留言时，服务端会将留言广播给所有连接的客户端，客户端接收到留言后将留言显示在留言板上。