ruoyi websocket使用

Ruoyi WebSocket 是 Ruoyi Vue 前端框架中的一个组件，用于实现前后端的双向通信。它基于 WebSocket 技术实现，可以在前端页面和后端服务器之间建立一条持久化的连接，实现实时推送和数据更新。

Ruoyi WebSocket 的使用步骤如下：
1. 在前端页面中引入 Ruoyi WebSocket 组件；
2. 在 Vue 组件的 created 或 mounted 生命周期中创建 WebSocket 连接；
3. 在 Vue 组件的 beforeDestroy 生命周期中关闭 WebSocket 连接；
4. 在后端服务器中实现 WebSocket 的消息处理逻辑。

以下是一个简单的 Ruoyi WebSocket 使用示例：

1. 在前端页面中引入 Ruoyi WebSocket 组件：

<template>
  <div>
    <h1>WebSocket 示例</h1>
    <p>{{message}}</p>
  </div>
</template>

<script>
import {websocketMixin} from '@/utils/websocket'

export default {
  name: 'WebSocketDemo',
  mixins: [websocketMixin],
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.createWebSocket('/websocket/demo') // 创建 WebSocket 连接
  },
  beforeDestroy() {
    this.closeWebSocket() // 关闭 WebSocket 连接
  },
  methods: {
    onMessage(event) {
      this.message = event.data // 接收 WebSocket 消息
    }
  }
}
</script>

2. 在后端服务器中实现 WebSocket 的消息处理逻辑：

@Component
@ServerEndpoint("/websocket/demo")
public class WebSocketDemo {
 
    private static CopyOnWriteArraySet<WebSocketDemo> webSocketSet = new CopyOnWriteArraySet<WebSocketDemo>();
 
    private Session session;
 
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);
    }
 
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
    }
 
    @OnMessage
    public void onMessage(String message) {
        for (WebSocketDemo webSocket : webSocketSet) {
            webSocket.sendMessage(message);
        }
    }
 
    private void sendMessage(String message) {
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}