首页 > 系统相关 >Vue+SpringBoot项目 服务器上Nginx反向代理WebSocket

Vue+SpringBoot项目 服务器上Nginx反向代理WebSocket

时间:2024-09-10 14:26:03浏览次数:8  
标签:Vue WebSocket SpringBoot Session session static key LOGGER public

问题

首先说下为什么需要做反向代理websocket,因为我的websocket是部署在后端项目中的,前端是vue部署到服务器后之后配置了ssl,前端页面访问就是带有https的,然而后端地址还是http,这就导致使用ws://url去连接后端服务器会出现以下问题

然后将访问方式更改为wss://url进行访问,此时的url不应该在是你后端服务的ip地址,应该改为你当前浏览器中的访问ip,具体实现如下:

前端代码

const host = import.meta.env.VITE_APP_SERVER_URL === 'prod-host' ? window.location.host : import.meta.env.VITE_APP_SERVER_URL;
if (import.meta.env.VITE_APP_SERVER_URL === 'prod-host') {
  ws.value = new WebSocket(`wss://${host}/ws/${getToken()}`);
} else {
  ws.value = new WebSocket(`ws://${host}/ws/${getToken()}`);
}

上面代码就是根据当前环境判断使用浏览器的地址还是自己配置的URL地址,其中getToken()是我封装的一个获取登录人的方法。

后端代码

websocket配置类

@Configuration
public class WebtopoWebSocketConfig
{
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}

websocket服务类

@Component
@ServerEndpoint("/ws/{userId}")
public class WebtopoWebSocketServer
{
    /**
     * WebSocketServer 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(WebtopoWebSocketServer.class);

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

    private static Semaphore socketSemaphore = new Semaphore(socketMaxOnlineCount);

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("userId") String userId) throws Exception
    {
        boolean semaphoreFlag = false;
        // 尝试获取信号量
        semaphoreFlag = SemaphoreUtils.tryAcquire(socketSemaphore);
        if (!semaphoreFlag)
        {
            // 未获取到信号量
            LOGGER.error("\n 当前在线人数超过限制数- {}", socketMaxOnlineCount);
            WebtopoWebSocketUsers.sendMessageToUserByText(session, "当前在线人数超过限制数:" + socketMaxOnlineCount);
            session.close();
        }
        else
        {
            if(!StringUtils.isNull(WebtopoWebSocketUsers.get(userId))){
                WebtopoWebSocketUsers.remove(userId);
            }
            // 添加用户
            WebtopoWebSocketUsers.put(userId, session);
            LOGGER.info("\n 建立连接 - {}", session);
            LOGGER.info("\n 当前人数 - {}", WebtopoWebSocketUsers.getUsers().size());
            LOGGER.info("\n 当前id - {}", userId);
        }
    }

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

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

    /**
     * 服务器接收到客户端消息时调用的方法
     */
    @OnMessage
    public void onMessage(String message, Session session)
    {
    }
}

存储连接用户工具类

public class WebtopoWebSocketUsers
{
    /**
     * WebSocketUsers 日志控制器
     */
    private static final Logger LOGGER = LoggerFactory.getLogger(WebtopoWebSocketUsers.class);

    /**
     * 用户集
     */
    private static Map<String, Session> USERS = new ConcurrentHashMap<String, Session>();

    /**
     * 存储用户
     *
     * @param key 唯一键
     * @param session 用户信息
     */
    public static void put(String key, Session session)
    {
        USERS.put(key, session);
    }

    public static Session get(String key)
    {
        return USERS.get(key);
    }
    /**
     * 移除用户
     *
     * @param session 用户信息
     *
     * @return 移除结果
     */
    public static boolean remove(Session session)
    {
        String key = null;
        boolean flag = USERS.containsValue(session);
        if (flag)
        {
            Set<Map.Entry<String, Session>> entries = USERS.entrySet();
            for (Map.Entry<String, Session> entry : entries)
            {
                Session value = entry.getValue();
                if (value.equals(session))
                {
                    key = entry.getKey();
                    break;
                }
            }
        }
        else
        {
            return true;
        }
        return remove(key);
    }

    /**
     * 移出用户
     *
     * @param key 键
     */
    public static boolean remove(String key)
    {
        LOGGER.info("\n 正在移出用户 - {}", key);
        Session remove = USERS.remove(key);
        if (remove != null)
        {
            boolean containsValue = USERS.containsValue(remove);
            LOGGER.info("\n 移出结果 - {}", containsValue ? "失败" : "成功");
            return containsValue;
        }
        else
        {
            return true;
        }
    }

    /**
     * 获取在线用户列表
     *
     * @return 返回用户集合
     */
    public static Map<String, Session> getUsers()
    {
        return USERS;
    }

    /**
     * 群发消息文本消息
     *
     * @param message 消息内容
     */
    public static void sendMessageToUsersByText(String message)
    {
        Collection<Session> values = USERS.values();
        for (Session value : values)
        {
            sendMessageToUserByText(value, message);
        }
    }

    /**
     * 发送文本消息
     *
     * @param message 消息内容
     */
    public static synchronized void sendMessageToUserByText(Session session, String message)
    {
        if (session != null)
        {
            try
            {
                session.getBasicRemote().sendText(message);
            }
            catch (IOException e)
            {
                LOGGER.error("\n[发送消息异常]", e);
            }
        }
        else
        {
            LOGGER.info("\n[你已离线]");
        }
    }
    public static void sendMessageToUserByObject(Session session, Object message)
    {
        if (session != null)
        {
            try
            {
                session.getBasicRemote().sendObject(message);
            }
            catch (IOException | EncodeException e)
            {
                LOGGER.error("\n[发送消息异常]", e);
            }
        }
        else
        {
            LOGGER.info("\n[你已离线]");
        }
    }
}

nginx配置

location /ws {
	proxy_pass http://后端服务地址:端口号$request_uri;
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;
}

$request_url是获取出ip以后得参数,例如访问地址是https://www.test.com/ws/1234567,使用$request_url获取的就是/ws/123456,然后拼接到转发的地址中

标签:Vue,WebSocket,SpringBoot,Session,session,static,key,LOGGER,public
From: https://www.cnblogs.com/zjh0420/p/18406330

相关文章

  • 面试官:Vue中的过滤器了解吗?过滤器的应用场景有哪些?
    一、是什么过滤器(filter)是输送介质管道上不可缺少的一种装置大白话,就是把一些不必要的东西过滤掉过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理,我们也可以理解其为一个纯函数Vue允许你自定义过滤器,可被用于一些常见的文本格式化p......
  • 面试官:你是怎么处理vue项目中的错误的?
    一、错误类型任何一个框架,对于错误的处理都是一种必备的能力在Vue中,则是定义了一套对应的错误处理规则给到使用者,且在源代码级别,对部分必要的过程做了一定的错误处理。主要的错误来源包括:后端接口错误代码中本身逻辑错误二、如何处理后端接口错误通过axios的interc......
  • 【SpringBoot Demo】MySQL + JPA + Hibernate + Springboot + Maven Demo
    主要包含:springboot+jpa+hibernate+mysql+lombok(两年前写过一个,现在重新记录一个)1. 目录结构: 2.pom 文件1<?xmlversion="1.0"encoding="UTF-8"?>2<projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.or......
  • java+vue计算机毕设车票订购系统【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和人们生活节奏的加快,传统的车票购买方式已难以满足日益增长的出行需求。传统的售票窗口排队购票不仅耗时耗力,还常常因信息不......
  • java+vue计算机毕设车票管理系统【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着交通网络的日益发达和人们出行需求的不断增长,车票管理系统在现代社会中扮演着至关重要的角色。传统的车票购买方式往往存在排队时间长、信息不透......
  • java+vue计算机毕设出版社高校教材样书管理【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的快速发展与课程体系的不断革新,高校教材作为知识传播的重要载体,其更新换代的速度日益加快。出版社作为教材的主要供给方,面临着如何高效......
  • java+vue计算机毕设宠物医院App【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着现代生活节奏的加快和人们对宠物情感依赖的增强,宠物已成为许多家庭不可或缺的一员。然而,传统的宠物医疗服务模式往往存在信息不对称、预约难、服......
  • Vue入门学习笔记-从入门到模版语法
    前言建议:建议学习HTML5+CSS3+JavaScript之后在学VueHTML和JavaScript需要着重学习,如果还学了jQuery更好Vue本身是基于JavaScript开发的框架,完全兼容JavaScript语法本学习笔记着重记录Vue语法和使用的相关特性,目的是为了后端开发人员快速上手Vue开发。 Vue和jQuery的区......
  • 基于 SpringBoot 的医院信管系统
    摘要随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,医院信管系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基......
  • 【Vue】npm ERR! code ERESOLVE
    npmERR!codeERESOLVE是npm在处理依赖关系时遇到版本冲突或无法解析依赖树时抛出的错误代码。这通常意味着项目中的某些包依赖于其他包的特定版本,而这些版本之间存在冲突,或者这些包的最新版本不兼容。解决方法:运行npminstall或npmupdate时添加--force参数来忽略......