Conexión a TCP Socket desde el navegador usando javascript


111

Tengo una aplicación vb.net que abre un socket y lo escucha.

Necesito comunicarme a través de este socket con esa aplicación usando un javascript que se ejecuta en un navegador. Es decir, necesito enviar algunos datos en este socket para que la aplicación que está escuchando en este socket pueda tomar esos datos, hacer algunas cosas usando algunas llamadas remotas y obtener más datos y volver a colocarlos en el socket que mi javascript necesita. léelo e imprímelo en el navegador.

He probado, socket.io, websockify pero ninguno ha demostrado ser útil.

De ahí la pregunta, ¿es posible lo que estoy intentando? ¿Hay alguna manera de que un javascript que se ejecuta en un navegador pueda conectarse a un socket tcp y enviar algunos datos y escucharlos para obtener más respuesta de datos en el socket e imprimirlos en el navegador?

Si esto es posible, alguien me puede indicar la dirección correcta que me ayudaría a establecer la meta.


3
No, estás limitado a WebSockets
Bergi

2
@Bergi - HTTP es un protocolo sobre tcp, entonces, ¿por qué se puede hacer una conexión HTTP pero no TCP?
AlikElzin-kilaka

@kilaka: porque las API (estándar) disponibles en un entorno de navegador están limitadas a esas .
Bergi


6
Veo un nuevo estándar arrastrándose por la columna vertebral de Javascript: w3.org/TR/raw-sockets .
AlikElzin-kilaka

Respuestas:


57

En cuanto a su problema, actualmente tendrá que depender de XHR o websockets para esto.

Actualmente, ningún navegador popular ha implementado ninguna api de sockets sin formato para javascript que le permita crear y acceder a sockets sin formato, pero se está preparando un borrador para la implementación de la api de sockets sin formato en JavaScript. Eche un vistazo a estos enlaces:
http://www.w3.org/TR/raw-sockets/
https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

Chrome ahora tiene soporte para sockets TCP y UDP sin procesar en sus API "experimentales". Estas funciones solo están disponibles para extensiones y, aunque están documentadas, están ocultas por el momento. Dicho esto, algunos desarrolladores ya están creando proyectos interesantes usándolo, como este cliente de IRC .

Para acceder a esta API, deberá habilitar la marca experimental en el manifiesto de su extensión. Usar sockets es bastante sencillo, por ejemplo:

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

¿Qué navegadores admiten sockets sin formato?
AlikElzin-kilaka

2
¿Algún aumento de rendimiento en comparación con Websockets y Rawsockets?
NiCk Newman

3
¿No es un agujero de seguridad permitir que JavaScript en el navegador se conecte a un puerto tcp? ¿Imagina que javascript en tu firefox / chrome se conecta a cualquier cosa que ejecutes localmente (digamos MySQL DB) y publicas datos en un sitio maligno?
Arun Avanathan

@ArunAvanathan, hagas lo que hagas con ajax, puedes hacerlo con sockets y viceversa ... no hay problema de seguridad como creo.
Firas Abd Alrahman

1
@FirasAbdAlrahman Creo que existen varias políticas de seguridad que rigen el comportamiento del navegador para HTTP / S. Entonces, la conexión del socket del navegador a través de TCP no es la misma que HTTP / S.
Arun Avanathan

30

Esto será posible a través de la interfaz del navegador como se muestra a continuación:

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

Se describen más detalles en la documentación tcp-udp-sockets de w3.org.

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

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

Otra alternativa es usar Chrome Sockets

Creando conexiones

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

Enviando datos

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

Recibiendo información

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

También puede usar intentar usar HTML5 Web Sockets(aunque esta no es una comunicación TCP directa):

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/

Su servidor también debe estar escuchando con un servidor WebSocket como pywebsocket, alternativamente puede escribir el suyo como se describe en Mozilla


25
Para elaborar un poco más sobre esta respuesta: el servidor también debe estar escuchando con un servidor WebSocket. WebSockets no puede conectarse directamente a un socket TCP sin procesar. websockify es una herramienta que actúa como proxy de WebSocket a TCP: se encuentra en su servidor y escucha las conexiones de WebSocket, y luego reenvía la comunicación de WebSocket hacia y desde un socket TCP especificado.
apsillers

58
Esto no responde a la pregunta : websocket es un protocolo sobre TCP (como HTTP, por ejemplo) y no una comunicación TCP directa.
AlikElzin-kilaka

1
pero ¿cómo poner el mensaje en la ventana del navegador? :(
shzyincu

3
Esta respuesta es totalmente incorrecta y debería eliminarse.
Brad

1
@Brad, esta respuesta me ayudó y debe haber ayudado a algunos otros que también tienen 22 votos a favor.
user1378687

6

ws2s proyecto tiene como objetivo llevar socket a js del lado del navegador. Es un servidor websocket que transforma websocket en socket.

diagrama esquemático de ws2s

ingrese la descripción de la imagen aquí

muestra de código:

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

Ver jsocket . Yo no lo he usado. Han pasado más de 3 años desde la última actualización (al 26/6/2014).

* Utiliza flash :(

De la documentación :

<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 solución que realmente está buscando son los sockets web. Sin embargo, el proyecto de cromo ha desarrollado algunas nuevas tecnologías que son conexiones TCP directas TCP cromo


0

Para lograr lo que desea, tendría que escribir dos aplicaciones (en Java o Python, por ejemplo):

  1. Aplicación puente que se encuentra en la máquina del cliente y puede trabajar con sockets TCP / IP y WebSockets. Interactuará con el socket TCP / IP en cuestión.

  2. Aplicación del lado del servidor (como JSP / Servlet WAR) que puede hablar con WebSockets. Incluye al menos una página HTML (incluido el código de procesamiento del lado del servidor si es necesario) a la que puede acceder un navegador.

Debería funcionar así

  1. El puente abrirá una conexión WS a la aplicación web (porque un servidor no se puede conectar a un cliente).
  2. La aplicación web le pedirá al cliente que se identifique
  3. El cliente del puente envía alguna información de identificación al servidor, que la almacena para identificar el puente.
    1. La página que se puede ver en el navegador se conecta al servidor WS mediante JS.
    2. Repita el paso 3, pero para la página basada en JS
    3. La página basada en JS envía un comando al servidor, incluido el puente al que debe ir.
    4. El servidor envía el comando al puente.
    5. El puente abre un socket TCP / IP e interactúa con él (envía un mensaje, obtiene una respuesta).
    6. El puente envía una respuesta al servidor a través de WS
    7. El WS reenvía la respuesta a la página visible del navegador.
    8. El JS procesa la respuesta y reacciona en consecuencia
    9. Repita hasta que el cliente se desconecte / descargue

Nota 1: Los pasos anteriores son una gran simplificación y no incluyen información sobre el manejo de errores y las solicitudes keepAlive, en caso de que el cliente se desconecte prematuramente o el servidor necesite informar a los clientes que se está apagando / reiniciando.

Nota 2: Dependiendo de sus necesidades, podría ser posible fusionar estos componentes en uno si el servidor de socket TCP / IP en cuestión (con el que habla el puente) está en la misma máquina que la aplicación del servidor.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.