广播消息

public/client.js

@@ -2,28 +2,36 @@ import { List, ListItem } from './weigets.js'
 
 export default class ClientList {
     constructor() {
+        this.EventListeners = {}
         const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
         const host = window.location.host
         this.websocket = new WebSocket(`${protocol}://${host}/webrtc/music`)
         this.clientlist = []
         this.ul = List({})
         document.body.appendChild(this.ul)
-        //this.websocket.onopen = event => {
-        //    console.log('clientlist websocket: onopen')
-        //    console.log('当连接建立时，服务器将逐一发送所有客户端信息')
-        //}
         this.websocket.onmessage = async event => {
             const data = JSON.parse(event.data)
-            if (data.type === 'list') {
+            const webrtc_init = () => {
-                console.log('取得在线对端列表:', data)
                 const webrtc = new RTCPeerConnection()
-                webrtc.createDataChannel('music')
                 webrtc.onicecandidate = event => {
-                    console.log('clientlist onicecandidate E', event)
                     if (event.candidate) {
                         this.websocket.send(JSON.stringify({ type: 'candidate', id: data.id, candidate: event.candidate }))
                     }
                 }
+                webrtc.ondatachannel = event => {
+                    console.log('收到对方 datachannel', event.channel)
+                    event.channel.onmessage = event => {
+                        console.log('收到对方 datachannel message', event.data)
+                    }
+                }
+                webrtc.oniceconnectionstatechange = event => {
+                    console.log('WebRTC ICE 连接状态更改:', webrtc.iceConnectionState)
+                }
+                return webrtc
+            }
+            if (data.type === 'list') {
+                console.log('取得在线对端列表:', data)
+                const webrtc = webrtc_init()
                 console.log('发送给对方 offer')
                 const offer = await webrtc.createOffer()
                 await webrtc.setLocalDescription(offer)
@@ -41,14 +49,7 @@ export default class ClientList {
             }
             if (data.type === 'offer') {
                 console.log('收到对方 offer', data)
-                const webrtc = new RTCPeerConnection()
+                const webrtc = webrtc_init()
-                webrtc.createDataChannel('music')
-                webrtc.onicecandidate = event => {
-                    console.log('clientlist onicecandidate X', event)
-                    if (event.candidate) {
-                        this.websocket.send(JSON.stringify({ type: 'candidate', id: data.id, candidate: event.candidate }))
-                    }
-                }
                 this.clientlist.push({ id: data.id, name: data.name, webrtc })
                 console.log('发送给对方 answer')
                 await webrtc.setRemoteDescription(data.offer)
@@ -88,5 +89,22 @@ export default class ClientList {
     get(id) { }
     getAll() { }
     clear() { }
-    on(event, callback) { }
+    // 添加回调函数
+    on(name, callback) {
+        this.EventListeners[name] = callback
+    }
+    // 执行回调函数
+    _on(name, ...args) {
+        if (this.EventListeners[name]) {
+            this.EventListeners[name](...args)
+        }
+    }
+    // 通过指定通道发送数据(广播)
+    send(name, data) {
+        console.log('广播数据:', data, '到通道:', name, '到所有客户端')
+        this.clientlist.forEach(client => {
+            const channel = client.webrtc.getDataChannel(name) ?? client.webrtc.createDataChannel(name)
+            channel.send(data)
+        })
+    }
 }

public/index.html

@@ -18,55 +18,17 @@
         
         // 初始化音乐列表
         const musicList = new MusicList()
+        musicList.on('play', item => {
+            console.log('播放音乐', item)
+        })
 
         // 初始化客户端列表
         const clientList = new ClientList()
 
-        //// 初始化音乐频道
+        // 先拉取所有对方的音乐列表, 对比去重, 拉取音乐数据
-        //const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+        // 主动发送自己的音乐列表, 对比去重, 发送音乐数据
-        //const host = window.location.host
+        console.log('musicList.list:', musicList)
-        //const ws = new WebSocket(`${protocol}://${host}/webrtc/music`)
+        clientList.send('music-list', '23333')
-        //ws.onopen = function () {
-        //    console.log('music ws open')
-        //}
-        //ws.onmessage = function (event) {
-        //    const data = JSON.parse(event.data)
-        //    console.log('ws message:', data)
-        //    if (data.type === 'push') {
-        //        console.log('收到 type:push 将设备增加', data.id)
-        //        clientList.add(data.id, data.channel)
-        //        return
-        //    }
-        //    if (data.type === 'pull') {
-        //        console.log('收到 type:pull 将设备删除', data.id)
-        //        clientList.remove(data)
-        //        return
-        //    }
-        //    if (data.type === 'error') {
-        //        console.log('收到 type:error 没什么可操作的', data.id)
-        //        return
-        //    }
-        //    if (data.offer) {
-        //        console.log('收到 offer 并将其设置为远程描述')
-        //        //clientList.setRemoteDescription(data)
-        //        pc.setRemoteDescription(new RTCSessionDescription(data.offer))
-        //        // 创建SDP answer并将其设置为本地描述, 发送给远程端
-        //        pc.createAnswer().then(function (answer) {
-        //            pc.setLocalDescription(answer);
-        //            ws.send(JSON.stringify({ answer }))
-        //        })
-        //        return
-        //    }
-        //    if (data.answer) {
-        //        console.log('收到 answer 并将其设置为远程描述')
-        //        pc.setRemoteDescription(new RTCSessionDescription(data.answer))
-        //        return
-        //    }
-        //    if (data.candidate) {
-        //        console.log('收到 candidate 并将其添加到远程端')
-        //        pc.addIceCandidate(new RTCIceCandidate(data.candidate))
-        //    }
-        //}
 
         // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
         const music = async function () {