基于若依开源架构websocket 集成与使用

当前项目,采用若依开源框架,所以集成按照若依开源框架提供的集成方式
 

插件相关包和代码实现ruoyi-vue/集成websocket实现实时通信.zip

链接: https://pan.baidu.com/s/13JVC9jm-Dp9PfHdDDylLCQ 提取码: y9jt

一 集成

 问题 1:连接失败200 
         若依架构中 
SecurityConfig,需要增加匿名访问,在文档2中有体现(读文档不用心的结果)

 

基于若依开源架构websocket 集成与使用_第1张图片

 此时可以正常连接基于若依开源架构websocket 集成与使用_第2张图片

二 使用

后端代码修改 ,需要增加用户id,记录当前在线的用户(最终发消息是给在线用户发送请求)

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.Semaphore;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

/**
 * websocket 消息处理
 *
 * @author ruoyi
 */
@Component
@ServerEndpoint("/websocket/message/{userId}")
public class WebSocketServer {
    /**
     * WebSocketServer 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketServer.class);

    /**
     * 默认最多允许同时在线人数100
     */
    public static int socketMaxOnlineCount = 100;

    private static Semaphore socketSemaphore = new Semaphore(socketMaxOnlineCount);

    public static Map USER_SESSIONS = new ConcurrentHashMap<>();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(@PathParam("userId") String userId, Session session) throws Exception {
        //从登录链接获取用户信息,记录下来
        USER_SESSIONS.remove(userId);
        USER_SESSIONS.put(userId, session);
        //给其他用户发送有新用户登录上来
        for (Map.Entry it : USER_SESSIONS.entrySet()) {
            if (!it.getKey().equals(userId)) {
                it.getValue().getBasicRemote().sendText(userId + "-登录");
            }
        }

        boolean semaphoreFlag = false;
        // 尝试获取信号量
        semaphoreFlag = SemaphoreUtils.tryAcquire(socketSemaphore);
        if (!semaphoreFlag) {
            // 未获取到信号量
            LOGGER.error("\n 当前在线人数超过限制数- {}", socketMaxOnlineCount);
            WebSocketUsers.sendMessageToUserByText(session, "当前在线人数超过限制数:" + socketMaxOnlineCount);
            session.close();
        } else {
            // 添加用户
            WebSocketUsers.put(session.getId(), session);
            LOGGER.info("\n 建立连接 - {}", session);
            LOGGER.info("\n 当前人数 - {}", WebSocketUsers.getUsers().size());
            WebSocketUsers.sendMessageToUserByText(session, "连接成功");
        }
    }

    /**
     * 连接关闭时处理
     */
    @OnClose
    public void onClose(Session session) {
        LOGGER.info("\n 关闭连接 - {}", session);
        // 移除用户
        WebSocketUsers.remove(session.getId());
        // 获取到信号量则需释放
        SemaphoreUtils.release(socketSemaphore);
    }

    /**
     * 抛出异常时处理
     */
    @OnError
    public void onError(Session session, Throwable exception) throws Exception {
        if (session.isOpen()) {
            // 关闭连接
            session.close();
        }
        String sessionId = session.getId();
        LOGGER.info("\n 连接异常 - {}", sessionId);
        LOGGER.info("\n 异常信息 - {}", exception);
        // 移出用户
        WebSocketUsers.remove(sessionId);
        // 获取到信号量则需释放
        SemaphoreUtils.release(socketSemaphore);
    }

    /**
     * 服务器接收到客户端消息时调用的方法
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        String msg = message.replace("111", "222").replace("张三", "李四");
        WebSocketUsers.sendMessageToUserByText(session, msg);
    }
}

基于若依开源架构websocket 集成与使用_第3张图片

基于若依开源架构websocket 集成与使用_第4张图片 

基于若依开源架构websocket 集成与使用_第5张图片 

public AjaxResult mediaAccountLoginResult(@RequestBody Map map) throws IOException {
      
        String userId = map.get("userId").toString();
        Session session = WebSocketServer.USER_SESSIONS.get(userId);
        if (session != null) {
            session.getBasicRemote().sendText("开始发送消息提醒");
        }

 基于若依开源架构websocket 集成与使用_第6张图片

到此 后端调用完成

前端。主要是当前三种方法(上面地址有完整前端测试代码)



WebSocket ,如果调用过多,可以封装成一个组件,主要是打开当前页面时候调用。所以,在需要WebSocket通信的页面调用当前方法即可

服务器nginx配置 

 参考:Nginx配置WebSocket - 谢端阳 - 博客园

location / {
                proxy_pass http://xxx;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
}

你可能感兴趣的:(开发遇到的问题,websocket,java,vue)