使用javascript从浏览器连接到TCP Socket答案

【问题标题】：Connecting to TCP Socket from browser using javascript使用javascript从浏览器连接到TCP Socket
【发布时间】：2023-03-16 03:30:02
【问题描述】：

我有一个打开套接字并监听它的 vb.net 应用程序。

我需要使用在浏览器上运行的 javascript 通过此套接字与该应用程序进行通信。那就是我需要在这个套接字上发送一些数据，以便正在侦听这个套接字的应用程序可以获取该数据，使用一些远程调用做一些事情并获取更多数据并将其放回我的 javascript 需要的套接字上在浏览器中阅读并打印。

我试过了，socket.io，websockify，但没有一个被证明是有用的。

因此问题是，我正在尝试的是否可能？有没有办法让浏览器中运行的 javascript 连接到 tcp 套接字并发送一些数据并在其上侦听套接字上的更多数据响应并将其打印到浏览器。

如果可能的话，有人能指出我正确的方向，哪一个可以帮助我建立目标。

【问题讨论】：

不，你仅限于 WebSockets
@Bergi - HTTP 是基于 tcp 的协议，那么为什么可以建立 HTTP 连接但不能建立 TCP？
@kilaka：因为（标准）API 在浏览器环境中可用are limited to those。
可能重复：stackoverflow.com/questions/9154035/…
我看到一个新的标准正在爬上 Javascript 的脊梁：w3.org/TR/raw-sockets。

标签： javascript html node.js sockets tcpclient

【解决方案1】：

这可以通过如下所示的导航界面实现：

navigator.tcpPermission.requestPermission({remoteAddress:"127.0.0.1", remotePort:6789}).then(
  () => {
    // Permission was granted
    // Create a new TCP client socket and connect to remote host
    var mySocket = new TCPSocket("127.0.0.1", 6789);

    // Send data to server
    mySocket.writeable.write("Hello World").then(
        () => {

            // Data sent sucessfully, wait for response
            console.log("Data has been sent to server");
            mySocket.readable.getReader().read().then(
                ({ value, done }) => {
                    if (!done) {
                        // Response received, log it:
                        console.log("Data received from server:" + value);
                    }

                    // Close the TCP connection
                    mySocket.close();
                }
            );
        },
        e => console.error("Sending error: ", e)
    );
  }
);

w3.org tcp-udp-sockets 文档中概述了更多详细信息。

http://raw-sockets.sysapps.org/#interface-tcpsocket

https://www.w3.org/TR/tcp-udp-sockets/

另一种选择是使用Chrome Sockets

创建连接

chrome.sockets.tcp.create({}, function(createInfo) {
  chrome.sockets.tcp.connect(createInfo.socketId,
    IP, PORT, onConnectedCallback);
});

发送数据

chrome.sockets.tcp.send(socketId, arrayBuffer, onSentCallback);

接收数据

chrome.sockets.tcp.onReceive.addListener(function(info) {
  if (info.socketId != socketId)
    return;
  // info.data is an arrayBuffer.
});

你也可以尝试使用HTML5 Web Sockets（虽然这不是直接的TCP通信）：

var connection = new WebSocket('ws://IPAddress:Port');

connection.onopen = function () {
  connection.send('Ping'); // Send the message 'Ping' to the server
};

http://www.html5rocks.com/en/tutorials/websockets/basics/

您的服务器还必须使用 WebSocket 服务器（例如 pywebsocket）进行侦听，或者您可以按照Mozilla 中的说明编写自己的服务器

【讨论】：

要详细说明这个答案：服务器还必须使用 WebSocket 服务器进行侦听。 WebSockets 不能直接连接到原始 TCP 套接字。 websockify 是一个充当 WebSocket 到 TCP 代理的工具：它位于您的服务器上并侦听 WebSocket 连接，然后将 WebSocket 通信转发到指定的 TCP 套接字或从指定的 TCP 套接字转发。
这不能回答问题 - websocket 是基于 TCP 的协议（例如 HTTP），而不是直接的 TCP 通信。
但是如何将消息放在浏览器窗口中呢？ :(
这个答案完全错误，应该删除。
@Brad 这个答案帮助了我，它一定也帮助了其他一些也有 22 票的人。

【解决方案2】：

您真正需要的解决方案是网络套接字。不过chromium项目开发了一些新技术，就是直接TCP连接TCP chromium

【讨论】：

【解决方案3】：

至于您的问题，目前您将不得不依赖 XHR 或 websockets。

目前还没有流行的浏览器为 JavaScript 实现任何这样的原始套接字 API，可以让您创建和访问原始套接字，但是在 JavaScript 中实现原始套接字 API 的草案正在进行中。看看这些链接：
http://www.w3.org/TR/raw-sockets/
https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

Chrome 现在在其“实验性”API 中支持原始 TCP 和 UDP 套接字。这些功能仅适用于扩展程序，虽然已记录在案，但目前仍处于隐藏状态。话虽如此，一些开发人员已经在使用它创建有趣的项目，例如this IRC client。

要访问此 API，您需要在扩展程序的清单中启用实验标志。使用套接字非常简单，例如：

chrome.experimental.socket.create('tcp', '127.0.0.1', 8080, function(socketInfo) {
  chrome.experimental.socket.connect(socketInfo.socketId, function (result) {
        chrome.experimental.socket.write(socketInfo.socketId, "Hello, world!");         
    });
});

【讨论】：

哪些浏览器支持原始套接字？
与 Websockets 和 Rawsockets 相比，性能是否有所提升？
不允许浏览器中的 javascript 连接到 tcp 端口，是一个安全漏洞吗？想象一下，你的 firefox/chrome 中的 javascript 连接到你在本地运行的任何东西（比如 MySQL DB）并将数据发布到一个邪恶的网站？
@ArunAvanathan 无论你用 ajax 做什么，你都可以用套接字做，反之亦然......我认为没有安全问题。
@FirasAbdAlrahman 我认为有各种 security policies 管理 HTTP/S 的浏览器行为。所以基于 TCP 的浏览器套接字连接与 HTTP/S 不同。

【解决方案4】：

见jsocket。自己没用过。自上次更新以来已超过 3 年（截至 2014 年 6 月 26 日）。

* 使用闪光灯 :(

来自documentation：

<script type='text/javascript'>
    // Host we are connecting to
    var host = 'localhost'; 
    // Port we are connecting on
    var port = 3000;

    var socket = new jSocket();

    // When the socket is added the to document 
    socket.onReady = function(){
            socket.connect(host, port);             
    }

    // Connection attempt finished
    socket.onConnect = function(success, msg){
            if(success){
                    // Send something to the socket
                    socket.write('Hello world');            
            }else{
                    alert('Connection to the server could not be estabilished: ' + msg);            
            }       
    }
    socket.onData = function(data){
            alert('Received from socket: '+data);   
    }

    // Setup our socket in the div with the id="socket"
    socket.setup('mySocket');       
</script>

【讨论】：

【解决方案5】：

ws2s 项目旨在将套接字引入浏览器端 js。它是一个将 websocket 转换为 socket 的 websocket 服务器。

ws2s示意图

代码示例：

var socket = new WS2S("wss://ws2s.feling.io/").newSocket()

socket.onReady = () => {
  socket.connect("feling.io", 80)
  socket.send("GET / HTTP/1.1\r\nHost: feling.io\r\nConnection: close\r\n\r\n")
}

socket.onRecv = (data) => {
  console.log('onRecv', data)
}

【讨论】：

【解决方案6】：

为了实现您想要的，您必须编写两个应用程序（例如，使用 Java 或 Python）：

位于客户端计算机上的桥接应用程序，可以处理 TCP/IP 套接字和 WebSockets。它将与相关的 TCP/IP 套接字交互。
可以与 WebSocket 通信的服务器端应用程序（例如 JSP/Servlet WAR）。它包括至少一个可供浏览器访问的 HTML 页面（如果需要，还包括服务器端处理代码）。

它应该像这样工作

Bridge 将打开到 Web 应用程序的 WS 连接（因为服务器无法连接到客户端）。
Web 应用程序将要求客户端标识自己
网桥客户端向服务器发送一些 ID 信息，服务器将其存储以识别网桥。
1. 浏览器可见页面使用JS连接到WS服务器。
2. 重复第 3 步，但针对基于 JS 的页面
3. 基于 JS 的页面向服务器发送命令，包括它必须去哪个桥。
4. 服务器将命令转发到网桥。
5. 网桥打开一个 TCP/IP 套接字并与之交互（发送消息，获得响应）。
6. Bridge 通过 WS 向服务器发送响应
7. WS 将响应转发到浏览器可查看的页面
8. JS 处理响应并做出相应的反应
9. 重复直到任一客户端断开/卸载

注意 1： 上述步骤是一个巨大的简化，不包括有关错误处理和 keepAlive 请求的信息，以防客户端过早断开连接或服务器需要通知客户端它是关闭/重启。

注意 2： 根据您的需要，如果有问题的 TCP/IP 套接字服务器（网桥与之通信）与服务器应用程序。

【讨论】：