使用javascript從瀏覽器連接到TCP Socket

Question

我有一個 vb.net 應用程序，它打開一個套接字並監聽它。

我需要使用在瀏覽器上運行的 javascript 通過此套接字與該應用程序進行通信。 那就是我需要在這個套接字上發送一些數據，以便在這個套接字上偵聽的應用程序可以獲取該數據，使用一些遠程調用做一些事情並獲取更多數據並將其放回我的 javascript 需要的套接字上在瀏覽器中閱讀並打印它。

我試過，socket.io，websockify 但沒有一個被證明是有用的。

因此，問題是，我正在嘗試的甚至可能嗎？ 有沒有辦法讓在瀏覽器中運行的 javascript 可以連接到 tcp 套接字並發送一些數據並監聽它以獲取套接字上的更多數據響應並將其打印到瀏覽器。

如果這是可能的，有人可以為我指出正確的方向，以幫助我建立目標。

Answer 1

至於你的問題，目前你將不得不依賴 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!");         
    });
});

Answer 2

這可以通過導航器界面實現，如下所示：

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 中的概述編寫自己的服務器

Answer 3

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

Answer 4

請參閱jsocket 。 自己沒用過。 自上次更新以來已超過 3 年（截至 2014 年 6 月 26 日）。

* 使用閃光燈 :(

從文檔：

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

Answer 5

您真正要尋找的解決方案是網絡套接字。 但是，chromium 項目開發了一些新技術，即直接 TCP 連接TCPchromium

Answer 6

為了實現您想要的，您必須編寫兩個應用程序（例如，Java 或 Python）：

1. 位於客戶端機器上的橋接應用程序，可以處理 TCP/IP 套接字和 WebSocket。 它將與有問題的 TCP/IP 套接字交互。

2. 可以與 WebSockets 對話的服務器端應用程序（例如 JSP/Servlet WAR）。 它至少包括一個可供瀏覽器訪問的 HTML 頁面（如果需要，還包括服務器端處理代碼）。

它應該像這樣工作

1. Bridge 將打開到 Web 應用程序的 WS 連接（因為服務器無法連接到客戶端）。
2. Web 應用程序將要求客戶端識別自己
3. 網橋客戶端向服務器發送一些 ID 信息，服務器存儲這些信息以識別網橋。
   4. 瀏覽器可查看頁面使用 JS 連接到 WS 服務器。
   5. 重復第 3 步，但針對基於 JS 的頁面
   6. 基於 JS 的頁面向服務器發送一個命令，包括它必須去哪個網橋。
   7. 服務器將命令轉發到網橋。
   8. 網橋打開一個 TCP/IP 套接字並與之交互（發送消息，獲得響應）。
   9. Bridge 通過 WS 向服務器發送響應
   10. WS 將響應轉發到瀏覽器可查看的頁面
   11. JS 處理響應並做出相應的反應
   12. 重復直到任一客戶端斷開連接/卸載

注 1：上述步驟是一個極大的簡化，不包括有關錯誤處理和 keepAlive 請求的信息，以防客戶端過早斷開連接或服務器需要通知客戶端它正在關閉/重新啟動。

注意 2：根據您的需要，如果有問題的 TCP/IP 套接字服務器（網橋與之通信）與服務器應用程序在同一台機器上，則可以將這些組件合並為一個。