JavaScriptを使用してブラウザからTCPソケットに接続する

ソケットを開いてそれをリッスンするvb.netアプリケーションがあります。

ブラウザで実行されているJavaScriptを使用して、このソケット経由でそのアプリケーションと通信する必要があります。つまり、このソケットでデータを送信して、このソケットをリッスンしているアプリがそのデータを取得し、いくつかのリモート呼び出しを使用して何かを行い、さらにデータを取得して、JavaScriptが必要とするソケットに戻す必要があるそれをブラウザで読んで印刷してください。

私は、socket.io、websockifyを試しましたが、有用であると証明されたものはありません。

したがって、質問、私が試みていることは可能ですか？ブラウザで実行されているjavascriptがtcpソケットに接続してデータを送信し、ソケットでさらにデータレスポンスをリッスンしてブラウザに出力する方法はありますか。

これが可能である場合、目標を設定するのに役立つ正しい方向に私を向けることができます。

問題については、現在、XHRまたはWebSocketに依存する必要があります。

現在、ポピュラーなブラウザーでは、未加工のソケットを作成してアクセスできる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!");         
    });
});

これは、以下に示すように、ナビゲーターインターフェースを介して可能になります。

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/

もう1つの方法は、Chromeソケットを使用することです

接続を作成する

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/

サーバーはpywebsocketなどのWebSocketサーバーでもリッスンしている必要があります。または、Mozillaで概説されているように独自のサーバーを作成することもできます。

ws2sプロジェクトは、ブラウザ側のjsにソケットをもたらすことを目的としています。これは、websocketをソケットに変換する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日現在）。

*フラッシュを使用:(

ドキュメントから：

<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接続であるいくつかの新しいテクノロジーを開発しましたTCP chromium

希望どおりの結果を得るには、2つのアプリケーション（JavaまたはPythonなど）を作成する必要があります。

1. クライアントのマシン上にあり、TCP / IPソケットとWebSocketの両方を処理できるブリッジアプリ。問題のTCP / IPソケットと対話します。

2. WebSocketと通信できるサーバー側アプリ（JSP /サーブレットWARなど）。これには、ブラウザがアクセスする少なくとも1つのHTMLページ（必要に応じてサーバー側の処理コードを含む）が含まれています。

それはこのように機能するはずです

1. BridgeはWebサーバーへのWS接続を開きます（サーバーがクライアントに接続できないため）。
2. Webアプリはクライアントに自身の識別を要求します
3. ブリッジクライアントはサーバーにいくつかのID情報を送信します。サーバーは、ブリッジを識別するためにそれを保存します。
   4. ブラウザで表示可能なページは、JSを使用してWSサーバーに接続します。
   5. JSベースのページについて、ステップ3を繰り返します。
   6. JSベースのページは、どのブリッジに行く必要があるかを含め、コマンドをサーバーに送信します。
   7. サーバーはコマンドをブリッジに転送します。
   8. ブリッジはTCP / IPソケットを開き、それと対話します（メッセージを送信し、応答を取得します）。
   9. ブリッジはWSを介してサーバーに応答を送信します
   10. WSは応答をブラウザで表示可能なページに転送します
   11. JSは応答を処理し、それに応じて反応します
   12. いずれかのクライアントが切断/アンロードするまで繰り返す

注1：上記の手順は大幅に簡略化されており、クライアントが途中で切断したり、サーバーがクライアントにシャットダウン/再起動を通知したりする必要がある場合は、エラー処理とkeepAlive要求に関する情報は含まれません。

注2：必要に応じて、問題のTCP / IPソケットサーバー（ブリッジが通信するサーバー）がサーバーアプリと同じマシン上にある場合、これらのコンポーネントを1つにマージできる場合があります。