首页 发现 帮助
登录
Parad0x
/
OBS-TPA
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

- Moved preload binding to separate functions.- Added ClientMessage support in WebSocket Server

Parad0x 5 年之前
父节点
8f022fbb0f
当前提交
35157a9d22
共有 7 个文件被更改，包括 194 次插入 和 240 次删除
分列视图 显示文件统计
  1. 0 91
      app/index.html
  2. 82 71
      app/src/web/Settings.ts
  3. 39 8
      app/src/web/TwitchPubSug.ts
  4. 42 7
      app/src/web/WSServer.ts
  5. 26 56
      app/src/web/preload.ts
  6. 1 1
      app/web/index.html
  7. 4 6
      index.html

+ 0 - 91
app/index.html
查看文件 

@@ -1,91 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-<head>
 
-    <meta charset='utf-8'>
 
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 
-    <title>OBS Twitch Points Alerts</title>
 
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
 
-    <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 
-    <script src='main.js'></script> -->
 
-    <style>
 
-        * {
 
-            color: white;
 
-        }
 
-        video {
 
-            background-color: rgba(0, 0, 0, 0);
 
-            height: 100vh;
 
-            z-index: -100;
 
-        }
 
-        h2 {
 
-            position: absolute;
 
-            top: 5em;
 
-            left: 5em;
 
-            z-index: 100;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <video>
 
-    <script>
 
-        let video = document.querySelector("video");
 
-        video.volume = 0.2;
 
-        // setTimeout(()=>{
 
-        //     video.play()
 
-        // }, 1500)
 
-        video.addEventListener("ended", ()=>{
 
-            video.src = "";
 
-        })
 
-    </script>
 
-    <h2 id="ran">
 
-        Random text
 
-    </h2>
 
-    <script>
 
-        let el = document.querySelector("h2#ran");
 
-        let randomnumber = Math.random() * 1000000;
 
-        randomnumber = randomnumber.toString();
 
-        el.textContent = "Random Number: " + randomnumber;
 
-    </script>
 
-    <script>
 
-        function parseCommand(cmdObject){
 
-            switch(cmdObject.cmd){
 
-                case "reload":
 
-                    location.reload();
 
-                    break;
 
-                case "stop":
 
-                    video.pause();
 
-                    break;
 
-                case "start":
 
-                    video.play();
 
-                    break;
 
-                case "vol":
 
-                    if(cmdObject.volume)
 
-                        video.volume = Number.parseFloat(cmdObject.volume)
 
-                    break;
 
-                case "src":
 
-                    if(cmdObject.src){
 
-                        video.src=cmdObject.src
 
-                    }
 
-                    break;
 
-            }
 
-        }
 
-
 
-        let ws = new WebSocket("ws://localhost:8045");
 
-        ws.onmessage = (msg)=>{
 
-            let data = msg.data;
 
-            let commandArray = JSON.parse(msg.data)
 
-            if(commandArray instanceof Array){
 
-                for(let it of commandArray){
 
-                    parseCommand(it);
 
-                }
 
-            }
 
-        };
 
-    </script>
 
-    <script>
 
-        setInterval(()=>{
 
-            if(!ws || ws.readyState != 1){
 
-                location.reload();
 
-            }
 
-        }, 5000);
 
-    </script>
 
-</body>
 
-</html>

+ 82 - 71
app/src/web/Settings.ts
查看文件 

@@ -2,6 +2,7 @@ import { writeFileSync, readFileSync, existsSync, fstat, copyFileSync } from "fs
 
 import { resolve } from "path";
 
 import { isArray } from "util";
 
 import electron, { ipcMain, ipcRenderer } from "electron";
 
+import { throws } from "assert";
 
 
 function isSameKeys(o: Object, keys: Set<string>){
 
     let objectkeys = Object.keys(o);
 
@@ -50,6 +51,16 @@ class Settings {
 
         alerts: {}
 
     };
 
     filename: string;
 
+
 
+    private inputs: {
 
+        ClientID?:HTMLInputElement,
 
+        OAuthToken?:HTMLInputElement,
 
+        Port?:HTMLInputElement,
 
+        Channel?:HTMLInputElement,
 
+        SaveButton?:HTMLButtonElement,
 
+        AlertButton?:HTMLButtonElement
 
+    } = {};
 
+
 
     constructor(filename = "settings.json"){
 
         this.filename = this.getPath(filename);
 
         this.moveOldConfig(filename);
 
@@ -110,78 +121,78 @@ class Settings {
 
         }
 
     }
 
     
+    bind(
 
+        ClientID:HTMLInputElement,
 
+        OAuthToken:HTMLInputElement,
 
+        Port:HTMLInputElement,
 
+        Channel:HTMLInputElement,
 
+        SaveButton:HTMLButtonElement,
 
+        AlertButton:HTMLButtonElement
 
+    ){
 
+        this.inputs.ClientID = ClientID;
 
+        this.inputs.OAuthToken = OAuthToken;
 
+        this.inputs.Port = Port;
 
+        this.inputs.Channel = Channel;
 
+        this.inputs.SaveButton = SaveButton;
 
+        this.inputs.AlertButton = AlertButton;
 
+
 
+        this.updateView();
 
+
 
+        this.inputs.SaveButton.addEventListener("click", (e)=>{
 
+            // Twitch Token
 
+            this.options.twitch_client_id = this.inputs.ClientID.value;
 
+            this.options.channel = this.inputs.Channel.value;
 
+    
+            // Port
 
+            let port: number = parseInt(this.inputs.Port.value);
 
+            if(!isNaN(port) && port > 0 && port < 65535){
 
+                this.options.port = port;
 
+                this.inputs.Port.value = port.toString();
 
+            }else{
 
+                console.log("Wrong value for port");
 
+                this.inputs.Port.value = this.options.port.toString();
 
+                // TODO: Some error box
 
+            }
 
+    
+            // All setted
 
+            this.save();
 
+            this.updateView();
 
+    
+            e.preventDefault();
 
+            return false;
 
+        });
 
+
 
+        this.inputs.AlertButton.addEventListener("click", (e)=>{
 
+            // Twitch Token
 
+            this.options.twitch_client_id = this.inputs.ClientID.value;
 
+            this.options.channel = this.inputs.Channel.value;
 
+      
+            // Port
 
+            let port: number = parseInt(this.inputs.Port.value);
 
+            if(!isNaN(port) && port > 0 && port < 65535){
 
+                this.options.port = port;
 
+                this.inputs.Port.value = port.toString();
 
+            }else{
 
+                console.log("Wrong value for port");
 
+                this.inputs.Port.value = this.options.port.toString();
 
+                // TODO: Some error box
 
+            }
 
+      
+            // All setted
 
+            this.save();
 
+            this.updateView();
 
+      
+            e.preventDefault();
 
+            return false;
 
+        });
 
+    }
 
+
 
     updateView(){
 
-        inputs.ClientTID.value = this.options.twitch_client_id
 
-        inputs.Port.value = this.options.port.toString()
 
-        inputs.OAuthToken.value = this.options.twitch_oauth_token;
 
-        inputs.Channel.value = this.options.channel;
 
+        this.inputs.ClientID.value = this.options.twitch_client_id
 
+        this.inputs.Port.value = this.options.port.toString()
 
+        this.inputs.OAuthToken.value = this.options.twitch_oauth_token;
 
+        this.inputs.Channel.value = this.options.channel;
 
     }
 
 }
 
 
-export default Settings
 
-
 
-const inputs: {
 
-    ClientTID?:HTMLInputElement,
 
-    OAuthToken?:HTMLInputElement,
 
-    Port?:HTMLInputElement,
 
-    Channel?:HTMLInputElement
 
-} = {}
 
-
 
-export function initForm(settings: Settings){
 
-    inputs.ClientTID = document.getElementById("settClientToken") as HTMLInputElement;
 
-    inputs.OAuthToken = document.getElementById("settOAuthToken") as HTMLInputElement;
 
-    inputs.Port = document.getElementById("settPort") as HTMLInputElement;
 
-    inputs.Channel = document.getElementById("settChannel") as HTMLInputElement;
 
-
 
-    settings.updateView();
 
-
 
-    let saceForm = document.getElementById("sett");
 
-    saceForm.addEventListener("submit", function(e){
 
-        // Twitch Token
 
-        settings.options.twitch_client_id = inputs.ClientTID.value;
 
-        settings.options.channel = inputs.Channel.value;
 
-
 
-        // Port
 
-        let port: number = parseInt(inputs.Port.value);
 
-        if(!isNaN(port) && port > 0 && port < 65535){
 
-            settings.options.port = port;
 
-            inputs.Port.value = port.toString();
 
-        }else{
 
-            console.log("Wrong value for port");
 
-            inputs.Port.value = settings.options.port.toString();
 
-            // TODO: Some error box
 
-        }
 
-
 
-        // All setted
 
-        settings.save();
 
-        settings.updateView();
 
-
 
-        e.preventDefault();
 
-        return false;
 
-    });
 
-
 
-    let saveAlert = document.getElementById("saveAlert");
 
-    saveAlert.addEventListener("click", function(e){
 
-        // Twitch Token
 
-        settings.options.twitch_client_id = inputs.ClientTID.value;
 
-        settings.options.channel = inputs.Channel.value;
 
-
 
-        // Port
 
-        let port: number = parseInt(inputs.Port.value);
 
-        if(!isNaN(port) && port > 0 && port < 65535){
 
-            settings.options.port = port;
 
-            inputs.Port.value = port.toString();
 
-        }else{
 
-            console.log("Wrong value for port");
 
-            inputs.Port.value = settings.options.port.toString();
 
-            // TODO: Some error box
 
-        }
 
-
 
-        // All setted
 
-        settings.save();
 
-        settings.updateView();
 
-
 
-        e.preventDefault();
 
-        return false;
 
-    });
 
-}
 
+export default Settings

+ 39 - 8
app/src/web/TwitchPubSug.ts
查看文件 

@@ -1,6 +1,7 @@
 
 import WS from "ws"
 
 import translateTwitchUser from "./translateTwitchUser";
 
 import { EventEmitter } from "events"
 
+import { runInThisContext } from "vm";
 
 
 export interface PointsRedeemed {
 
     timestamp: string;
 
@@ -65,8 +66,14 @@ class Twitch extends EventEmitter{
 
     }
 
 
     ws?: WS;
 
-    pingInterval: NodeJS.Timeout;
 
-    button?:HTMLElement;
 
+    private pingInterval: NodeJS.Timeout;
 
+
 
+    private interval?: NodeJS.Timeout;
 
+
 
+    private inputs: {
 
+        StartStopButton?: HTMLButtonElement,
 
+        ErrStatus?: HTMLElement
 
+    } = {};
 
 
     constructor(){
 
         super();
 
@@ -161,8 +168,32 @@ class Twitch extends EventEmitter{
 
         return false;
 
     }
 
 
-    bindButton(btn: HTMLElement){
 
-        this.button = btn;
 
+    bind(
 
+        StaStoBtn: HTMLButtonElement,
 
+        ErrStatus: HTMLElement
 
+    ){
 
+        this.inputs.StartStopButton = StaStoBtn;
 
+        this.inputs.ErrStatus = ErrStatus;
 
+
 
+        this.on("error", (msg)=>{
 
+          this.inputs.ErrStatus.innerText = msg;
 
+        })
 
+        this.on("start", ()=>{
 
+          this.inputs.ErrStatus.innerText = "";
 
+        })
 
+
 
+        this.inputs.StartStopButton.addEventListener("click", e => {
 
+            console.log("Start stop");
 
+            if(this.status()){
 
+              this.stop();
 
+            }else{
 
+              this.start();
 
+            }
 
+          })
 
+
 
+        let refresher = () => this.updateElement();
 
+        this.interval = setInterval(refresher, 1000);
 
+        setTimeout(refresher, 0);
 
     }
 
 
     updateElement(){
 
@@ -170,13 +201,13 @@ class Twitch extends EventEmitter{
 
         if(this.status()){
 
             status.innerText = "Online";
 
             status.style.color = "Green";
 
-            if(this.button)
 
-                this.button.innerText = "Stop";
 
+            if(this.inputs.StartStopButton)
 
+                this.inputs.StartStopButton.innerText = "Stop";
 
         }else{
 
             status.innerText = "Offline";
 
             status.style.color = "red";
 
-            if(this.button)
 
-                this.button.innerText = "Start";
 
+            if(this.inputs.StartStopButton)
 
+                this.inputs.StartStopButton.innerText = "Start";
 
         }
 
     }
 
 }

+ 42 - 7
app/src/web/WSServer.ts
查看文件 

@@ -1,9 +1,19 @@
 
 import ws from "ws";
 
 
+interface EndEvent {
 
+    action: "end"
 
+}
 
+
 
+type ClientMessage = EndEvent
 
+
 
 class WebSocketServer {
 
     server?: ws.Server;
 
 
-    button?:HTMLElement;
 
+    private interval?: NodeJS.Timeout;
 
+    private inputs: {
 
+        StartStopButton?: HTMLButtonElement
 
+    } = {};
 
+
 
     constructor(private port: number = 8045){
 
         if(! (!isNaN(port) && port > 0 && port < 65535)){
 
             throw new Error("Malicious port")
 
@@ -34,6 +44,11 @@ class WebSocketServer {
 
         this.server.on("close", ()=>{
 
             this.server = undefined;
 
         })
 
+        this.server.on("connection", (cl) => {
 
+            cl.on("message", msg => {
 
+                this.connectionHandler(msg.toString());
 
+            })
 
+        })
 
     }
 
 
     stop(){
 
@@ -44,8 +59,28 @@ class WebSocketServer {
 
         this.server.close();
 
     }
 
 
-    bindButton(btn: HTMLElement){
 
-        this.button = btn;
 
+    connectionHandler(rawMsg: string){
 
+        let msg: ClientMessage = JSON.parse(rawMsg);
 
+    }
 
+
 
+    bind(
 
+        StaStoBtn: HTMLButtonElement
 
+    ){
 
+        this.inputs.StartStopButton = StaStoBtn;
 
+
 
+        let refresher = () => this.updateElement();
 
+        this.interval = setInterval(refresher, 1000);
 
+        setTimeout(refresher, 0);
 
+
 
+        this.inputs.StartStopButton.addEventListener("click", e => {
 
+          console.log("Start stop");
 
+          if(this.status()){
 
+            this.stop();
 
+          }else{
 
+            this.changePort(window.settings.options.port)
 
+            this.start();
 
+          }
 
+        })
 
     }
 
 
     updateElement(){
 
@@ -53,13 +88,13 @@ class WebSocketServer {
 
         if(this.status()){
 
             status.innerText = "Online"
 
             status.style.color = "Green";
 
-            if(this.button)
 
-                this.button.innerText = "Stop";
 
+            if(this.inputs.StartStopButton)
 
+                this.inputs.StartStopButton.innerText = "Stop";
 
         }else{
 
             status.innerText = "Offline"
 
             status.style.color = "red";
 
-            if(this.button)
 
-                this.button.innerText = "Start";
 
+            if(this.inputs.StartStopButton)
 
+                this.inputs.StartStopButton.innerText = "Start";
 
         }
 
     }

+ 26 - 56
app/src/web/preload.ts
查看文件 

@@ -1,10 +1,10 @@
 
-import Settings, { initForm } from "./Settings";
 
+import Settings from "./Settings";
 
 import Twitch from "./TwitchPubSug"
 
 import { ipcRenderer } from "electron"
 
 import WebSocketServer from "./WSServer";
 
 import AlertFront from "./AlertFront";
 
 
-window.settings = new Settings()
 
+let settings = window.settings = new Settings()
 
 
 const twitch = new Twitch();
 
 const wss = new WebSocketServer();
 
@@ -19,47 +19,44 @@ function isValidToken(token: string): boolean{
 
 }
 
 
 window.addEventListener("DOMContentLoaded", () => {
 
-  initForm(window.settings);
 
+
 
+  settings.bind(
 
+    document.getElementById("settClientToken") as HTMLInputElement,
 
+    document.getElementById("settOAuthToken") as HTMLInputElement,
 
+    document.getElementById("settPort") as HTMLInputElement,
 
+    document.getElementById("settChannel") as HTMLInputElement,
 
+    document.getElementById("settSave") as HTMLButtonElement,
 
+    document.getElementById("saveAlert") as HTMLButtonElement
 
+  )
 
+
 
   Alerts = new AlertFront(twitch);
 
   Alerts.updateView();
 
-  
-  let twitchstartstopButton = document.getElementById("twitchstartstop");
 
-  twitch.bindButton(twitchstartstopButton);
 
-  let refresher = () => twitch.updateElement();
 
-  setInterval(refresher, 1000);
 
-  setTimeout(refresher, 0);
 
 
-  let wssstartstopButton = document.getElementById("wssstartstop");
 
-  wss.bindButton(wssstartstopButton);
 
-  refresher = () => wss.updateElement();
 
-  setInterval(refresher, 1000);
 
-  setTimeout(refresher, 0);
 
+  twitch.bind(
 
+    document.getElementById("twitchstartstop") as HTMLButtonElement,
 
+    document.getElementById("twitchError")
 
+  );
 
+
 
+  wss.bind(
 
+    document.getElementById("wssstartstop") as HTMLButtonElement
 
+  )
 
 
   let getTokenButton = document.getElementById("settGetToken");
 
   getTokenButton.addEventListener("click", e => {
 
-    if(isValidToken(window.settings.options.twitch_client_id)){
 
-      ipcRenderer.send('twitch-oauth', window.settings.options.twitch_client_id);
 
+    if(isValidToken(settings.options.twitch_client_id)){
 
+      ipcRenderer.send('twitch-oauth', settings.options.twitch_client_id);
 
     }
 
   })
 
 
   ipcRenderer.on("twitch-oauth", (event, authcode: string)=>{
 
     console.log(authcode);
 
-    window.settings.options.twitch_oauth_token = authcode;
 
-    window.settings.save();
 
-    window.settings.updateView();
 
+    settings.options.twitch_oauth_token = authcode;
 
+    settings.save();
 
+    settings.updateView();
 
   });
 
 
-  twitchstartstopButton.addEventListener("click", e => {
 
-    console.log("Start stop");
 
-    if(twitch.status()){
 
-      twitch.stop();
 
-    }else{
 
-      twitch.start();
 
-    }
 
-  })
 
-
 
   twitch.on("reward", (reward) => {
 
-    let al = window.settings.options.alerts;
 
+    let al = settings.options.alerts;
 
     console.log("Reward");
 
     for(let key in al){
 
       if(al.hasOwnProperty(key)){
 
@@ -77,33 +74,6 @@ window.addEventListener("DOMContentLoaded", () => {
 
         }
 
       }
 
     }
 
-    // if(reward.redemption.id == "testid"){
 
-    //   wss.sendToAll("src avatar.mp4");
 
-    // }else{
 
-    //   wss.sendToAll("src video.mp4");
 
-    // }
 
-    // wss.sendToAll("start");
 
-    // setTimeout(()=>{
 
-    //   wss.sendToAll("stop")
 
-    // }, 10000)
 
-  })
 
-
 
-  let twitchError = document.getElementById("twitchError");
 
-  twitch.on("error", (msg)=>{
 
-    twitchError.innerText = msg;
 
-  })
 
-  twitch.on("start", ()=>{
 
-    twitchError.innerText = "";
 
-  })
 
-
 
-  wssstartstopButton.addEventListener("click", e => {
 
-    console.log("Start stop");
 
-    if(wss.status()){
 
-      wss.stop();
 
-    }else{
 
-      wss.changePort(window.settings.options.port)
 
-      wss.start();
 
-    }
 
   })
 
 
   let addAlertButton = document.getElementById("addAlert");

+ 1 - 1
app/web/index.html
查看文件 

@@ -81,7 +81,7 @@
 
                     </div>
 
                 </div>
 
                 <div class="form-group">
 
-                    <button type="submit" class="btn btn-primary" id="settSave">Save</button>
 
+                    <button type="button" class="btn btn-primary" id="settSave">Save</button>
 
                 </div>
 
             </form>
 
         </div>

+ 4 - 6
index.html
查看文件 

@@ -29,12 +29,6 @@
 
     <script>
 
         let video = document.querySelector("video");
 
         video.volume = 0.2;
 
-        // setTimeout(()=>{
 
-        //     video.play()
 
-        // }, 1500)
 
-        video.addEventListener("ended", ()=>{
 
-            video.src = "";
 
-        })
 
     </script>
 
     <h2 id="ran">
 
         Random text
 
@@ -79,6 +73,10 @@
 
                 }
 
             }
 
         };
 
+        video.addEventListener("ended", ()=>{
 
+            video.src = "";
 
+            ws.send('{action:"end"}');
 
+        })
 
     </script>
 
     <script>
 
         setInterval(()=>{