html js 客户端连接中端TCP Server

html网页能否通过js方式通过无线路由器连接中端TCP Server并发送指令控制，中端只能接收字符，我使用的是WebSocket一直启动连接，无法连接使用，一直报错 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state. 连接不上,中端不支持WebSocket连接，中端是别人做的。现在想使用html js连接中端，中端只支持tcp协议和UDP协议，不支持WebSocket这个协议，是不是需要改成Socket。

引用皆我百晓生小程序回复内容作答：
根据您提供的信息，您想通过HTML网页使用JavaScript连接到中端TCP服务器并发送控制指令。您尝试使用WebSocket来建立连接，但一直遇到连接错误。

首先，需要明确一点，WebSocket是一种基于TCP的协议，它可以在浏览器和服务器之间建立双向通信的连接。但是，WebSocket连接需要在服务器端正确配置和处理。

如果您无法连接到中端TCP服务器，可能有以下几个原因：

服务器端配置问题：请确保中端TCP服务器已正确配置并正在监听WebSocket连接。您可以检查服务器端代码，确保它能够接受WebSocket连接并处理来自客户端的指令。
网络问题：请确保您的HTML网页和中端TCP服务器在同一网络中，并且没有任何防火墙或网络限制阻止WebSocket连接。
客户端代码问题：请确保您的JavaScript代码正确地使用WebSocket API。您可以检查代码中的连接逻辑，确保在连接建立之后再发送指令。

以下是一个简单的示例代码，展示了如何使用WebSocket连接到中端TCP服务器并发送指令：

// 创建WebSocket连接
const socket = new WebSocket('ws://your-server-ip:your-server-port');

// 监听连接建立事件
socket.onopen = function() {
  console.log('WebSocket连接已建立');
  
  // 连接建立后发送指令
  socket.send('your-command');
};

// 监听接收消息事件
socket.onmessage = function(event) {
  console.log('接收到消息:', event.data);
};

// 监听连接关闭事件
socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

// 监听连接错误事件
socket.onerror = function(error) {
  console.error('WebSocket连接错误:', error);
};

请注意，上述代码中的ws://your-server-ip:your-server-port需要替换为您中端TCP服务器的实际IP地址和端口号。

如果您仍然无法连接到中端TCP服务器，请检查服务器端配置和网络连接，并确保代码正确。如果问题仍然存在，请提供更多详细信息，以便我们能够更好地帮助您解决问题。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
HTML网页通过JavaScript使用WebSocket与TCP服务器进行通信是可行的。WebSocket提供了一种在Web浏览器和服务器之间进行全双工通信的机制，类似于传统的TCP套接字连接。

然而，需要注意以下几点来解决您遇到的问题：

1、确保您的TCP服务器正常运行并且可从无线路由器网络访问。您可以尝试使用其他TCP客户端工具（如Telnet）来验证是否可以连接到服务器并发送指令。

2、在JavaScript代码中，确保您正确设置WebSocket连接的URL。URL应包括TCP服务器的IP地址和端口号。例如：

var socket = new WebSocket("ws://服务器IP地址:端口号");

请将服务器IP地址和端口号替换为您实际使用的服务器地址和端口。

3、请确保您的JavaScript代码中使用了正确的WebSocket事件处理程序。WebSocket连接需要侦听open、message、close和error等事件。例如，onopen事件在连接建立时触发，可以在其中执行发送指令的操作。示例代码如下：

var socket = new WebSocket("ws://服务器IP地址:端口号");

socket.onopen = function(event) {
    console.log("WebSocket连接已建立.");
    // 在连接建立后发送指令
    socket.send("您要发送的指令");
};

socket.onmessage = function(event) {
    console.log("接收到服务器的消息: " + event.data);
};

socket.onclose = function(event) {
    console.log("WebSocket连接已关闭.");
};

socket.onerror = function(event) {
    console.log("WebSocket连接发生错误.");
};

请根据您的实际情况进行适当的更改。

4、检查浏览器的开发者工具控制台以查看更详细的错误信息。可能会有其他错误或警告消息提供有关为什么无法连接到服务器的线索。

请尝试上述解决方案，并确保您的TCP服务器配置正确、网络连接正常。如果问题仍然存在，请提供更多详细信息，例如服务器配置、网络环境和浏览器控制台的错误消息，以便我们能够更好地帮助您解决问题。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

参考
https://blog.csdn.net/benben_2015/article/details/79294547

关于出现的错误Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.，这意味着在尝试发送数据之前，WebSocket的连接状态仍然处于连接中。为了解决此问题，你可以通过在WebSocket对象的onopen回调函数中发送数据，确保在连接成功后才发送指令。

以下是一个示例代码，展示了如何在HTML网页中使用JavaScript通过WebSocket连接到中端TCP服务器并发送指令控制：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket TCP控制</title>
    <script>
        var socket = new WebSocket("ws://your-tcp-server-url");

        socket.onopen = function() {
            console.log('连接已建立');
            // 连接建立后发送指令
            socket.send("你的指令");
        }

        socket.onmessage = function(event) {
            console.log('收到消息:', event.data);
            // 在这里处理从服务器返回的消息
        }

        socket.onclose = function() {
            console.log('连接已关闭');
        }

        socket.onerror = function(error) {
            console.error('WebSocket连接错误:', error);
        }
    </script>
</head>
<body>
</body>
</html>

在上述代码中，你需要将ws://your-tcp-server-url替换为你实际使用的中端TCP服务器的URL。在连接建立后，可以在socket.onopen回调函数中发送你的指令。接收到来自服务器的消息后，可以在socket.onmessage回调函数中对消息进行处理。当连接关闭或出现错误时，分别在socket.onclose和socket.onerror回调函数中处理。

请确保你提供的中端TCP服务器支持WebSocket协议，并且配置正确。

如果以上代码仍然无法建立连接，请确保你的中端TCP服务器正在运行并且可以通过提供的URL进行访问。你还可以检查浏览器的开发者工具（通常是按下F12键打开），查看控制台中是否有其他错误信息。

首先，你需要确定你的WebSocket连接是否正确地建立。你的错误提示"Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state"表明你正在尝试在WebSocket还未完全连接的状态下发送数据，这是不被允许的。你需要等待WebSocket的连接状态变为"OPEN"后再发送数据。

以下是一段示例代码，它展示了如何正确地建立WebSocket连接，并在连接成功后发送数据：

let socket = new WebSocket('ws://your-server-url');

socket.onopen = function(e) {
  console.log("[open] Connection established");
  // 连接成功后发送数据
  socket.send("your message");
};

socket.onerror = function(error) {
  console.log("Error: " + error.data);
};

socket.onmessage = function(e) {
  console.log("Server says: " + e.data);
};

socket.onclose = function(e) {
  console.log("[close] Connection closed");
};

你需要将'ws://your-server-url'替换为你的WebSocket服务器的URL，并将"your message"替换为你想发送的消息。

另外，你提到"一直报错 Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state"，这个错误可能意味着你的WebSocket服务器没有正确响应连接请求，或者响应时间过长。你需要检查你的WebSocket服务器是否正常工作，以及它是否可以正确处理连接请求。

如果你的WebSocket服务器在本地运行，并且你正在使用无线路由器，你可能需要确保无线路由器的防火墙设置允许WebSocket连接。具体的设置方法取决于你的无线路由器的型号和制造商。你可能需要查看路由器的文档，或者在网上搜索你的路由器型号和"WebSocket"关键词来获取更多信息。

试一试这个

var WebSocketServer = require('websocket').server;  
var net = require('net');  
  
var wss = new WebSocketServer({  
  httpServer: require('http').createServer().listen(8080)  
});  
  
wss.on('request', function(request) {  
  var connection = net.createConnection({port: 8001}, function() { // 替换为你的中端服务器的端口  
    request.accept(null, request.origin);  
  });  
  
  connection.on('data', function(data) {  
    for (var i in wss.connections) {  
      wss.connections[i].send(data);  
    }  
  });  
  
  request.on('message', function(message) {  
    connection.write(message.utf8Data);  
  });  
  
  request.on('close', function() {  
    connection.end();  
  });  
});

结合GPT给出回答如下请题主参考
可以使用JavaScript通过WebSocket连接TCP服务器并发送指令控制。使用WebSocket可以提供实时和双向的数据流通信。

下面是一个简单的示例代码：

var socket = new WebSocket("ws://localhost:8080");

socket.onerror = function(event) {
   console.error("WebSocket error:", event);
};

socket.onopen = function(event) {
   console.log("WebSocket connection established");
};

socket.onmessage = function(event) {
   console.log("WebSocket message received:", event.data);
};

socket.send("Hello from the client!");

// To send a command from a button click event:
document.getElementById("myButton").addEventListener("click", function() {
   var command = "send command here";
   socket.send(command);
});

需要确保中端TCP服务器已经正确开启，并监听了相应的端口。如果连接失败或者一直报错，可以检查TCP服务器配置是否正确，以及网络是否通畅。

如果你的中端服务器只支持TCP和UDP协议，并且不支持WebSocket协议，那么你不能直接使用WebSocket来连接它。你需要使用一个支持TCP或UDP协议的JavaScript库来连接中端服务器。

一种可能的解决方案是使用WebSockets的TCP或UDP库，例如Socket.IO或ReconnectingWebSocket。这些库提供了一个JavaScript API，可以通过TCP或UDP协议连接服务器。

使用Socket.IO的示例代码如下：

const io = require('socket.io-client');

const socket = io.connect('http://localhost:3000', {
  transports: ['tcp'],
});

socket.on('connect', () => {
  console.log('Connected to the server!');
  socket.emit('message', 'Hello, server!');
});

socket.on('message', (message) => {
  console.log('Received message from the server:', message);
});

使用ReconnectingWebSocket的示例代码如下：

const ReconnectingWebSocket = require('reconnecting-websocket');

const socket = new ReconnectingWebSocket('ws://localhost:3000', [], {
  debug: true,
});

socket.addEventListener('open', () => {
  console.log('Connected to the server!');
  socket.send('Hello, server!');
});

socket.addEventListener('message', (event) => {
  console.log('Received message from the server:', event.data);
});

这些示例代码演示了如何使用Socket.IO或ReconnectingWebSocket库连接到TCP或UDP服务器，发送和接收消息。你需要根据你的实际情况修改连接URL和消息内容。

参考gpt4：
结合自己分析给你如下建议：
如果你想在 HTML 网页中使用 JS 来直接连接 TCP Server，你可能需要使用一些特殊的技术或插件，比如：
使用 Chrome 的实验性 API 来创建和访问原始的 TCP 和 UDP 套接字，但是这个功能只适用于 Chrome 应用，并且目前还没有正式发布。
使用 Websockify 来创建一个 WebSocket 到 TCP 的桥接器，让你的网页通过 WebSocket 连接到 Websockify，然后由 Websockify 转发到 TCP Server。
使用 Flash Socket 或 Java Applet 来创建和访问 TCP 套接字，但是这些技术都需要用户安装相应的插件，并且可能存在安全风险或兼容性问题。
如果你想使用 Websockify 来实现你的需求，你可能需要以下的步骤：
在你的无线路由器上安装和运行 Websockify，并设置好目标 TCP Server 的地址和端口。
在你的 HTML 网页中引入 websock.js 库，并创建一个 WebSocket 对象，连接到 Websockify 的地址和端口。
使用 WebSocket 对象的 send 方法来发送指令给 TCP Server，并使用 onmessage 事件来接收 TCP Server 的响应。
使用 WebSocket 对象的 close 方法来关闭连接。
以下是一个可能的 HTML 网页的代码：

<html> <head> <script src=“websock.js”></script> <script> // 创建一个 WebSocket 对象 var ws = new WebSocket(“ws://192.168.1.1:8080”); // 假设 Websockify 运行在无线路由器的 8080 端口上 // 设置连接打开时的回调函数 ws.onopen = function() { console.log(“WebSocket connection opened”); // 发送指令给 TCP Server ws.send(“Hello, TCP Server!”); }; // 设置接收消息时的回调函数 ws.onmessage = function(event) { // 获取消息数据 var data = event.data; // 处理消息数据 console.log("Received from TCP Server: " + data); }; // 设置连接关闭时的回调函数 ws.onclose = function() { console.log(“WebSocket connection closed”); }; </script> </head> <body> <h1>HTML JS 连接 TCP Server</h1> </body> </html>

html页面自己写js脚本收发数据，支持串口和TCP通讯（二）TCP客户端收发

<body>
    <div>tcp测试客户端</div><br />
    <input type="text" id="txtServer" value="127.0.0.1" /><br />
    <input type="text" id="txtPort" value="60000" /><br />
    <button onclick="conn()">连接</button>
    <button onclick="close()">断开</button>
    <button onclick="sendData()">发送</button>
    <button onclick="recvData()">接收</button>
</body>
<script type="text/javascript">
    (async function () {
        await CefSharp.BindObjectAsync("tcpClientHelper");
        
    })();


    function conn() {
        (async function () {
            await CefSharp.BindObjectAsync("tcpClientHelper");
            var server = document.getElementById("txtServer").value;
            var port = document.getElementById("txtPort").value;
            console.log(server, port);
            await tcpClientHelper.conn(server, parseInt(port));

            //建立连接后发登录
            await tcpClientHelper.sendData("383635333734303530363031353933");

            setTimeout("recvData()", 1000);
        })();
    }

    function close() {
        (async function () {
            await CefSharp.BindObjectAsync("tcpClientHelper");

            await tcpClientHelper.close();
        })();
    }

    function sendData() {
        (async function () {
            await CefSharp.BindObjectAsync("tcpClientHelper");

            await tcpClientHelper.sendData("313233");

            console.log('sendData');
        })();
    }

    function recvData() {
        (async function () {
            await CefSharp.BindObjectAsync("tcpClientHelper");

            let recvString = await tcpClientHelper.recvData();
            console.log('[' + recvString+ ']');
            if (recvString.trim() == '680100010068FFFFFFFFFFFF010100CE16') {
                console.log('ok 31');
                await tcpClientHelper.sendData('68 03 00 03 00 68 FF FF FF FF FF FF 81 01 00 01 AA BB B8 16');
            }
            else if (recvString.trim() == '680100010068FFFFFFFFFFFF020000552316') {
                console.log('ok 32');
                await tcpClientHelper.sendData('68 01 00 01 00 68 FF FF FF FF FF FF 82 01 00 FF 4E 16');
            }

            setTimeout("recvData()", 1000);
        })();       
    }  
</script>

是的，如果中端只支持TCP和UDP协议，那么你需要使用Socket来连接中端。JavaScript中可以使用Web API中的WebSocket来建立WebSocket连接，但是对于只支持TCP和UDP协议的中端，你需要使用Socket API来建立TCP连接。

你可以使用JavaScript中的WebSocket或Socket API通过TCP连接到中端，并发送指令控制。但是需要注意的是，JavaScript运行在浏览器中，可能会受到浏览器的安全限制，需要配置相应的安全策略才能正常连接中端。同时，也需要确保中端的IP地址和端口号正确无误，以及中端是否已经正确启动了。

该回答引用ChatGPT，希望对题主有所帮助，如有帮助，还望采纳。

是的，如果中端只支持TCP和UDP协议，而不支持WebSocket协议，那么你需要使用Socket来连接中端TCP Server并发送指令控制。可以使用JavaScript中的Socket API来实现这个功能。需要注意的是，在使用Socket时，你需要确保你的代码可以处理TCP连接中断或意外中断等错误情况。

这种连接方式是可以的

参考gpt
是的，如果中端只支持TCP和UDP协议，并且不支持WebSocket协议，您需要使用原生的Socket来与中端建立连接并发送指令。

在HTML和JavaScript中，您可以使用WebSocket来建立与服务器的连接，但它只支持WebSocket协议。要使用TCP协议与中端建立连接，您需要使用原生的Socket API。

在JavaScript中，您可以使用WebSocket对象来创建WebSocket连接，如下所示：

var socket = new WebSocket('ws://your-server-ip:your-server-port');

但是，由于中端不支持WebSocket连接，您需要使用原生的Socket API来建立TCP连接。在浏览器中，JavaScript提供了WebSockets API，但不提供原生的Socket API。因此，您无法直接使用JavaScript在浏览器中与TCP服务器建立连接。

要在浏览器中使用TCP连接，您可以考虑使用以下方法之一：

使用WebSockets API和服务器中间件：
- 在服务器上使用WebSocket服务器中间件，该中间件可以将WebSocket连接转发到TCP服务器。
- 在浏览器中使用WebSocket连接到服务器中间件，然后服务器中间件将数据转发到TCP服务器。
使用JavaScript和Node.js：
- 在Node.js环境中，您可以使用net模块来创建原生的Socket连接。
- 您可以使用Node.js作为中间服务器，建立与TCP服务器的连接，并将数据转发到浏览器。

用websocket可以连接

你可以试试
创建WebSocket对象：您可以使用JavaScript的WebSocket构造函数来创建WebSocket对象，指定WebSocket服务器的URL。

var socket = new WebSocket('ws://your-server-url');

监听WebSocket事件：您可以为WebSocket对象添加事件监听器，以便在连接状态发生变化时执行特定的操作。

socket.addEventListener('open', function (event) {
    // 连接已打开，可以发送数据
    socket.send('Hello, Server!');
});

socket.addEventListener('message', function (event) {
    // 接收到来自服务器的消息
    console.log('Received message: ' + event.data);
});

socket.addEventListener('error', function (event) {
    // 发生错误时执行的操作
    console.error('WebSocket error:', event);
});

socket.addEventListener('close', function (event) {
    // 连接关闭时执行的操作
    console.log('WebSocket closed:', event);
});

发送数据：只有在连接状态为 "OPEN" 时才能发送数据。在连接状态为 "CONNECTING" 时尝试发送数据会导致错误。因此，在发送数据之前，您应该确保WebSocket连接已经成功打开。

// 在连接状态为 "OPEN" 时发送数据
socket.addEventListener('open', function (event) {
    socket.send('Hello, Server!');
});

就是没有连接成功你就send了，所以报错，在连接那边要判断是否成功，异常判断错误码

参考结合GPT4.0、文心一言，如有帮助，恭请采纳。

大致思路：
1、你的错误提示 "Uncaught DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state." 是因为你试图在 WebSocket 还未完全建立连接的状态下发送数据。在 WebSocket 的生命周期中，它有几个状态，包括 CONNECTING（连接中）、OPEN（已开启）、CLOSING（关闭中）、CLOSED（已关闭）。在 CONNECTING 状态下，你无法发送或接收数据。

你需要等待 WebSocket 完全连接后再发送数据。下面是一个简单的例子：

let socket = new WebSocket("ws://your-server-address");  
  
socket.onopen = function(event) {  
  console.log("连接已开启");  
  socket.send("你的指令");  
};  
  
socket.onmessage = function(event) {  
  console.log("收到数据: " + event.data);  
};  
  
socket.onerror = function(error) {  
  console.error("发生错误: " + error);  
};  
  
socket.onclose = function(event) {  
  if (event.wasClean) {  
    console.log("连接已关闭");  
  } else {  
    console.error("连接意外关闭");  
  }  
};

只能用websocket连接，试试用websocket吧

用原生的 JavaScript 中的 WebSocket 对象来连接到中端的 TCP 服务器：

// 创建一个 WebSocket 连接
var socket = new WebSocket('ws://your_server_address:your_port');

// 连接建立时的回调函数
socket.onopen = function() {
  console.log('连接已建立');

  // 发送指令控制
  socket.send('your_control_command');
};

// 接收到消息时的回调函数
socket.onmessage = function(event) {
  console.log('接收到消息:', event.data);
};

// 连接关闭时的回调函数
socket.onclose = function(event) {
  console.log('连接已关闭');
};

使用了 ws:// 前缀来指定 WebSocket 连接，但实际中端只支持 TCP 协议，所以这个连接实际上是无法建立成功的