实现了使用websocket功能将命令发送至后端python服务器运行，

.gitignore

@@ -0,0 +1 @@
+*.exe

MainPage.html

@@ -25,7 +25,12 @@
     <!-- 这个是warning，显示红色，class=warning，title可以鼠标悬浮显示 -->
     <label class="warning clickable" title="此项必填">*</label>
     <textarea name="filesrc" id="filesrc" contenteditable="true" placeholder="这里粘贴文件的路径" cols="80" rows="2" required spellcheck="false"></textarea>
+    <hr>
     <!-- websockets -->
+    <label id="websocketLabel">websocket设置</label><br>
+    <input type="button" value="启动websocket" onclick="startwebsocket(0)">
+    <!-- <input type="button" value="检查连接状态"> -->
+    <label id="wsState">连接状态未知</label>
     <hr>
 
     <!-- preset预设 -->
@@ -113,13 +118,15 @@
     <hr>
     <label id="outputCommandLabel">生成的参数命令如下：</label>
     <button onclick="generatecommand()" id="generateBtn">点击生成</button>
-    <button onclick="clicktocopy()" id="copyBtn">点击复制</button><br>
+    <button onclick="clicktocopy()" id="copyBtn">点击复制</button>
+    <button onclick="startwebsocket(1)" title="需要在后台运行server接收数据">点击运行</button><br>
     <textarea name="outputcommand" id="outputcommand" cols="120" rows="5" placeholder="在生成指令之后请复制到命令行中运行，请确保自己配置好了ffmpeg环境，并且已经添加到了环境变量中"></textarea>
 </body>
 
 <footer>
     <hr>
-    <p class="widcenter">本网页由<a href="https://github.com/lingfengyu-dreaming">EmptyLight</a>编写。</p>
+    <p class="widcenter">下载并安装<a href="https://ffmpeg.org">ffmpeg</a></p>
+    <p class="widcenter">本网页由<a href="https://github.com/lingfengyu-dreaming">EmptyLight</a>编写。点击访问本项目的<a href="https://github.com/lingfengyu-dreaming/ffmpegHTMLGUI">GitHub</a>地址。</p>
     <p class="widcenter">&copy;Copyright <a href="https://github.com/lingfengyu-dreaming">EmptyLight</a> 2023</p>
 </footer>
 

MainPage.js

@@ -377,4 +377,83 @@ function langsel()
         document.getElementById("generateBtn").innerHTML = translations[lang]['generate_btn'];
         document.getElementById("copyBtn").innerHTML = translations[lang]['copy_btn'];
     }
+}
+let ws;
+function startwebsocket(e)
+{
+    try
+    {
+        if (!ws)
+        {
+            ws = new WebSocket("ws://localhost:1652");
+        }
+    }
+    catch
+    {
+        alert("浏览器不支持websocket");
+    }
+    if (e == 0)
+    {
+        ws.onopen = function (event)
+        {
+            console.log("ws启动");
+            var message = btoa("start");
+            ws.send(message);
+        }
+        ws.onmessage = function (event)
+        {
+            console.log("ws收到消息" + event.data);
+            if (event.data == "run command")
+            {
+                var output = document.getElementById("wsState");
+                output.innerHTML = "运行命令完成";
+            }
+        }
+        ws.onerror = function (event)
+        {
+            console.log("ws报错" + event.data);
+        }
+        ws.onclose = function (event)
+        {
+            console.log("ws关闭");
+        }
+        ckws();
+    }
+    else if (e == 1)
+    {
+        senttowebsocket();
+    }
+    function ckws()
+    {
+        var state = ws.readyState;
+        var output = document.getElementById("wsState");
+        if (state == 0)
+        {
+            output.innerHTML = "正在连接";
+        }
+        else if (state == 1)
+        {
+            output.innerHTML = "已连接";
+        }
+        else if (state == 2)
+        {
+            output.innerHTML = "正在关闭";
+        }
+        else if (state == 3)
+        {
+            output.innerHTML = "已关闭";
+        }
+        if (timeout)
+        {
+            clearTimeout(timeout);
+        }
+        var timeout = setTimeout(ckws, 1000);
+    }
+    // 发送命令到后台webserver服务器
+    function senttowebsocket()
+    {
+        var command = document.getElementById("outputcommand").value;
+        console.log(command);
+        ws.send(command);
+    }
 }

README.md

@@ -2,7 +2,9 @@
 
 ---
 
-> **NOTICE**: this project is **only Chinese** now
+> **NOTICE**: this project is **only Chinese** now, support for other languages is in progress, but has encountered technical obstacles, please wait or help us.
+> 
+> **NOTICE**: If you don't have the `websockets` library for `python`, we provide a ***packaged portable version*** of the program (in *exe* format) in the release, which can be downloaded and run directly without downloading the `websockets` library.
 
 ---
 
@@ -18,8 +20,11 @@ In this project, I will use HTML to write a GUI for [ffmpeg](https:\\ffmpeg.org)
 - gengrate command for ffmpeg cli
 - decide the output directory and output file name(you can change the Changing the file type here)
 - choose the video byterate and fps
+- Select preset format for direct output of commands
+- Commands are sent directly to the backend via `websocket` server to be run
 
 ## update time
+- Successfully use `websocket` to send commands to the backend `python` server to run, `python` server needs to use `websockets` library, please note that the runtime library **needs to be installed**.---2023.08.03
 - Add preset selection, one-click command generation. Add video resolution setting.---2023.08.02
 - try to add language select, but hasn't successed yet---2023.08.01
 - Improve usability by making it possible for file addresses to contain spaces, and fix bugs by making the copy button usable---2023.08.01
@@ -28,5 +33,5 @@ In this project, I will use HTML to write a GUI for [ffmpeg](https:\\ffmpeg.org)
 ## what to do
 - [ ] build a HTMLpage to display the choices.  
 - [ ] use javascript to generating command.  
-- [ ] Use websocket to pass commands for one-click execution.  
+- [x] Use websocket to pass commands for one-click execution.  
 - [ ] more and more coming...  

README_zh.md

@@ -2,7 +2,9 @@
 
 ---
 
-> **注意**：这个项目目前**只支持中文**
+> **注意**：这个项目目前**只支持中文**，其他语言的支持正在进行中，但是遇到技术阻碍，请等待。
+> 
+> **注意**：如果你没有`python`的`websockets`库，我们在release提供了一个***打包好的便携版本*** 程序（*exe*格式），可下载并直接运行，而不需要下载`websockets`库。
 
 ---
 
@@ -18,8 +20,11 @@
 - 生成ffmpeg的命令
 - 选择输出视频的文件夹和文件名（可以在此处修改输出文件的类型）
 - 选择输出视频的比特率和帧数
+- 选择预设格式直接输出指令
+- 通过`websocket`服务器直接将指令发送到后端运行
 
 ## 更新时间
+- 成功使用`websocket`发送指令到后端`python`服务器运行，`python`服务器**需要**使用`websockets`库，请注意安装。---2023.08.03
 - 添加预设选择，一键式生成指令。添加视频分辨率设置。---2023.08.02
 - 尝试添加语言选择，目前尚未成功---2023.08.01
 - 提高可用性，让文件地址可以包含空格，修正bug，让复制按钮可用---2023.08.01
@@ -28,5 +33,5 @@
 ## 将要做什么
 - [ ] 构建一个HTML页面展示选项。  
 - [ ] 使用js生成命令。  
-- [ ] 使用websocket传递指令一键执行。  
+- [x] 使用websocket传递指令一键执行。  
 - [ ] 更多功能实现中...  

webserver.py

@@ -0,0 +1,25 @@
+#encoding:utf-8
+import asyncio
+import websockets
+import os
+
+async def echo(websocket):
+    async for message in websocket:
+        print("message:"+message)
+        if(message[:6] == "ffmpeg"):
+            os.system(message)
+            await websocket.send("run command")
+            print("运行命令完成")
+        elif(message=="start"):
+            await websocket.send("link start")
+        else:
+            await websocket.send("receive")
+
+async def main():
+    async with websockets.serve(echo, "localhost", 1652):
+        print("start server")
+        print("version:1.0")
+        print("update date:2023.08.03")
+        await asyncio.Future()  # run forever
+
+asyncio.run(main())