자바 스크립트를 사용하여 브라우저에서 TCP 소켓에 연결

소켓을 열고 수신하는 vb.net 응용 프로그램이 있습니다.

이 소켓을 통해 브라우저에서 실행되는 자바 스크립트를 사용하여 해당 애플리케이션과 통신해야합니다. 즉,이 소켓에서 수신하는 앱이 해당 데이터를 가져오고, 원격 호출을 사용하여 일부 작업을 수행하고, 더 많은 데이터를 가져 와서 내 자바 스크립트가 필요한 소켓에 다시 넣을 수 있도록이 소켓에 데이터를 보내야합니다. 브라우저에서 읽고 인쇄하십시오.

나는 socket.io, websockify를 시도했지만 유용한 것으로 입증되지 않았습니다.

따라서 질문은 내가 시도하는 것이 가능합니까? 브라우저에서 실행되는 자바 스크립트가 tcp 소켓에 연결하여 일부 데이터를 보내고 소켓에서 더 많은 데이터 응답을 수신하고 브라우저에 인쇄하는 방법이 있습니까?

이것이 가능하다면 어떤 사람은 목표를 설정하는 데 도움이 될 올바른 방향으로 나를 가리킬 수 있습니다.

문제에 관해서는 현재 XHR 또는 웹 소켓에 의존해야합니다.

현재 널리 사용되는 브라우저는 원시 소켓을 만들고 액세스 할 수있는 자바 스크립트 용 원시 소켓 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/

또 다른 대안은 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에 소켓을 가져 오는 것을 목표로합니다. 웹 소켓을 소켓으로 변환하는 웹 소켓 서버입니다.

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>

실제로 찾고있는 솔루션은 웹 소켓입니다. 그러나 크롬 프로젝트는 직접 TCP 연결 TCP 크롬 인 몇 가지 새로운 기술을 개발했습니다.

원하는 것을 달성하려면 두 개의 애플리케이션 (예 : Java 또는 Python)을 작성해야합니다.

1. 클라이언트 컴퓨터에 있으며 TCP / IP 소켓과 WebSocket을 모두 처리 할 수있는 브리지 앱입니다. 문제의 TCP / IP 소켓과 상호 작용합니다.

2. WebSocket과 통신 할 수있는 서버 측 앱 (예 : JSP / Servlet WAR). 브라우저에서 액세스 할 수있는 HTML 페이지 (필요한 경우 서버 측 처리 코드 포함)가 하나 이상 포함되어 있습니다.

다음과 같이 작동합니다.

1. Bridge는 웹 앱에 대한 WS 연결을 엽니 다 (서버가 클라이언트에 연결할 수 없기 때문에).
2. 웹 앱은 클라이언트에게 자신을 식별하도록 요청합니다.
3. 브릿지 클라이언트는 브릿지를 식별하기 위해 저장하는 서버에 일부 ID 정보를 보냅니다.
   4. 브라우저에서 볼 수있는 페이지는 JS를 사용하여 WS 서버에 연결됩니다.
   5. 3 단계를 반복하되 JS 기반 페이지의 경우
   6. JS 기반 페이지는 이동해야하는 브리지를 포함하여 서버에 명령을 보냅니다.
   7. 서버는 명령을 브릿지로 전달합니다.
   8. 브리지는 TCP / IP 소켓을 열고 상호 작용합니다 (메시지를 보내고 응답을받습니다).
   9. Bridge는 WS를 통해 서버에 응답을 보냅니다.
   10. WS는 브라우저에서 볼 수있는 페이지로 응답을 전달합니다.
   11. JS는 응답을 처리하고 그에 따라 반응합니다.
   12. 클라이언트가 연결 해제 / 언로드 될 때까지 반복

참고 1 : 위의 단계는 대폭 단순화되었으며 클라이언트가 조기에 연결이 끊어 지거나 서버가 종료 / 재시작 중임을 클라이언트에 알려야하는 경우 오류 처리 및 keepAlive 요청에 대한 정보를 포함하지 않습니다.

참고 2 : 필요에 따라 문제의 TCP / IP 소켓 서버 (브리지가 통신하는)가 서버 앱과 동일한 시스템에있는 경우 이러한 구성 요소를 하나로 병합 할 수 있습니다.