企业官网建设流程全解析

网站建设的总体目标,搞个网站要多少钱,客户管理系统排名,青岛城阳网站设计#x1f4ac; 前言#xff1a;为什么轮询 (Polling) 被淘汰了#xff1f; 在 Web 1.0 时代#xff0c;如果我们要实现“收到新消息提醒”#xff0c;通常只能让前端每隔 2 秒发一次 HTTP 请求问后端#xff1a;“有新消息吗#xff1f;” 这叫短轮询。 缺点#xff1… 前言为什么轮询 (Polling) 被淘汰了在 Web 1.0 时代如果我们要实现“收到新消息提醒”通常只能让前端每隔 2 秒发一次 HTTP 请求问后端“有新消息吗”这叫短轮询。缺点服务器压力大99% 的请求都是无用的且消息有延迟。到了 Web 2.0WebSocket横空出世。它像一条**“专线管道”一旦建立连接服务器就可以主动**把消息推给前端。优点零延迟服务器资源消耗极低全双工通讯。今天我们就用最主流的Spring Boot Vue3在 30 分钟内手撸一个多人在线聊天室️ 系统架构一条永不断的线我们要实现的功能用户登录输入昵称。进入群聊显示在线人数。发送消息所有人包括自己实时收到。架构设计图WebSocket_Server_内存1. 建立 WS 连接1. 建立 WS 连接2. 发送消息 Hello3. 查找所有在线 Session4. 推送消息4. 推送消息ConcurrentHashMap Session池用户 A Vue3Spring Boot 后端用户 B Vue3 后端实战Spring Boot WebSocket不需要 NettySpring Boot 自带的 WebSocket 模块足够应对中小规模场景。1. 引入依赖dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependency2. 开启支持 (WebSocketConfig.java)ConfigurationpublicclassWebSocketConfig{BeanpublicServerEndpointExporterserverEndpointExporter(){returnnewServerEndpointExporter();}}3. 核心服务 (WebSocketServer.java)这是整个聊天室的心脏。ServerEndpoint(/ws/{username})// 前端连接地址: ws://localhost:8080/ws/张三ComponentSlf4jpublicclassWebSocketServer{// 存放每个客户端对应的 WebSocketServer 对象privatestaticConcurrentHashMapString,SessiononlineSessionsnewConcurrentHashMap();OnOpenpublicvoidonOpen(Sessionsession,PathParam(username)Stringusername){onlineSessions.put(username,session);broadcast(系统消息: 欢迎用户 [username] 加入群聊);}OnClosepublicvoidonClose(PathParam(username)Stringusername){onlineSessions.remove(username);broadcast(系统消息: 用户 [username] 已离开。);}OnMessagepublicvoidonMessage(Stringmessage,Sessionsession,PathParam(username)Stringusername){// 收到消息转发给所有人broadcast(【username】: message);}// 群发消息辅助方法privatevoidbroadcast(Stringmsg){onlineSessions.forEach((user,session)-{try{session.getBasicRemote().sendText(msg);}catch(IOExceptione){e.printStackTrace();}});}} 前端实战Vue 3 Composition APIVue3 写 WebSocket 简直不要太丝滑。templatedivclasschat-boxdivclassmsg-listrefmsgRefdivv-formsg in msgList:keymsg{{ msg }}/div/divdivclassinput-areainputv-modelinputMsgplaceholder输入消息.../buttonclicksendMsg发送/button/div/div/templatescriptsetupimport{ref,onMounted,onUnmounted}fromvue;constusernameUser_Math.floor(Math.random()*1000);constsocketUrlws://localhost:8080/ws/${username};constmsgListref([]);constinputMsgref();letwsnull;onMounted((){initWebSocket();});constinitWebSocket(){wsnewWebSocket(socketUrl);ws.onopen(){msgList.value.push(✅ 连接服务器成功...);};ws.onmessage(event){// 收到后端推送的消息msgList.value.push(event.data);};};constsendMsg(){if(wsinputMsg.value){ws.send(inputMsg.value);inputMsg.value;}};onUnmounted((){if(ws)ws.close();// 页面销毁时断开连接});/script️ 进阶挑战心跳检测与断线重连在真实生产环境中网络是不稳定的。如果用户断网了WebSocket 连接会“假死”。你需要实现心跳机制 (Heartbeat)Ping/Pong前端每隔 30 秒发送一个 “PING”后端回复 “PONG”。断线重连前端监听ws.onclose事件如果非主动断开则在 5 秒后尝试重新new WebSocket()。(这部分代码在下方的源码中均有体现) 源码推荐与下载如果你想看企业级的 IM 架构支持千万级并发、集群部署、Redis 存储离线消息那么仅仅看 Spring Boot 原生 WebSocket 是不够的你需要引入Netty。我为你精选了一个 GitHub 上1.4万 Star的神级项目它是 Java 领域即时通讯的标杆。开源项目CIM (Cross-platform Instant Messaging)GitHub 地址https://github.com/crossoverJie/cim推荐理由基于Netty Spring Boot Redis构建性能吊打原生 WebSocket。代码结构清晰包含命令行客户端、Web 客户端、安卓客户端。文档极其详细适合做毕业设计或企业内部通讯系统的底座。