Connexion à un socket TCP à partir d'un navigateur à l'aide de javascript

Question

J'ai une application vb.net qui ouvre un socket et l'écoute.

J'ai besoin de communiquer via ce socket avec cette application en utilisant un javascript exécuté sur un navigateur. C'est-à-dire que j'ai besoin d'envoyer des données sur ce socket pour que l'application qui écoute sur ce socket puisse prendre ces données, faire quelque chose en utilisant des appels à distance et récupérer d'autres données et les remettre sur le socket que mon javascript doit lire et imprimer dans le navigateur.

J'ai essayé, socket.io, websockify mais aucun ne s'est avéré utile.

D'où la question : ce que j'essaie est-il possible ? Existe-t-il un moyen pour qu'un javascript s'exécutant dans un navigateur puisse se connecter à un socket tcp et envoyer des données et écouter la réponse de données supplémentaires sur le socket et l'imprimer sur le navigateur.

Si cela est possible, quelqu'un peut-il m'indiquer la voie à suivre pour atteindre cet objectif ?

Answer 1

En ce qui concerne votre problème, vous devez actuellement dépendre de XHR ou de websockets pour cela.

Actuellement, aucun navigateur populaire n'a mis en œuvre une telle api raw sockets pour javascript qui vous permet de créer et d'accéder à des sockets bruts, mais un projet pour la mise en œuvre de l'api raw sockets en JavaScript est en cours. Jetez un coup d'œil à ces liens :
http://www.w3.org/TR/raw-sockets/
https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

Chrome prend désormais en charge les sockets TCP et UDP bruts dans ses API "expérimentales". Ces fonctionnalités sont uniquement disponibles pour les extensions et, bien que documentés, sont cachés pour le moment. Ceci étant dit, certains développeurs créent déjà des projets intéressants en l'utilisant, tels que ce client IRC .

Pour accéder à cette API, vous devez activer le drapeau expérimental dans le manifeste de votre extension. L'utilisation des sockets est assez simple, par exemple :

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

Cela sera possible via l'interface du navigateur comme indiqué ci-dessous :

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

Plus de détails sont présentés dans la documentation tcp-udp-sockets de w3.org.

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

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

Une autre alternative est d'utiliser Douilles chromées

Créer des liens

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

Envoi de données

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

Réception des données

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

Vous pouvez également essayer d'utiliser HTML5 Web Sockets (Bien que ce ne soit pas une communication TCP directe) :

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/

Votre serveur doit également être à l'écoute d'un serveur WebSocket tel que pywebsocket, ou bien vous pouvez écrire votre propre serveur comme indiqué à l'adresse suivante Mozilla

Answer 3

ws2s a pour but d'introduire le socket dans les js côté navigateur. Il s'agit d'un serveur websocket qui transforme websocket en socket.

ws2s schéma de principe

exemple de code :

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

Voir jsocket . Je ne l'ai pas utilisé moi-même. Cela fait plus de 3 ans depuis la dernière mise à jour (au 26/6/2014).

* Utilise le flash :(

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

Answer 5

Pour obtenir ce que vous voulez, il vous faudrait écrire deux applications (en Java ou en Python, par exemple) :

1. Application passerelle qui se trouve sur la machine du client et qui peut traiter à la fois les sockets TCP/IP et les WebSockets. Elle interagira avec le socket TCP/IP en question.

2. Application côté serveur (telle qu'un WAR JSP/Servlet) qui peut parler aux WebSockets. Elle comprend au moins une page HTML (y compris le code de traitement côté serveur, le cas échéant) à laquelle un navigateur peut accéder.

Cela devrait fonctionner comme suit

1. The Bridge ouvrira une connexion WS à l'application web (car un serveur ne peut pas se connecter à un client).
2. L'application Web demandera au client de s'identifier.
3. Le client du pont envoie des informations d'identification au serveur, qui les stocke afin d'identifier le pont.
   4. La page visible par le navigateur se connecte au serveur WS en utilisant JS.
   5. Répétez l'étape 3, mais pour la page basée sur JS
   6. La page basée sur JS envoie une commande au serveur, y compris à quel pont elle doit se rendre.
   7. Le serveur transmet la commande au pont.
   8. La passerelle ouvre une socket TCP/IP et interagit avec elle (envoie un message, reçoit une réponse).
   9. Le Bridge envoie une réponse au serveur via le WS
   10. Le WS transmet la réponse à la page consultable par le navigateur.
   11. La JS traite la réponse et réagit en conséquence.
   12. Répétez jusqu'à ce que le client se déconnecte/décharge.

Note 1 : Les étapes ci-dessus sont très simplifiées et n'incluent pas d'informations sur la gestion des erreurs et les requêtes keepAlive, dans le cas où un client se déconnecte prématurément ou que le serveur doit informer les clients qu'il s'arrête/redémarre.

Note 2 : Selon vos besoins, il peut être possible de fusionner ces composants en un seul si le serveur de socket TCP/IP en question (auquel la passerelle communique) se trouve sur la même machine que l'application serveur.