集成 WebSocket 实现实时通信

WebSocket 是一种非常适合实时通信的协议，它能够在客户端和服务器之间建立持久性连接，实现双向数据传输。

---

1. 添加 WebSocket 依赖

首先，需要在 ruoyi-framework/pom.xml 文件中添加 WebSocket 的依赖，以启用 Spring Boot 对 WebSocket 的支持。

<!-- Spring Boot WebSocket 依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

此依赖将为项目提供 WebSocket 的相关支持功能。

---

2. 配置匿名访问（可选）

如果需要允许未登录的用户访问 WebSocket，可以在 SecurityConfig.java 中配置匿名访问权限。

// SecurityConfig.java

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
        // 其他配置...
        .authorizeRequests()
        .antMatchers("/websocket/**").permitAll()  // 允许匿名访问 WebSocket 连接
        .anyRequest().authenticated();
}

这段配置允许所有用户，无论是否登录，都可以访问 /websocket/** 路径下的 WebSocket 连接。

---

3. 下载插件相关包和代码实现

为了简化 WebSocket 的集成过程，相关的代码和配置已经打包在插件中。请下载并解压，将内容覆盖到项目中对应的文件夹。

下载链接: 集成 WebSocket 实现实时通信 (opens new window)
提取码: mjs7

---

4. 测试验证 WebSocket 功能

在完成以上步骤后，可以通过将 websocket.vue 的内容复制到 login.vue 中进行简单的测试。以下是一些示例代码片段，展示了如何在前端使用 WebSocket。

<template>
  <div>
    <button @click="connect">连接 WebSocket</button>
    <input v-model="message" placeholder="输入消息"/>
    <button @click="sendMessage">发送消息</button>
    <p>收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
      receivedMessage: ''
    };
  },
  methods: {
    connect() {
      this.socket = new WebSocket("ws://localhost:8080/websocket");

      this.socket.onopen = () => {
        console.log("WebSocket 连接成功");
      };

      this.socket.onmessage = (event) => {
        this.receivedMessage = event.data;
        console.log("收到消息：", event.data);
      };

      this.socket.onclose = () => {
        console.log("WebSocket 连接关闭");
      };

      this.socket.onerror = (error) => {
        console.log("WebSocket 连接错误：", error);
      };
    },
    sendMessage() {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.message);
        console.log("发送消息：", this.message);
      } else {
        console.log("WebSocket 连接未建立");
      }
    }
  }
};
</script>

通过上述代码，你可以在页面中创建一个 WebSocket 连接，输入消息并发送给服务器，实时接收并显示服务器返回的消息。

---

注意事项

• WebSocket 服务器端配置: 在服务器端，需要编写相应的 WebSocket 处理类，处理客户端的连接、消息接收和发送等逻辑。
• 跨域问题: 如果前后端分离且不在同一个域下，可能需要处理 WebSocket 的跨域问题。
• 资源清理: 确保在关闭连接时，正确清理 WebSocket 资源，以免造成内存泄漏或连接占用。