企业官网建设流程全解析

定制网站开发接活,怎么上传图片到公司网站,html开头基础代码,如何做框架网站背景痛点#xff1a;轮询时代的“假实时” 做客服系统最怕什么#xff1f;不是用户骂你#xff0c;而是“消息已读不回”——其实根本没收到。 传统方案里#xff0c;前端每 3 秒轮询一次接口#xff0c;看似保险#xff0c;实则一地鸡毛#xff1a; 延迟#xff1a;…背景痛点轮询时代的“假实时”做客服系统最怕什么不是用户骂你而是“消息已读不回”——其实根本没收到。传统方案里前端每 3 秒轮询一次接口看似保险实则一地鸡毛延迟最坏情况下消息要等 3 秒才出现用户体验像写信。流量一次轮询至少 500 B日活 1 w 就是 1.2 GB 的纯浪费。顺序并发请求返回顺序不确定“客服已输入”提示可能闪来闪去。雪崩高峰期接口 RT 飙到 800 ms浏览器并发打满页面直接卡死。一句话轮询不是“实时”是“实时抽奖”。技术选型WebSocket 不是银弹但最合身方案延迟兼容性服务器开销结论短轮询1~3 s100 %高快速原型可用长轮询0.3~1 s100 %中防火墙穿透好仍浪费握手SSE0.2 s除 IE低服务端推送简单仅支持文本WebSocket0.1 s97 %最低全双工最贴合客服场景本地 loopback 测试Mac M2 Chrome 116短轮询平均 1100 ms长轮询 320 msSSE 85 msWebSocket 18 ms数据摆在这老板再让“兼容 IE”你就把表格甩给他。核心实现把聊天抽象成 useChatHook1. 类型先写死别等联调再哭// types/chat.d.ts export interface Message { id: string; // 雪花算法或 UUID role: user | agent | bot; content: string; timestamp: number; status: sending | sent | ack | fail; }2. Hook 骨架连接、重连、发消息全包圆// composables/useChat.ts import { ref, reactive, nextTick } from vue import { useWebSocket } from vueuse/core export function useChat(url: string, token: string) { const list refMessage[]([]) const pending refMapstring, Message(new Map()) const { status, data, send, open, close } useWebSocket(url, { autoReconnect: { retries: 5, delay: 1000, onFailed() { alert(网络开小差请刷新页面) } }, protocols: [chat, token] }) // 发消息自带本地幂等 ID const push (content: string) { const const msg: Message { id: self.crypto.randomUUID(), role: user, content, timestamp: Date.now(), status: sending } list.value.push(msg) pending.value.set(msg.id, msg) send(JSON.stringify(msg)) } // 收到远端回包 watch(data, raw { const msg: Message JSON.parse(raw) const cached pending.value.get(msg.id) if (cached) { cached.status ack pending.value.delete(msg.id) } else { // 客服端新消息 list.value.push(msg) } }) return { list, push, status } }3. 幂等去重MessageID 是钥匙服务端可能重复推送重发补偿前端必须在 reducer 里过滤const uniqueList computed(() { const seen new Setstring() return list.value.filter(m { if (seen.has(m.id)) return false seen.add(m.id) return true }) })性能优化长列表不卡才是真爱1. 虚拟滚动只渲染可视区template div refviewport classh-96 overflow-auto div :stylespacerStyle div v-form in renderList :keym.id classmsg-row MsgBubble :msgm / /div /div /div /template script setup langts import { useVirtualList } from vueuse/core const { list } useChat(...) const { containerProps, wrapperProps, scrollTo } useVirtualList(list, { itemHeight: 72, // 预估单行高度 overscan: 5 }) /script2. Intersection Observer 自动滚动到底const anchor refHTMLElement() useIntersectionObserver(anchor, ([{ isIntersecting }]) { if (isIntersecting) scrollTo(list.value.length - 1) })3. 状态快照刷新也不丢watchThrottled( list, () { localStorage.setItem(chat_snapshot, JSON.stringify(list.value)) }, { throttle: 1000, deep: true } ) onMounted(() { const snap localStorage.getItem(chat_snapshot) if (snap) list.value JSON.parse(snap) })注意 throttle 与 debounce区别throttle固定间隔执行适合高频采样。debounce尾调用触发适合输入框。这里选 throttle保证每秒至少存一次异常刷新最多丢 1 s 消息。避坑指南那些线上才遇到的怪毛病1. 跨域Nginx 一把梭location /ws { proxy_pass http://chat-svc:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Origin ; }前端new WebSocket(wss://yourdomain/ws)即可不用纠结 Cookie。2. 大模型流式响应别每次都 setState后端 SSE 转 WebSocket 分段推送前端把 chunk 拼接到同一条 message.content框架层再做一次细粒度 debounce50 ms刷新视图避免 Vue 的响应式疯狂计算 Diff。let buffer const renderDebounce debounce((msg: Message) { const target list.value.find(m m.id msg.id) if (target) target.content buffer }, 50) watch(data, chunk { buffer chunk renderDebounce(msg) })安全考量别让客服成 XSS 入口JWT 鉴权握手阶段把 token 放到 WebSocket 子协议头后端验证失败直接close(1008)。内容净化用户输入用DOMPurify.sanitize()过一遍再落库。AI 返回的 Markdown 先转 HTML 再净化最后交由v-html。指令白名单禁止script、iframe、object事件事件一律转义。完整流程回顾用户输入 → 本地幂等 ID → WebSocket 发送服务端 ACK → 前端更新状态 → 虚拟滚动自动定位客服 or 机器人回复 → 去重 → 流式渲染 → 本地快照异常断网 → Hook 自动重连 → 继续上一步上下文结论与开放思考整套方案跑在阿里云 2 vCPU 的小水管上压测 500 并发CPU 占用 38 %内存 220 MB消息延迟 P99 低于 120 ms已撑住公司 30 % 的日活客服流量。但线上永远有新坑“如何设计离线消息同步策略”当用户关掉网页、APP 杀进程再到另一端登录未读消息该怎么聚合、去重、排序欢迎评论区一起头脑风暴也许你的思路就是下一篇 PR 的主角。