1、创建WebSocket配置类ConfigurationEnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){registry.addHandler(chatWebSocketHandler(),/chat/ws).setAllowedOrigins(https://yourdomain.com)// 生产环境配置具体域名.withSockJS();// 兼容不支持 WebSocket 的浏览器}BeanpublicWebSocketHandlerchatWebSocketHandler(){returnnewChatWebSocketHandler();}}2、创建WebSocket和前端的通信类/*TextWebSocketHandler是 Spring 框架提供的用于处理 WebSocket 文本消息的处理器基类通过继承该类 * 并重写特定方法便可以在项目中实现 WebSocket 服务端逻辑。 * * 例1、afterConnectionEstablished当客户端与服务端成功建立 WebSocket 连接时触发常用于记录在线用户、初始化会话属性或发送欢迎消息 。 * 2、handleTextMessage当服务端收到客户端发送的文本消息时触发是业务逻辑处理的主要入口可在此解析消息并回复 。 * 3、afterConnectionClosed当连接正常关闭时触发用于清理资源、移除离线用户会话或记录日志 。 * 4、handleTransportError当通信过程中出现异常如网络中断时触发用于错误处理和告警 。 */publicclassChatWebSocketHandlerextendsTextWebSocketHandler{// 存储所有在线客户端连接privatefinalSetWebSocketSessionsessionsConcurrentHashMap.newKeySet();OverridepublicvoidafterConnectionEstablished(WebSocketSessionsession){// 新客户端连接处理sessions.add(session);System.out.println(新客户端连接: session.getId());}OverrideprotectedvoidhandleTextMessage(WebSocketSessionsession,TextMessagemessage)throwsException{// 接收客户端消息并广播给所有在线用户Stringpayloadmessage.getPayload();System.out.println(收到消息: payload);// 消息广播for(WebSocketSessionwebSocketSession:sessions){if(webSocketSession.isOpen()){webSocketSession.sendMessage(newTextMessage(广播消息: payload));}}}OverridepublicvoidafterConnectionClosed(WebSocketSessionsession,CloseStatusstatus){// 客户端连接关闭处理sessions.remove(session);System.out.println(客户端断开连接: session.getId());}OverrideprotectedvoidhandleTransportError(WebSocketSessionsession,TextMessagemessage)throwsException{StringuserIdgetUserIdFromSession(session);// 1. 记录详细错误日志log.error(WebSocket传输错误用户ID{}会话ID{}错误信息{},userId,session.getId(),exception.getMessage(),exception);}}3、前端简单实现// 创建 WebSocket 连接constsocketnewWebSocket(wss://yourdomain.com/chat/ws);// 连接成功回调socket.onopenfunction(event){console.log(WebSocket 连接已建立);socket.send(Hello, Server!);};// 接收消息回调socket.onmessagefunction(event){constmessageevent.data;console.log(收到服务器消息:,message);// 更新UI展示消息};// 连接关闭回调socket.onclosefunction(event){console.log(WebSocket 连接已关闭);// 实现自动重连逻辑setTimeout(()initWebSocket(),5000);};// 错误处理回调socket.onerrorfunction(error){console.error(WebSocket 错误:,error);};4、简单使用ConfigurationEnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){registry.addHandler(photoWebSocketHandler(),/photo/ws)//.setAllowedOrigins(https://localhost:8080) // 生产环境配置具体域名.setAllowedOrigins(*);//也可配置适配所有域名生产环境不建议}BeanpublicWebSocketHandlerphotoWebSocketHandler(){returnnewPhotoWebSocketHandler();}}/** * 照片推送WebSocket处理器 */publicclassPhotoWebSocketHandlerextendsTextWebSocketHandler{privatefinalScheduledExecutorServiceexecutorExecutors.newSingleThreadScheduledExecutor();OverridepublicvoidafterConnectionEstablished(WebSocketSessionsession){// 每3秒推送一次最新照片executor.scheduleAtFixedRate(()-{try{// 1. 获取最新照片byte[]photoBytesgetLatestPhoto();// 2. 转换为Base64字符串Stringbase64PhotoBase64.getEncoder().encodeToString(photoBytes);// 3. 推送给前端session.sendMessage(newTextMessage(base64Photo));}catch(Exceptione){e.printStackTrace();}},0,3,TimeUnit.SECONDS);}/** * 获取最新照片示例方法 * return 照片字节数组 * throws IOException IO异常 */privatebyte[]getLatestPhoto()throwsIOException{FilelatestPhotonewFile(photos/latest.jpg);returnFiles.readAllBytes(latestPhoto.toPath());}}img idrealTimePhotoalt实时照片scriptconstwsnewWebSocket(ws://localhost:8080/photo/ws);constimgElementdocument.getElementById(realTimePhoto);ws.onmessagefunction(event){// 接收Base64照片并更新imgElement.srcdata:image/jpeg;base64,event.data;};ws.onclosefunction(){console.log(WebSocket连接已关闭);};/script
java WebSocket 使用
1、创建WebSocket配置类ConfigurationEnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){registry.addHandler(chatWebSocketHandler(),/chat/ws).setAllowedOrigins(https://yourdomain.com)// 生产环境配置具体域名.withSockJS();// 兼容不支持 WebSocket 的浏览器}BeanpublicWebSocketHandlerchatWebSocketHandler(){returnnewChatWebSocketHandler();}}2、创建WebSocket和前端的通信类/*TextWebSocketHandler是 Spring 框架提供的用于处理 WebSocket 文本消息的处理器基类通过继承该类 * 并重写特定方法便可以在项目中实现 WebSocket 服务端逻辑。 * * 例1、afterConnectionEstablished当客户端与服务端成功建立 WebSocket 连接时触发常用于记录在线用户、初始化会话属性或发送欢迎消息 。 * 2、handleTextMessage当服务端收到客户端发送的文本消息时触发是业务逻辑处理的主要入口可在此解析消息并回复 。 * 3、afterConnectionClosed当连接正常关闭时触发用于清理资源、移除离线用户会话或记录日志 。 * 4、handleTransportError当通信过程中出现异常如网络中断时触发用于错误处理和告警 。 */publicclassChatWebSocketHandlerextendsTextWebSocketHandler{// 存储所有在线客户端连接privatefinalSetWebSocketSessionsessionsConcurrentHashMap.newKeySet();OverridepublicvoidafterConnectionEstablished(WebSocketSessionsession){// 新客户端连接处理sessions.add(session);System.out.println(新客户端连接: session.getId());}OverrideprotectedvoidhandleTextMessage(WebSocketSessionsession,TextMessagemessage)throwsException{// 接收客户端消息并广播给所有在线用户Stringpayloadmessage.getPayload();System.out.println(收到消息: payload);// 消息广播for(WebSocketSessionwebSocketSession:sessions){if(webSocketSession.isOpen()){webSocketSession.sendMessage(newTextMessage(广播消息: payload));}}}OverridepublicvoidafterConnectionClosed(WebSocketSessionsession,CloseStatusstatus){// 客户端连接关闭处理sessions.remove(session);System.out.println(客户端断开连接: session.getId());}OverrideprotectedvoidhandleTransportError(WebSocketSessionsession,TextMessagemessage)throwsException{StringuserIdgetUserIdFromSession(session);// 1. 记录详细错误日志log.error(WebSocket传输错误用户ID{}会话ID{}错误信息{},userId,session.getId(),exception.getMessage(),exception);}}3、前端简单实现// 创建 WebSocket 连接constsocketnewWebSocket(wss://yourdomain.com/chat/ws);// 连接成功回调socket.onopenfunction(event){console.log(WebSocket 连接已建立);socket.send(Hello, Server!);};// 接收消息回调socket.onmessagefunction(event){constmessageevent.data;console.log(收到服务器消息:,message);// 更新UI展示消息};// 连接关闭回调socket.onclosefunction(event){console.log(WebSocket 连接已关闭);// 实现自动重连逻辑setTimeout(()initWebSocket(),5000);};// 错误处理回调socket.onerrorfunction(error){console.error(WebSocket 错误:,error);};4、简单使用ConfigurationEnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){registry.addHandler(photoWebSocketHandler(),/photo/ws)//.setAllowedOrigins(https://localhost:8080) // 生产环境配置具体域名.setAllowedOrigins(*);//也可配置适配所有域名生产环境不建议}BeanpublicWebSocketHandlerphotoWebSocketHandler(){returnnewPhotoWebSocketHandler();}}/** * 照片推送WebSocket处理器 */publicclassPhotoWebSocketHandlerextendsTextWebSocketHandler{privatefinalScheduledExecutorServiceexecutorExecutors.newSingleThreadScheduledExecutor();OverridepublicvoidafterConnectionEstablished(WebSocketSessionsession){// 每3秒推送一次最新照片executor.scheduleAtFixedRate(()-{try{// 1. 获取最新照片byte[]photoBytesgetLatestPhoto();// 2. 转换为Base64字符串Stringbase64PhotoBase64.getEncoder().encodeToString(photoBytes);// 3. 推送给前端session.sendMessage(newTextMessage(base64Photo));}catch(Exceptione){e.printStackTrace();}},0,3,TimeUnit.SECONDS);}/** * 获取最新照片示例方法 * return 照片字节数组 * throws IOException IO异常 */privatebyte[]getLatestPhoto()throwsIOException{FilelatestPhotonewFile(photos/latest.jpg);returnFiles.readAllBytes(latestPhoto.toPath());}}img idrealTimePhotoalt实时照片scriptconstwsnewWebSocket(ws://localhost:8080/photo/ws);constimgElementdocument.getElementById(realTimePhoto);ws.onmessagefunction(event){// 接收Base64照片并更新imgElement.srcdata:image/jpeg;base64,event.data;};ws.onclosefunction(){console.log(WebSocket连接已关闭);};/script
