| New file |
| | |
| | | <template> |
| | | <div class="call-container"> |
| | | <div class="content-wrapper"> |
| | | <div class="input-group"> |
| | | <div class="input-item"> |
| | | <span class="input-label">我的 userId:</span> |
| | | <input v-model="uid" class="input-field" /> |
| | | </div> |
| | | |
| | | <div class="input-item"> |
| | | <span class="input-label">对方 userId:</span> |
| | | <input v-model="peerUid" class="input-field" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="button-group"> |
| | | <button @click="connectWS" :disabled="connected" class="btn btn-connect">连接WS</button> |
| | | </div> |
| | | |
| | | <div class="button-group"> |
| | | <button @click="requestCall" :disabled="!connected || state!=='idle'" class="btn btn-call">呼叫</button> |
| | | |
| | | <button v-if="state==='ringing'" @click="acceptCall" class="btn btn-accept">接听</button> |
| | | <button v-if="state==='ringing'" @click="rejectCall" class="btn btn-reject">拒绝</button> |
| | | |
| | | <button @click="hangup" :disabled="!connected || (state!=='calling' && state!=='in-call')" class="btn btn-hangup">挂断</button> |
| | | </div> |
| | | |
| | | <div class="status-group"> |
| | | <strong class="status-text">状态:<span :style="{color: getStateColor(state)}">{{ state }}</span></strong> |
| | | <strong v-if="state==='in-call'" class="status-text">通话时长:{{ durationText }}</strong> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="tip-message"> |
| | | <small>提示:若 getUserMedia 不可用,请用 https 或 localhost 访问页面。</small> |
| | | </div> |
| | | |
| | | <div class="log-container"> |
| | | <div class="log-box"> |
| | | <div class="log-title">日志信息:</div> |
| | | <pre class="log-content">{{ logText }}</pre> |
| | | </div> |
| | | </div> |
| | | |
| | | <audio ref="remoteAudio" autoplay class="hidden-audio"></audio> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onBeforeUnmount, onMounted } from 'vue' |
| | | |
| | | /** ✅ 你的 WS 地址前缀(后面拼 userId) */ |
| | | const WS_BASE = 'wss://wrj.shuixiongit.com/ws/chat?userId=' |
| | | |
| | | // 解析URL参数 |
| | | const parseUrlParams = () => { |
| | | const url = new URL(window.location.href) |
| | | const paramsStr = url.searchParams.get('params') |
| | | if (paramsStr) { |
| | | try { |
| | | const params = JSON.parse(decodeURIComponent(paramsStr)) |
| | | if (params.peerUid) { |
| | | peerUid.value = String(params.peerUid) |
| | | log('🔗 从URL参数获取peerUid:', params.peerUid) |
| | | } |
| | | } catch (e) { |
| | | log('❌ 解析URL参数失败:', String(e)) |
| | | } |
| | | } |
| | | } |
| | | |
| | | const uid = ref('3') |
| | | const peerUid = ref('2') |
| | | |
| | | const connected = ref(false) |
| | | const state = ref('idle') // idle | calling | ringing | in-call |
| | | const logText = ref('') |
| | | const remoteAudio = ref(null) |
| | | |
| | | /** |
| | | * 根据状态返回对应颜色 |
| | | */ |
| | | const getStateColor = (state) => { |
| | | const colors = { |
| | | 'idle': '#666', |
| | | 'calling': '#2196F3', |
| | | 'ringing': '#FF9800', |
| | | 'in-call': '#4CAF50' |
| | | } |
| | | return colors[state] || '#666' |
| | | } |
| | | |
| | | let ws = null |
| | | let pc = null |
| | | let localStream = null |
| | | const pendingCandidates = [] |
| | | |
| | | // 来电暂存 |
| | | let incomingFrom = null |
| | | let acceptedByMe = false // 我是否已经点了接听 |
| | | let offeredByPeer = false // 是否已收到对方 offer(用于流程判断) |
| | | |
| | | // 计时 |
| | | let timer = null |
| | | const seconds = ref(0) |
| | | const durationText = computed(() => { |
| | | const m = String(Math.floor(seconds.value / 60)).padStart(2, '0') |
| | | const s = String(seconds.value % 60).padStart(2, '0') |
| | | return `${m}:${s}` |
| | | }) |
| | | function startTimer() { |
| | | stopTimer() |
| | | seconds.value = 0 |
| | | timer = setInterval(() => seconds.value++, 1000) |
| | | } |
| | | function stopTimer() { |
| | | if (timer) clearInterval(timer) |
| | | timer = null |
| | | } |
| | | |
| | | // 心跳 |
| | | let pingTimer = null |
| | | function startPing() { |
| | | stopPing() |
| | | // 每 25 秒发一次 ping(你后端有 PING/PONG) |
| | | pingTimer = setInterval(() => { |
| | | if (connected.value) send('ping', 'system', null) |
| | | }, 25000) |
| | | } |
| | | function stopPing() { |
| | | if (pingTimer) clearInterval(pingTimer) |
| | | pingTimer = null |
| | | } |
| | | |
| | | function log(...args) { |
| | | const line = args.map(v => (typeof v === 'string' ? v : JSON.stringify(v))).join(' ') |
| | | logText.value += `[${new Date().toLocaleTimeString()}] ${line}\n` |
| | | console.log(...args) |
| | | } |
| | | |
| | | /** |
| | | * ✅ 严格按后端 ChatMessage 字段发: |
| | | * { type, from, to, payload, timestamp } |
| | | * 注意:后端会用 session 的 userId 覆盖 from,但我们带上也没坏处 |
| | | */ |
| | | function send(type, to, payload) { |
| | | if (!type) return |
| | | if (!ws || ws.readyState !== WebSocket.OPEN) return |
| | | |
| | | const msg = { |
| | | type, // "call/accept/busy/offer/answer/candidate/hangup/ping" |
| | | from: String(uid.value), |
| | | to: String(to), |
| | | payload: payload ?? null, |
| | | timestamp: Date.now(), |
| | | } |
| | | ws.send(JSON.stringify(msg)) |
| | | } |
| | | |
| | | /* ---------------- WebRTC ---------------- */ |
| | | |
| | | function createPC() { |
| | | pc = new RTCPeerConnection({ |
| | | iceServers: [{ urls: 'stun:stun.l.google.com:19302' }], |
| | | }) |
| | | |
| | | pc.onicecandidate = (e) => { |
| | | if (e.candidate) { |
| | | send('candidate', peerUid.value, { candidate: e.candidate.toJSON ? e.candidate.toJSON() : e.candidate }) |
| | | } |
| | | } |
| | | |
| | | pc.ontrack = (e) => { |
| | | log('✅ 收到远端音频流') |
| | | const stream = e.streams[0] |
| | | if (remoteAudio.value) { |
| | | remoteAudio.value.srcObject = stream |
| | | remoteAudio.value.play().catch(() => {}) |
| | | } |
| | | } |
| | | |
| | | pc.onconnectionstatechange = () => { |
| | | log('pc.connectionState =', pc.connectionState) |
| | | } |
| | | } |
| | | |
| | | async function getLocalAudio() { |
| | | if (localStream) return localStream |
| | | |
| | | if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { |
| | | log('❌ 当前环境不支持 getUserMedia:请使用 https 或 localhost 打开页面') |
| | | throw new Error('getUserMedia not available') |
| | | } |
| | | |
| | | try { |
| | | localStream = await navigator.mediaDevices.getUserMedia({ audio: true }) |
| | | log('✅ 已获取本地麦克风') |
| | | return localStream |
| | | } catch (e) { |
| | | log('❌ 获取麦克风失败:', String(e)) |
| | | throw e |
| | | } |
| | | } |
| | | |
| | | /** ✅ 关键:只 addTrack 一次,避免 “sender already exists” */ |
| | | async function ensureLocalTracksAdded() { |
| | | if (!pc) createPC() |
| | | const stream = await getLocalAudio() |
| | | |
| | | const existingTrackIds = new Set( |
| | | pc.getSenders().map(s => (s.track ? s.track.id : null)).filter(Boolean) |
| | | ) |
| | | |
| | | stream.getTracks().forEach(track => { |
| | | if (!existingTrackIds.has(track.id)) { |
| | | pc.addTrack(track, stream) |
| | | log('addTrack ok:', track.id) |
| | | } else { |
| | | // log('skip addTrack:', track.id) |
| | | } |
| | | }) |
| | | |
| | | return stream |
| | | } |
| | | |
| | | async function flushCandidates() { |
| | | if (!pc || !pc.remoteDescription) return |
| | | while (pendingCandidates.length) { |
| | | const c = pendingCandidates.shift() |
| | | try { |
| | | await pc.addIceCandidate(new RTCIceCandidate(c)) |
| | | } catch (e) { |
| | | log('addIceCandidate failed:', String(e)) |
| | | } |
| | | } |
| | | } |
| | | |
| | | /* ---------------- 信令处理 ---------------- */ |
| | | |
| | | async function onSignal(msg) { |
| | | if (!msg) return |
| | | const t = (msg.type || '').toString() |
| | | |
| | | // ✅ 忽略后端回显给自己的消息(你的后端会回显 sender) |
| | | if (msg.from && String(msg.from) === String(uid.value)) { |
| | | return |
| | | } |
| | | |
| | | // system 消息:login/pong/busy 仅记录 |
| | | if (msg.from === 'system') { |
| | | log('system msg:', msg) |
| | | return |
| | | } |
| | | |
| | | if (!t) return |
| | | |
| | | if (t === 'call') { |
| | | // 收到来电:弹接听按钮 |
| | | incomingFrom = String(msg.from) |
| | | peerUid.value = incomingFrom |
| | | acceptedByMe = false |
| | | offeredByPeer = false |
| | | |
| | | state.value = 'ringing' |
| | | log('📞 收到来电 call,来自', incomingFrom) |
| | | return |
| | | } |
| | | |
| | | if (t === 'accept') { |
| | | // 主叫收到 accept:开始 offer |
| | | log('✅ 对方接听 accept,开始建立连接(offer)') |
| | | await startOffer() |
| | | return |
| | | } |
| | | |
| | | if (t === 'busy') { |
| | | log('❌ 对方忙线/拒绝') |
| | | cleanup(false) |
| | | return |
| | | } |
| | | |
| | | if (t === 'offer') { |
| | | // 被叫收到 offer:只有点击接听后才真正应答(你要求“先点接听”) |
| | | offeredByPeer = true |
| | | incomingFrom = String(msg.from) |
| | | peerUid.value = incomingFrom |
| | | |
| | | if (!acceptedByMe) { |
| | | state.value = 'ringing' |
| | | log('📩 收到 offer(但未接听),已等待用户点击接听') |
| | | // 暂存 offer 到一个变量 |
| | | lastOfferSdp = msg.payload?.sdp |
| | | return |
| | | } |
| | | |
| | | // 已接听:直接 answer |
| | | await answerOffer(msg.payload?.sdp, incomingFrom) |
| | | return |
| | | } |
| | | |
| | | if (t === 'answer') { |
| | | log('✅ 收到 answer,通话建立') |
| | | if (!pc) createPC() |
| | | await pc.setRemoteDescription(new RTCSessionDescription(msg.payload?.sdp)) |
| | | await flushCandidates() |
| | | |
| | | state.value = 'in-call' |
| | | startTimer() |
| | | return |
| | | } |
| | | |
| | | if (t === 'candidate') { |
| | | const c = msg.payload?.candidate |
| | | if (!c) return |
| | | if (pc && pc.remoteDescription) { |
| | | await pc.addIceCandidate(new RTCIceCandidate(c)) |
| | | } else { |
| | | pendingCandidates.push(c) |
| | | } |
| | | return |
| | | } |
| | | |
| | | if (t === 'hangup') { |
| | | log('📴 对方挂断') |
| | | cleanup(false) |
| | | return |
| | | } |
| | | |
| | | if (t === 'pong') { |
| | | // 心跳响应 |
| | | // log('pong') |
| | | return |
| | | } |
| | | } |
| | | |
| | | // 暂存 offer(用于“先点接听再 answer”) |
| | | let lastOfferSdp = null |
| | | |
| | | /* ---------------- 业务操作 ---------------- */ |
| | | |
| | | function connectWS() { |
| | | if (ws) ws.close() |
| | | |
| | | ws = new WebSocket(WS_BASE + encodeURIComponent(uid.value)) |
| | | |
| | | ws.onopen = () => { |
| | | connected.value = true |
| | | log('WS 已连接 userId=', uid.value) |
| | | startPing() |
| | | } |
| | | |
| | | ws.onclose = () => { |
| | | connected.value = false |
| | | log('WS 已关闭') |
| | | stopPing() |
| | | } |
| | | |
| | | ws.onerror = (e) => log('WS error', e) |
| | | |
| | | ws.onmessage = (e) => { |
| | | const msg = JSON.parse(e.data) |
| | | log('收到信令', msg) |
| | | onSignal(msg) |
| | | } |
| | | } |
| | | |
| | | function requestCall() { |
| | | state.value = 'calling' |
| | | incomingFrom = null |
| | | acceptedByMe = false |
| | | offeredByPeer = false |
| | | lastOfferSdp = null |
| | | |
| | | send('call', peerUid.value, null) |
| | | log('➡️ 发起呼叫 call 给', peerUid.value) |
| | | } |
| | | |
| | | function acceptCall() { |
| | | if (!incomingFrom) return |
| | | acceptedByMe = true |
| | | |
| | | // 先告诉对方我接听了(后端会把双方置忙) |
| | | send('accept', incomingFrom, null) |
| | | log('✅ 已点击接听,发送 accept 给', incomingFrom) |
| | | |
| | | state.value = 'calling' |
| | | |
| | | // 如果 offer 已经提前到达(我们暂存了),立刻 answer |
| | | if (lastOfferSdp) { |
| | | answerOffer(lastOfferSdp, incomingFrom) |
| | | lastOfferSdp = null |
| | | } |
| | | } |
| | | |
| | | function rejectCall() { |
| | | if (!incomingFrom) return |
| | | |
| | | // 你后端没有 reject,用 busy 表示拒绝/不可接听 |
| | | send('busy', incomingFrom, null) |
| | | log('❌ 已拒绝来电,发送 busy 给', incomingFrom) |
| | | |
| | | incomingFrom = null |
| | | acceptedByMe = false |
| | | offeredByPeer = false |
| | | lastOfferSdp = null |
| | | state.value = 'idle' |
| | | } |
| | | |
| | | async function startOffer() { |
| | | if (!pc) createPC() |
| | | |
| | | // ✅ 不会重复 addTrack |
| | | await ensureLocalTracksAdded() |
| | | |
| | | const offer = await pc.createOffer() |
| | | await pc.setLocalDescription(offer) |
| | | |
| | | send('offer', peerUid.value, { sdp: pc.localDescription }) |
| | | log('➡️ 已发送 offer 给', peerUid.value) |
| | | } |
| | | |
| | | async function answerOffer(offerSdp, from) { |
| | | if (!offerSdp) { |
| | | log('❌ offer sdp 为空,无法接听') |
| | | return |
| | | } |
| | | if (!pc) createPC() |
| | | |
| | | await pc.setRemoteDescription(new RTCSessionDescription(offerSdp)) |
| | | await flushCandidates() |
| | | |
| | | await ensureLocalTracksAdded() |
| | | |
| | | const answer = await pc.createAnswer() |
| | | await pc.setLocalDescription(answer) |
| | | |
| | | send('answer', from, { sdp: pc.localDescription }) |
| | | log('⬅️ 已发送 answer 给', from) |
| | | |
| | | state.value = 'in-call' |
| | | startTimer() |
| | | } |
| | | |
| | | function hangup() { |
| | | cleanup(true) |
| | | } |
| | | |
| | | /* ---------------- 清理 ---------------- */ |
| | | |
| | | function cleanup(sendToPeer) { |
| | | try { |
| | | if (sendToPeer) send('hangup', peerUid.value, null) |
| | | } catch {} |
| | | |
| | | stopTimer() |
| | | |
| | | if (pc) { |
| | | pc.getSenders().forEach(s => s.track && s.track.stop()) |
| | | pc.close() |
| | | } |
| | | if (localStream) { |
| | | localStream.getTracks().forEach(t => t.stop()) |
| | | } |
| | | |
| | | pc = null |
| | | localStream = null |
| | | pendingCandidates.length = 0 |
| | | |
| | | incomingFrom = null |
| | | acceptedByMe = false |
| | | offeredByPeer = false |
| | | lastOfferSdp = null |
| | | |
| | | state.value = 'idle' |
| | | } |
| | | |
| | | onMounted(() => { |
| | | // 解析URL参数 |
| | | parseUrlParams() |
| | | }) |
| | | |
| | | onBeforeUnmount(() => { |
| | | cleanup(false) |
| | | stopPing() |
| | | if (ws) ws.close() |
| | | }) |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .call-container { |
| | | padding: 20px; |
| | | background-color: #f5f5f5; |
| | | min-height: 100vh; |
| | | font-family: Arial, sans-serif; |
| | | } |
| | | |
| | | .content-wrapper { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 15px; |
| | | max-width: 600px; |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | .input-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .input-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | .input-label { |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | .input-field { |
| | | width: 120px; |
| | | padding: 8px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .button-group { |
| | | display: flex; |
| | | gap: 10px; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .btn { |
| | | padding: 10px 20px; |
| | | color: white; |
| | | border: none; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | transition: background-color 0.3s; |
| | | |
| | | &:disabled { |
| | | opacity: 0.6; |
| | | cursor: not-allowed; |
| | | } |
| | | } |
| | | |
| | | .btn-connect { |
| | | background-color: #4CAF50; |
| | | } |
| | | |
| | | .btn-call { |
| | | background-color: #2196F3; |
| | | } |
| | | |
| | | .btn-accept { |
| | | background-color: #4CAF50; |
| | | } |
| | | |
| | | .btn-reject { |
| | | background-color: #f44336; |
| | | } |
| | | |
| | | .btn-hangup { |
| | | background-color: #9E9E9E; |
| | | } |
| | | |
| | | .status-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 5px; |
| | | } |
| | | |
| | | .status-text { |
| | | font-size: 16px; |
| | | color: #333; |
| | | } |
| | | |
| | | .tip-message { |
| | | margin-top: 15px; |
| | | color: #666; |
| | | text-align: center; |
| | | } |
| | | |
| | | .log-container { |
| | | margin-top: 20px; |
| | | max-width: 600px; |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | } |
| | | |
| | | .log-box { |
| | | background-color: white; |
| | | border: 1px solid #ddd; |
| | | border-radius: 8px; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .log-title { |
| | | font-weight: bold; |
| | | color: #333; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .log-content { |
| | | max-height: 200px; |
| | | overflow: auto; |
| | | background-color: #fafafa; |
| | | padding: 10px; |
| | | border-radius: 4px; |
| | | font-size: 12px; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | .hidden-audio { |
| | | display: none; |
| | | } |
| | | </style> |