yml/kefu_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复会话安全与实时消息

Browse Source
This commit is contained in:
yml2213
2026-07-14 15:06:01 +08:00
parent 064af29d3b
commit 8cff2a5824
29 changed files with 1961 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/widgets/VisitorChat.tsx
+99 -34
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react'
import { useState, useEffect, useRef, useCallback } from 'react'
import { CloseOutlined, MessageOutlined, SmileOutlined, SendOutlined, StarFilled } from '@ant-design/icons'
interface Message {
@@ -10,6 +10,7 @@ interface Message {
const quickQuestions = ['产品功能介绍', '价格咨询', '售后服务', '合作咨询']
const STORAGE_KEY = 'kefu_widget_session'
const VISITOR_TOKEN_KEY = 'kefu_widget_visitor_token'
const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
const [open, setOpen] = useState(defaultOpen)
@@ -17,6 +18,7 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
const saved = localStorage.getItem(STORAGE_KEY)
return saved ? Number(saved) : null
})
const [visitorToken, setVisitorToken] = useState<string>(() => localStorage.getItem(VISITOR_TOKEN_KEY) || '')
const [messages, setMessages] = useState<Message[]>(() => {
const saved = localStorage.getItem(STORAGE_KEY + '_msgs')
return saved ? JSON.parse(saved) : []
@@ -25,31 +27,19 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
const [sending, setSending] = useState(false)
const [showRating, setShowRating] = useState(false)
const [rated, setRated] = useState(false)
const [sessionEnded, setSessionEnded] = useState(false)
const [ratingText, setRatingText] = useState('')
const pollRef = useRef<number | null>(null)
const initRef = useRef(false)
const initSession = async () => {
if (initRef.current && sessionId) return
initRef.current = true
try {
const res = await fetch(`/api/widget/init?channel_key=WK_8a3f2e&visitor_name=客服云访客`, { method: 'POST' })
const json = await res.json()
if (json.code === 0) {
const sid = json.data.session_id
setSessionId(sid)
localStorage.setItem(STORAGE_KEY, String(sid))
await loadMessages(sid)
}
} catch (e) {
console.error('Init failed:', e)
}
}
const loadMessages = async (sid?: number) => {
const loadMessages = useCallback(async (sid?: number, token?: string) => {
const s = sid || sessionId
if (!s) return
const visitorCredential = token || visitorToken || localStorage.getItem(VISITOR_TOKEN_KEY) || ''
if (!s || !visitorCredential) return
try {
const res = await fetch(`/api/widget/messages?session_id=${s}`)
const res = await fetch(`/api/widget/messages?session_id=${s}`, {
headers: { 'X-Visitor-Token': visitorCredential },
})
const json = await res.json()
if (json.code === 0 && json.data && json.data.length > 0) {
const msgs: Message[] = json.data.map((m: any) => ({
@@ -62,20 +52,70 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
localStorage.setItem(STORAGE_KEY + '_msgs', JSON.stringify(msgs))
}
} catch { /* ignore */ }
}
}, [sessionId, visitorToken])
const initSession = useCallback(async () => {
if (sessionId && visitorToken) {
await loadMessages(sessionId, visitorToken)
return
}
if (initRef.current) return
initRef.current = true
try {
const res = await fetch(`/api/widget/init?channel_key=WK_8a3f2e&visitor_name=客服云访客`, { method: 'POST' })
const json = await res.json()
if (json.code === 0) {
const sid = json.data.session_id
const token = json.data.visitor_token
setSessionId(sid)
setVisitorToken(token)
localStorage.setItem(STORAGE_KEY, String(sid))
localStorage.setItem(VISITOR_TOKEN_KEY, token)
await loadMessages(sid, token)
}
} catch (e) {
console.error('Init failed:', e)
}
}, [sessionId, visitorToken, loadMessages])
useEffect(() => {
if (open && !initRef.current) {
if (open) {
initSession()
}
}, [open, sessionId])
}, [open, initSession])
useEffect(() => {
if (sessionId && open) {
if (sessionId && visitorToken && open) {
pollRef.current = window.setInterval(() => loadMessages(), 3000)
return () => { if (pollRef.current) clearInterval(pollRef.current) }
}
}, [sessionId, open])
}, [sessionId, visitorToken, open, loadMessages])
useEffect(() => {
if (!sessionId || !visitorToken || !open) return
const scheme = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
const socket = new WebSocket(
`${scheme}//${window.location.host}/api/widget/ws?session_id=${sessionId}`,
['kefu-visitor-v1', visitorToken],
)
socket.onmessage = (event) => {
try {
const payload = JSON.parse(event.data)
if (payload.session_id === sessionId && (payload.type === 'message' || payload.type === 'session_updated')) {
if (payload.type === 'session_updated' && payload.data?.status === 'ended') {
setSessionEnded(true)
setShowRating(true)
}
loadMessages(sessionId, visitorToken)
}
} catch {
// 忽略格式错误的实时消息
}
}
return () => {
socket.close()
}
}, [sessionId, visitorToken, open, loadMessages])
const sendMessage = async (text: string) => {
if (!text.trim() || sending) return
@@ -89,11 +129,11 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
}
setMessages(prev => [...prev, localMsg])
if (sessionId) {
if (sessionId && visitorToken) {
try {
await fetch('/api/widget/message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
headers: { 'Content-Type': 'application/json', 'X-Visitor-Token': visitorToken },
body: JSON.stringify({ session_id: sessionId, content, type: 'text' }),
})
loadMessages(sessionId)
@@ -104,13 +144,30 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
const handleOpen = () => {
setOpen(true)
setShowRating(false)
setRated(false)
setShowRating(sessionEnded && !rated)
}
const handleClose = () => {
setOpen(false)
if (!rated) setShowRating(true)
if (sessionEnded && !rated) setShowRating(true)
}
const submitRating = async (score: number) => {
if (!sessionId || !visitorToken || rated) return
try {
const res = await fetch('/api/widget/rating', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Visitor-Token': visitorToken },
body: JSON.stringify({ session_id: sessionId, score, text: ratingText }),
})
const json = await res.json()
if (json.code === 0) {
setRated(true)
setShowRating(false)
}
} catch {
// 评价失败时保留弹窗，允许访客稍后重试
}
}
return (
@@ -173,9 +230,9 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
value={input}
onChange={e => setInput(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') sendMessage(input) }}
disabled={sending || !sessionId}
disabled={sending || !sessionId || sessionEnded}
/>
<SendOutlined className={`cursor-pointer ${sessionId ? 'text-blue-500 hover:text-blue-600' : 'text-neutral-300'}`} onClick={() => sendMessage(input)} />
<SendOutlined className={`cursor-pointer ${sessionId && !sessionEnded ? 'text-blue-500 hover:text-blue-600' : 'text-neutral-300'}`} onClick={() => sendMessage(input)} />
</div>
</div>
@@ -187,9 +244,17 @@ const VisitorChat = ({ defaultOpen = false }: { defaultOpen?: boolean }) => {
<div className="flex justify-center gap-1.5 mb-4">
{[1, 2, 3, 4, 5].map(star => (
<StarFilled key={star} className="text-2xl cursor-pointer text-neutral-200 hover:text-yellow-400 transition-colors"
onClick={() => { setRated(true); setShowRating(false) }} />
onClick={() => submitRating(star)} />
))}
</div>
<textarea
className="w-full rounded-lg border border-neutral-200 p-2 text-sm outline-none focus:border-blue-400 mb-3"
rows={3}
maxLength={500}
value={ratingText}
onChange={e => setRatingText(e.target.value)}
placeholder="可选：写下您的服务感受"
/>
<button onClick={() => setShowRating(false)} className="text-sm text-neutral-400 hover:text-neutral-600">跳过</button>
</div>
</div>