Connexion à TCP Socket depuis le navigateur en utilisant javascript


111

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

J'ai besoin de communiquer via cette socket à cette application en utilisant un javascript fonctionnant sur un navigateur. C'est-à-dire que je dois envoyer des données sur cette prise afin que l'application qui écoute sur cette prise puisse prendre ces données, faire des choses en utilisant des appels à distance et obtenir plus de données et les remettre sur la prise dont mon javascript a besoin lisez-le et imprimez-le dans le navigateur.

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

D'où la question, est-ce que ce que j'essaye est encore possible? Existe-t-il un moyen pour un javascript exécuté dans un navigateur de se connecter à une socket tcp et d'envoyer des données et d'écouter dessus pour une réponse de données supplémentaire sur le socket et de l'imprimer dans le navigateur.

Si cela est possible, quelqu'un peut-il m'indiquer dans la bonne direction ce qui m'aiderait à établir l'objectif.


3
Non, vous êtes limité aux WebSockets
Bergi

2
@Bergi - HTTP est un protocole sur tcp, alors pourquoi une connexion HTTP peut-elle être établie mais pas TCP?
AlikElzin-kilaka

@kilaka: Parce que les API (standard) disponibles dans un environnement de navigateur sont limitées à celles-ci .
Bergi


6
Je vois un nouveau standard ramper dans le dos de Javascript: w3.org/TR/raw-sockets .
AlikElzin-kilaka

Réponses:


57

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

Actuellement, aucun navigateur populaire n'a implémenté une telle api de sockets brutes pour javascript qui vous permet de créer et d'accéder à des sockets brutes, mais un projet pour la mise en œuvre de l'api de sockets brutes en JavaScript est en cours. Jetez un œ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 ne sont disponibles que pour les extensions et, bien que documentées, sont masquées pour le moment. Cela dit, certains développeurs créent déjà des projets intéressants en l'utilisant, comme ce client IRC .

Pour accéder à cette API, vous devez activer l'indicateur expérimental dans le manifeste de votre extension. L'utilisation de 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!");         
    });
});

Quels navigateurs prennent en charge les sockets bruts?
AlikElzin-kilaka

2
Les performances augmentent-elles par rapport aux Websockets et Rawsockets?
NiCk Newman

3
Autoriser javascript dans le navigateur à se connecter à un port TCP n'est-il pas une faille de sécurité? Imaginez que javascript dans votre Firefox / Chrome se connecte à tout ce que vous exécutez localement (disons MySQL DB) et publiez des données sur un site maléfique?
Arun Avanathan

@ArunAvanathan quoi que vous fassiez avec ajax, vous pouvez le faire avec des sockets et vice-versa ... pas de problème de sécurité comme je le pense.
Firas Abd Alrahman

1
@FirasAbdAlrahman Je pense qu'il existe diverses politiques de sécurité régissant le comportement du navigateur pour HTTP / S. Ainsi, la connexion de socket de navigateur sur TCP n'est pas la même que HTTP / S.
Arun Avanathan

30

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 décrits dans la documentation de w3.org tcp-udp-sockets.

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

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

Une autre alternative consiste à utiliser des sockets Chrome

Créer des connexions

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 de données

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

Vous pouvez également utiliser essayer d'utiliser HTML5 Web Sockets(bien qu'il ne s'agisse pas d'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 avec un serveur WebSocket tel que pywebsocket, sinon vous pouvez écrire le vôtre comme indiqué dans Mozilla


25
Pour élaborer un peu plus sur cette réponse: le serveur doit également être à l'écoute avec un serveur WebSocket. Les WebSockets ne peuvent pas se connecter directement à un socket TCP brut. websockify est un outil qui agit comme proxy WebSocket vers TCP: il se trouve sur votre serveur et écoute les connexions WebSocket, puis transmet la communication WebSocket vers et depuis un socket TCP spécifié.
apsillers

58
Cela ne répond pas à la question - websocket est un protocole sur TCP (comme HTTP par exemple) et non une communication TCP directe.
AlikElzin-kilaka

1
mais comment mettre le message dans la fenêtre du navigateur? :(
shzyincu

3
Cette réponse est totalement erronée et devrait être supprimée.
Brad

1
@Brad cette réponse m'a aidé et cela a dû aider d'autres personnes ayant également 22 votes positifs.
user1378687

6

Le projet ws2s vise à amener socket vers js côté navigateur. C'est un serveur websocket qui transforme websocket en socket.

diagramme schématique ws2s

entrez la description de l'image ici

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

5

Voir jsocket . Je ne l'ai pas utilisé moi-même. 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>

0

La solution que vous recherchez vraiment, ce sont les sockets Web. Cependant, le projet chrome a développé de nouvelles technologies qui sont des connexions TCP directes TCP chrome


0

Pour réaliser ce que vous voulez, vous devez écrire deux applications (en Java ou en Python, par exemple):

  1. Application de pont qui se trouve sur la machine du client et peut gérer à la fois les sockets TCP / IP et les WebSockets. Il interagira avec le socket TCP / IP en question.

  2. Application côté serveur (telle qu'un WAR JSP / Servlet) qui peut parler WebSockets. Il comprend au moins une page HTML (y compris le code de traitement côté serveur si nécessaire) à laquelle un navigateur peut accéder.

Ça devrait fonctionner comme ça

  1. Le pont 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 de pont envoie des informations d'identification au serveur, qui les stocke afin d'identifier le pont.
    1. La page consultable par navigateur se connecte au serveur WS à l'aide de JS.
    2. Répétez l'étape 3, mais pour la page basée sur JS
    3. La page basée sur JS envoie une commande au serveur, y compris vers quel pont il doit aller.
    4. Le serveur transmet la commande au pont.
    5. Le pont ouvre une socket TCP / IP et interagit avec elle (envoie un message, obtient une réponse).
    6. Le pont envoie une réponse au serveur via le WS
    7. Le WS transmet la réponse à la page consultable par navigateur
    8. Le JS traite la réponse et réagit en conséquence
    9. Répétez jusqu'à ce que l'un des clients se déconnecte / se décharge

Remarque 1: Les étapes ci-dessus sont une simplification considérable et n'incluent pas d'informations sur la gestion des erreurs et les demandes keepAlive, dans le cas où le client se déconnecte prématurément ou le serveur doit informer les clients qu'il est en train de s'arrêter / redémarrer.

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.