Vue+SpringBoot项目 服务器上Nginx反向代理WebSocket
问题
首先说下为什么需要做反向代理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 onError(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，然后拼接到转发的地址中
