web-dev-qa-db-ja.com

JavaScriptを使用してブラウザからTCP Socketに接続する

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

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

Socket.io、websockifyを試しましたが、どれも有用であると証明されていません。

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

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

javascripthtml5node.jssocketstcpclient
92
swordfish

あなたの問題に関しては、現時点では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!");         
    });
});
45
Robin Rizvi

HTML5 Web Socketsを使用できます：

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

追加：

更新：2016年1月のW3Cドラフトから：

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

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

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

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)
    );
  }
);
28
Darren

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>
5
AlikElzin-kilaka

ws2s プロジェクトは、ブラウザ側のjsにソケットを持ち込むことを目的としています。これは、websocketをソケットに変換するwebsocketサーバーです。

ws2sの回路図

enter image description here

コードサンプル：

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

必要なものを実現するには、2つのアプリケーションを（たとえば、JavaまたはPythonで）作成する必要があります。

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

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

このように動作するはずです

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

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

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

0
Agi Hammerthief

あなたが本当に探している解決策は、Webソケットです。ただし、chromeプロジェクトは、直接TCP接続であるいくつかの新しいテクノロジーを開発しました TCP chroma

0
Sdedelbrock