ws断线重联
This commit is contained in:
parent
9181ba419e
commit
8711fa9555
162
public/client.js
162
public/client.js
|
|
@ -11,89 +11,101 @@ export default class ClientList {
|
||||||
this.ul = List({})
|
this.ul = List({})
|
||||||
document.body.appendChild(this.ul)
|
document.body.appendChild(this.ul)
|
||||||
|
|
||||||
this.websocket.onmessage = async event => {
|
// 连接 WebSocket
|
||||||
const data = JSON.parse(event.data)
|
const linkStart = () => {
|
||||||
const channels_init = (webrtc) => {
|
const websocket = new WebSocket(`${protocol}://${host}/webrtc/music?name=${name}`)
|
||||||
return Object.entries(this.channels).map(([name, callback]) => {
|
websocket.onmessage = async event => {
|
||||||
const channel = webrtc.createDataChannel(name, { reliable: true })
|
const data = JSON.parse(event.data)
|
||||||
channel.onopen = callback.onopen
|
const channels_init = (webrtc) => {
|
||||||
channel.onclose = callback.onclose
|
return Object.entries(this.channels).map(([name, callback]) => {
|
||||||
channel.onerror = callback.onerror
|
const channel = webrtc.createDataChannel(name, { reliable: true })
|
||||||
channel.onmessage = callback.onmessage
|
channel.onopen = callback.onopen
|
||||||
return channel
|
channel.onclose = callback.onclose
|
||||||
})
|
channel.onerror = callback.onerror
|
||||||
}
|
channel.onmessage = callback.onmessage
|
||||||
const webrtc_init = () => {
|
return channel
|
||||||
const webrtc = new RTCPeerConnection()
|
})
|
||||||
webrtc.onicecandidate = event => {
|
|
||||||
if (event.candidate) {
|
|
||||||
this.websocket.send(JSON.stringify({
|
|
||||||
type: 'candidate',
|
|
||||||
id: data.id,
|
|
||||||
candidate: event.candidate
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
webrtc.ondatachannel = ({ channel }) => {
|
const webrtc_init = () => {
|
||||||
console.log('收到对方 datachannel', channel)
|
const webrtc = new RTCPeerConnection()
|
||||||
channel.onmessage = event => {
|
webrtc.onicecandidate = event => {
|
||||||
//console.log('收到对方 datachannel message', event)
|
if (event.candidate) {
|
||||||
if (this.channels[event.target.label]) {
|
websocket.send(JSON.stringify({
|
||||||
this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id))
|
type: 'candidate',
|
||||||
|
id: data.id,
|
||||||
|
candidate: event.candidate
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
webrtc.ondatachannel = ({ channel }) => {
|
||||||
|
console.log('收到对方 datachannel', channel)
|
||||||
|
channel.onmessage = event => {
|
||||||
|
//console.log('收到对方 datachannel message', event)
|
||||||
|
if (this.channels[event.target.label]) {
|
||||||
|
this.channels[event.target.label].onmessage(event, this.clientlist.find(x => x.id === data.id))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
webrtc.oniceconnectionstatechange = event => {
|
||||||
|
//console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
|
||||||
|
}
|
||||||
|
return webrtc
|
||||||
}
|
}
|
||||||
webrtc.oniceconnectionstatechange = event => {
|
if (data.type === 'list') {
|
||||||
//console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
|
//console.log('取得在线对端列表:', data)
|
||||||
|
const webrtc = webrtc_init()
|
||||||
|
const channels = channels_init(webrtc)
|
||||||
|
//console.log('发送给对方 offer')
|
||||||
|
const offer = await webrtc.createOffer()
|
||||||
|
await webrtc.setLocalDescription(offer)
|
||||||
|
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
||||||
|
websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
|
||||||
|
this.add(data)
|
||||||
|
return
|
||||||
}
|
}
|
||||||
return webrtc
|
if (data.type === 'push') {
|
||||||
|
//console.log('新上线客户端:', data)
|
||||||
|
return this.add(data)
|
||||||
|
}
|
||||||
|
if (data.type === 'pull') {
|
||||||
|
//console.log('移除客户端:', data)
|
||||||
|
return this.remove(data)
|
||||||
|
}
|
||||||
|
if (data.type === 'offer') {
|
||||||
|
//console.log('收到对方 offer', data)
|
||||||
|
const webrtc = webrtc_init()
|
||||||
|
const channels = channels_init(webrtc)
|
||||||
|
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
||||||
|
//console.log('发送给对方 answer')
|
||||||
|
await webrtc.setRemoteDescription(data.offer)
|
||||||
|
const answer = await webrtc.createAnswer()
|
||||||
|
await webrtc.setLocalDescription(answer)
|
||||||
|
websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer }))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (data.type === 'answer') {
|
||||||
|
//console.log('收到对方 answer', data)
|
||||||
|
const pc = this.clientlist.find(client => client.id === data.id).webrtc
|
||||||
|
await pc.setRemoteDescription(data.answer)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (data.type === 'candidate') {
|
||||||
|
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
|
||||||
|
const pc = this.clientlist.find(client => client.id === data.id).webrtc
|
||||||
|
await pc.addIceCandidate(data.candidate)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
console.log('收到未知数据:', data)
|
||||||
}
|
}
|
||||||
if (data.type === 'list') {
|
websocket.onclose = event => {
|
||||||
//console.log('取得在线对端列表:', data)
|
console.log('WebSocket 断线重连...')
|
||||||
const webrtc = webrtc_init()
|
setTimeout(() => {
|
||||||
const channels = channels_init(webrtc)
|
this.websocket = linkStart()
|
||||||
//console.log('发送给对方 offer')
|
}, 1000)
|
||||||
const offer = await webrtc.createOffer()
|
|
||||||
await webrtc.setLocalDescription(offer)
|
|
||||||
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
|
||||||
this.websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
|
|
||||||
this.add(data)
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
if (data.type === 'push') {
|
return websocket
|
||||||
//console.log('新上线客户端:', data)
|
|
||||||
return this.add(data)
|
|
||||||
}
|
|
||||||
if (data.type === 'pull') {
|
|
||||||
//console.log('移除客户端:', data)
|
|
||||||
return this.remove(data)
|
|
||||||
}
|
|
||||||
if (data.type === 'offer') {
|
|
||||||
//console.log('收到对方 offer', data)
|
|
||||||
const webrtc = webrtc_init()
|
|
||||||
const channels = channels_init(webrtc)
|
|
||||||
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
|
|
||||||
//console.log('发送给对方 answer')
|
|
||||||
await webrtc.setRemoteDescription(data.offer)
|
|
||||||
const answer = await webrtc.createAnswer()
|
|
||||||
await webrtc.setLocalDescription(answer)
|
|
||||||
this.websocket.send(JSON.stringify({ type: 'answer', id: data.id, answer }))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (data.type === 'answer') {
|
|
||||||
//console.log('收到对方 answer', data)
|
|
||||||
const pc = this.clientlist.find(client => client.id === data.id).webrtc
|
|
||||||
await pc.setRemoteDescription(data.answer)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (data.type === 'candidate') {
|
|
||||||
// console.log('收到 candidate 并将其添加到远程端', data.candidate)
|
|
||||||
const pc = this.clientlist.find(client => client.id === data.id).webrtc
|
|
||||||
await pc.addIceCandidate(data.candidate)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.log('收到未知数据:', data)
|
|
||||||
}
|
}
|
||||||
|
this.websocket = linkStart()
|
||||||
}
|
}
|
||||||
setChannel(name, option) {
|
setChannel(name, option) {
|
||||||
this.channels[name] = option
|
this.channels[name] = option
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue