diff --git a/taoyao-client-web/src/components/Taoyao.js b/taoyao-client-web/src/components/Taoyao.js index 6153a6d..ef851b7 100644 --- a/taoyao-client-web/src/components/Taoyao.js +++ b/taoyao-client-web/src/components/Taoyao.js @@ -2,11 +2,11 @@ import * as mediasoupClient from "mediasoup-client"; import { config, defaultAudioConfig, - defaultVideoConfig, - defaultShareScreenConfig, - defaultSvcEncodings, - defaultSimulcastEncodings, defaultRTCPeerConnectionConfig, + defaultShareScreenConfig, + defaultSimulcastEncodings, + defaultSvcEncodings, + defaultVideoConfig, } from "./Config.js"; /** @@ -22,19 +22,20 @@ const SUCCESS_MESSAGE = "成功"; * 信令协议 */ const protocol = { + // 当前索引 index : 0, // 最大索引 maxIndex : 999, // 终端索引 clientIndex: 99999, + /** * @returns 索引 */ buildId() { - const me = this; - if (++me.index > me.maxIndex) { - me.index = 0; + if (++this.index > this.maxIndex) { + this.index = 0; } const date = new Date(); return ( @@ -42,10 +43,11 @@ const protocol = { 1000000000000 * date.getHours() + 10000000000 * date.getMinutes() + 100000000 * date.getSeconds() + - 1000 * me.clientIndex + - me.index + 1000 * this.clientIndex + + this.index ); }, + /** * @param {*} signal 信令标识 * @param {*} body 消息主体 @@ -55,11 +57,10 @@ const protocol = { * @returns 信令消息 */ buildMessage(signal, body = {}, id, v) { - const me = this; const message = { header: { v : v || config.signal.version, - id : id || me.buildId(), + id : id || this.buildId(), signal: signal, }, body: body, @@ -77,6 +78,7 @@ const taoyaoProtocol = protocol; * 信令通道 */ const signalChannel = { + // 桃夭信令 taoyao : null, // 信令通道 @@ -99,34 +101,35 @@ const signalChannel = { minReconnectionDelay: 5 * 1000, // 最大重连时间 maxReconnectionDelay: 30 * 1000, + /** * 心跳 */ heartbeat() { - const me = this; - if (me.heartbeatTimer) { - clearTimeout(me.heartbeatTimer); + if (this.heartbeatTimer) { + clearTimeout(this.heartbeatTimer); } - me.heartbeatTimer = setTimeout(async () => { - if (me.connected()) { + this.heartbeatTimer = setTimeout(async () => { + if (this.connected()) { const battery = await navigator.getBattery(); - me.taoyao.push(protocol.buildMessage("client::heartbeat", { + this.taoyao.push(protocol.buildMessage("client::heartbeat", { battery : battery.level * 100, charging: battery.charging, })); - me.heartbeat(); + this.heartbeat(); } else { - console.warn("心跳失败", me.address); + console.warn("心跳失败", this.address); } - }, me.heartbeatTime); + }, this.heartbeatTime); }, + /** * @returns 是否连接成功 */ connected() { - const me = this; - return me.channel && me.channel.readyState === WebSocket.OPEN; + return this.channel && this.channel.readyState === WebSocket.OPEN; }, + /** * 连接信令 * @@ -136,105 +139,102 @@ const signalChannel = { * @returns Promise */ async connect(address, reconnection = true) { - const me = this; - if (me.connected()) { + if (this.connected()) { this.taoyao.connect = true; return new Promise((resolve, reject) => { - resolve(me.channel); + resolve(this.channel); }); } else { this.taoyao.connect = false; } - me.address = address; - me.reconnection = reconnection; + this.address = address; + this.reconnection = reconnection; return new Promise((resolve, reject) => { - console.debug("连接信令通道", me.address); - me.channel = new WebSocket(me.address); - me.channel.onopen = async () => { - console.info("打开信令通道", me.address); + console.debug("连接信令通道", this.address); + this.channel = new WebSocket(this.address); + this.channel.onopen = async () => { + console.debug("打开信令通道", this.address); const battery = await navigator.getBattery(); - const { body } = await me.taoyao.request(protocol.buildMessage("client::register", { - name : me.taoyao.name, - clientId : me.taoyao.clientId, + const { + body + } = await this.taoyao.request(protocol.buildMessage("client::register", { + name : this.taoyao.name, + clientId : this.taoyao.clientId, clientType: config.signal.clientType, - username : me.taoyao.username, - password : me.taoyao.password, + username : this.taoyao.username, + password : this.taoyao.password, battery : battery.level * 100, charging : battery.charging, })); - protocol.clientIndex = body.index; - console.info("终端注册成功", protocol.clientIndex); - me.reconnectionTimeout = me.minReconnectionDelay; - me.taoyao.connect = true; - me.heartbeat(); - resolve(me.channel); + protocol.clientIndex = body.index; + this.taoyao.connect = true; + this.reconnectionTimeout = this.minReconnectionDelay; + console.debug("终端注册成功", protocol.clientIndex); + this.heartbeat(); + resolve(this.channel); }; - me.channel.onclose = async () => { - console.warn("信令通道关闭", me.channel); - me.taoyao.connect = false; - if(!me.connected()) { - await me.taoyao.closeRoomMedia(); - await me.taoyao.closeSessionMedia(); - } - if (me.reconnection) { - me.reconnect(); + this.channel.onclose = async () => { + console.warn("信令通道关闭", this.channel); + this.taoyao.connect = false; + await this.taoyao.closeRoomMedia(); + await this.taoyao.closeSessionMedia(); + if (this.reconnection) { + this.reconnect(); } // 不要失败回调 }; - me.channel.onerror = async (e) => { - console.error("信令通道异常", me.channel, e); + this.channel.onerror = async (e) => { + console.error("信令通道异常", this.channel, e); // 不要失败回调 }; - me.channel.onmessage = async (e) => { + this.channel.onmessage = async (e) => { const content = e.data; try { console.debug("信令通道消息", content); - me.taoyao.on(JSON.parse(content)); + this.taoyao.on(JSON.parse(content)); } catch (error) { console.error("处理信令通道消息异常", e, error); } }; }); }, + /** * 重连信令 */ reconnect() { - const me = this; - if ( - me.lockReconnect || - me.taoyao.connect || - me.connected() - ) { + if (this.connected() || this.lockReconnect) { return; } - me.lockReconnect = true; - if (me.reconnectTimer) { - clearTimeout(me.reconnectTimer); + this.lockReconnect = true; + if (this.reconnectTimer) { + clearTimeout(this.reconnectTimer); } // 定时重连 - me.reconnectTimer = setTimeout(() => { - console.info("重连信令通道", me.address); - me.connect(me.address, me.reconnection); - me.lockReconnect = false; - }, me.reconnectionTimeout); - me.reconnectionTimeout = Math.min( - me.reconnectionTimeout + me.minReconnectionDelay, - me.maxReconnectionDelay + this.reconnectTimer = setTimeout(() => { + console.debug("重连信令通道", this.address); + this.connect(this.address, this.reconnection); + this.lockReconnect = false; + }, this.reconnectionTimeout); + // 设置重连时间 + this.reconnectionTimeout = Math.min( + this.reconnectionTimeout + this.minReconnectionDelay, + this.maxReconnectionDelay ); }, + /** * 关闭通道 */ close() { - const me = this; - console.info("关闭信令通道", me.address); - clearTimeout(me.heartbeatTimer); - clearTimeout(me.reconnectTimer); - me.reconnection = false; - me.taoyao.connect = false; - me.channel.close(); + console.debug("关闭信令通道", this.address); + clearTimeout(this.heartbeatTimer); + clearTimeout(this.reconnectTimer); + this.reconnection = false; + this.taoyao.connect = false; + this.channel.close(); }, + }; /** @@ -655,6 +655,7 @@ class Taoyao extends RemoteClient { */ async connectSignal(callback) { const me = this; + this.closed = false; me.callback = callback; signalChannel.taoyao = me; return await signalChannel.connect( @@ -3937,6 +3938,8 @@ class Taoyao extends RemoteClient { await this.closeSessionMedia(); signalChannel.close(); } + } export { Taoyao }; + diff --git a/taoyao-client-web/src/main.js b/taoyao-client-web/src/main.js index 82cbcce..05ea8e4 100644 --- a/taoyao-client-web/src/main.js +++ b/taoyao-client-web/src/main.js @@ -4,13 +4,13 @@ import { createApp } from "vue"; import "./assets/main.css"; import "element-plus/dist/index.css"; +const app = createApp(App); +app.use(ElementPlus); +app.mount("#app"); + console.info(` 中庭地白树栖鸦,冷露无声湿桂花。 今夜月明人尽望,不知秋思落谁家。 :: https://gitee.com/acgist/taoyao `); - -const app = createApp(App); -app.use(ElementPlus); -app.mount("#app"); diff --git a/taoyao-client-web/vite.config.js b/taoyao-client-web/vite.config.js index 72d9e46..4b6354d 100644 --- a/taoyao-client-web/vite.config.js +++ b/taoyao-client-web/vite.config.js @@ -4,18 +4,25 @@ import { defineConfig } from "vite"; import { fileURLToPath, URL } from "node:url"; export default defineConfig({ - plugins: [vue()], server: { - port: 8443, - host: "0.0.0.0", + port : 8443, + host : "0.0.0.0", https: { key : fs.readFileSync("src/certs/server.key"), cert: fs.readFileSync("src/certs/server.crt"), }, }, + plugins: [ vue() ], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, }); + +console.info(` +中庭地白树栖鸦,冷露无声湿桂花。 +今夜月明人尽望,不知秋思落谁家。 + +:: https://gitee.com/acgist/taoyao +`);