ruoyi-nbcio增加websocket与测试页面

   更多ruoyi-nbcio功能请看演示系统

   gitee源代码地址

   前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio 

 

     为了后面流程发起等消息推送，所以需要集成websocket。

     1、后端增加websoket支持

       首先在framework模块里的pom.xml增加websocket

			org.springframework.boot
			spring-boot-starter-websocket
		

     2、增加websocket配置 

package com.ruoyi.framework.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启WebSocket支持
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3、增加websocket服务，当然这部分后面还要修改

package com.ruoyi.framework.websocket;

import cn.hutool.json.JSONUtil;
import com.ruoyi.common.core.domain.BaseProtocol;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

// @ServerEndpoint 声明并创建了webSocket端点, 并且指明了请求路径
// id 为客户端请求时携带的参数, 用于服务端区分客户端使用

/**
 * @ServerEndpoint 声明并创建了websocket端点, 并且指明了请求路径
 * uid 为客户端请求时携带的用户id, 用于区分发给哪个用户的消息
 * @author nbacheng
 * @date 2023-09-20
*/

@ServerEndpoint("/websocket/{uid}")
@Component
public class WebSocketServer {

    // 日志对象
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

    // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    //千万不要用++

    private static AtomicInteger onlineCount = new AtomicInteger(0);

    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();
    // private static ConcurrentHashMap websocketList = new ConcurrentHashMap<>();

    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    // 接收uid
    private String uid = "";

    /*
     * 客户端创建连接时触发
     * */
    @OnOpen
    public void onOpen(Session session, @PathParam("uid") String uid) {
        this.session = session;
        webSocketSet.add(this); // 加入set中
        addOnlineCount(); // 在线数加1
        log.info("有新窗口开始监听:" + uid + ", 当前在线人数为" + getOnlineCount());
        this.uid = uid;
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }

    /**
     * 客户端连接关闭时触发
     **/
    @OnClose
    public void onClose() {
        webSocketSet.remove(this); // 从set中删除
        subOnlineCount(); // 在线数减1
        log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
    }

    /**
     * 接收到客户端消息时触发
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到来自窗口" + uid + "的信息:" + message);
        // 群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 连接发生异常时候触发
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送(向浏览器发消息)
     */
    public void sendMessage(String message) throws IOException {
        log.info("服务器消息推送："+message);
        this.session.getAsyncRemote().sendText(message);
    }

    /**
     * 发送消息到所有客户端
     * 指定uid则向指定客户端发消息
     * 不指定uid则向所有客户端发送消息
     * */
    public static void sendInfo(String message, @PathParam("uid") String uid) throws IOException {
        log.info("推送消息到窗口" + uid + "，推送内容:" + message);
        for (WebSocketServer item : webSocketSet) {
            try {
                // 这里可以设定只推送给这个sid的，为null则全部推送
                if (uid == null) {
                    item.sendMessage(message);
                } else if (item.uid.equals(uid)) {
                    item.sendMessage(message);
                }
            } catch (IOException e) {
                continue;
            }
        }
    }
    
    /**
     * 
     * 给多个指定uid客户端发消息
     * 
     * */
    public static void sendInfo(String message, @PathParam("uids") String[] uids ) throws IOException {
        log.info("推送消息到窗口" + uids + "，推送内容:" + message);
        for (String uid : uids) {
        	sendInfo(message,uid);
        }
    }
        

    /**
     * 发送消息到所有客户端
     * 指定uid则向指定客户端发消息
     * 不指定uid则向所有客户端发送消息
     * */
    public static void sendInfo(BaseProtocol message, @PathParam("uid") String uid) throws IOException {
        log.info("推送消息到窗口" + uid + "，推送内容:" + message);
        for (WebSocketServer item : webSocketSet) {
            try {
                // 这里可以设定只推送给这个sid的，为null则全部推送
                if (uid == null) {
                    item.sendMessage(JSONUtil.toJsonStr(message));
                } else if (item.uid.equals(uid)) {
                    item.sendMessage(JSONUtil.toJsonStr(message));
                }
            } catch (IOException e) {
                continue;
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount.get();
    }

    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount.incrementAndGet();
    }

    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount.decrementAndGet();
    }

    public static CopyOnWriteArraySet getWebSocketSet() {
        return webSocketSet;
    }

}

4、在导航条里增加一个消息

界面就是

同时为了样式问题增加下面样式

right-menu-item-message {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      width: 36px;
    
      &.hover-effect {
        cursor: pointer;
        transition: background .3s;
    
        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

5、增加HeaderNotice 组件，当然现在是测试，只作为websocket消息测试用，后续正式还需要修改。

6、增加websocket测试页面，以便测试，地址根据自己需要进行填写

7、实际效果图