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

IT技术 javascript html node.js sockets tcpclient
2021-01-21 05:23:53

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

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

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

因此,问题是,我正在尝试的甚至可能吗?有没有办法让在浏览器中运行的 javascript 可以连接到 tcp 套接字并发送一些数据并监听它以获取套接字上的更多数据响应并将其打印到浏览器。

如果这是可能的,有人可以为我指出正确的方向,以帮助我建立目标。

6个回答

至于你的问题,目前你将不得不依赖 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 套接字。这些功能仅适用于扩展程序,尽管有文档记载,但目前处于隐藏状态。话虽如此,一些开发人员已经在使用它创建有趣的项目,例如这个 IRC 客户端

要访问此 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!");         
    });
});
@FirasAbdAlrahman 我认为有各种安全策略管理 HTTP/S 的浏览器行为。因此,通过 TCP 的浏览器套接字连接与 HTTP/S 不同。
2021-03-21 05:23:53
与 Websockets 和 Rawsockets 相比有什么性能提升?
2021-03-23 05:23:53
是不是允许浏览器中的 javascript 连接到 tcp 端口,这是一个安全漏洞?想象一下你的 firefox/chrome 中的 javascript 连接到你本地运行的任何东西(比如 MySQL 数据库)并将数据发布到一个邪恶的站点?
2021-04-06 05:23:53
@ArunAvanathan 无论你用 ajax 做什么,你都可以用套接字来做,反之亦然......没有我认为的安全问题。
2021-04-08 05:23:53
哪些浏览器支持原始套接字?
2021-04-11 05:23:53

这可以通过导航器界面实现,如下所示:

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 中的概述编写自己的服务器

这个答案是完全错误的,应该删除。
2021-03-13 05:23:53
但是如何将消息放入浏览器窗口?:(
2021-03-14 05:23:53
@Brad 这个答案帮助了我,它肯定帮助了其他一些也有 22 个赞成票的人。
2021-03-20 05:23:53
要详细说明这个答案:服务器还必须使用 WebSocket 服务器进行侦听。WebSockets 不能直接连接到原始 TCP 套接字。websockify 是一个充当 WebSocket-to-TCP 代理的工具:它位于您的服务器上并侦听 WebSocket 连接,然后将 WebSocket 通信转发到指定的 TCP 套接字或从指定的 TCP 套接字转发。
2021-03-25 05:23:53
这并没有回答这个问题——websocket 是一种基于 TCP 的协议(例如 HTTP),而不是直接的 TCP 通信。
2021-03-26 05:23:53

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)
}

请参阅jsocket自己没用过。自上次更新以来已超过 3 年(截至 2014 年 6 月 26 日)。

* 使用flash灯 :(

文档

<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>

您真正要寻找的解决方案是网络套接字。但是,chromium 项目开发了一些新技术,即直接 TCP 连接TCPchromium