Подключение к TCP Socket из браузера с помощью javascript

111

У меня есть приложение vb.net, которое открывает сокет и слушает его.

Мне нужно связаться через этот сокет с этим приложением, используя javascript, запущенный в браузере. То есть мне нужно отправить некоторые данные в этот сокет, чтобы приложение, которое прослушивает этот сокет, могло принимать эти данные, делать некоторые вещи, используя некоторые удаленные вызовы, получать дополнительные данные и возвращать их в сокет, который нужен моему javascript для прочтите и распечатайте в браузере.

Я пробовал, socket.io, websockify, но ни один из них не оказался полезным.

Отсюда вопрос: возможно ли то, что я пытаюсь сделать? Есть ли способ, которым javascript, запущенный в браузере, может подключаться к сокету tcp и отправлять некоторые данные и прослушивать их, чтобы получить дополнительный ответ данных в сокете и распечатать его в браузере.

Если это возможно, может кто-нибудь указать мне правильное направление, которое поможет мне установить цель.

рыба-меч
источник
3
Нет, вы ограничены WebSockets
Берги
2
@Bergi - HTTP - это протокол поверх tcp, так почему можно установить соединение HTTP, но не TCP?
AlikElzin-kilaka
@kilaka: Потому что (стандартные) API, доступные в среде браузера , ограничены ими .
Bergi
Возможный дубликат: stackoverflow.com/questions/9154035/…
AlikElzin-kilaka 01
6
Я вижу новый стандарт, подкрадывающийся к Javascript: w3.org/TR/raw-sockets .
AlikElzin-kilaka 01

Ответы:

57

Что касается вашей проблемы, в настоящее время вам придется зависеть от XHR или веб-сокетов.

В настоящее время ни в одном популярном браузере не реализованы такие API сырых сокетов для javascript, которые позволяют создавать и получать доступ к необработанным сокетам, но черновик реализации API сырых сокетов в JavaScript находится в стадии разработки. Взгляните на эти ссылки:
http://www.w3.org/TR/raw-sockets/
https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

Chrome теперь поддерживает необработанные сокеты TCP и UDP в своих «экспериментальных» API. Эти функции доступны только для расширений и, хотя и задокументированы, на данный момент скрыты. При этом некоторые разработчики уже создают интересные проекты, используя его, например, этот 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!");         
    });
});
Робин Ризви
источник
Какие браузеры поддерживают сырые сокеты?
AlikElzin-kilaka
2
Повышается ли производительность по сравнению с Websockets и Rawsockets?
NiCk Newman
3
Разве не позволяет javascript в браузере подключаться к TCP-порту, дыре в безопасности? Представьте, что javascript в вашем firefox / chrome подключается ко всему, что вы запускаете локально (скажем, MySQL DB), и публикуете данные на вредоносном сайте?
Арун Аванатан
@ArunAvanathan, что бы вы ни делали с ajax, вы можете делать с сокетами и наоборот ... как я думаю, проблем с безопасностью нет.
Фирас Абд Альрахман,
1
@FirasAbdAlrahman Я думаю, что существуют различные политики безопасности, управляющие поведением браузера для HTTP / S. Таким образом, соединение сокета браузера через TCP отличается от HTTP / S.
Арун Аванатан
30

Это будет возможно через интерфейс навигатора, как показано ниже:

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/

Ваш сервер также должен прослушивать сервер WebSocket, такой как pywebsocket, в качестве альтернативы вы можете написать свой собственный, как описано в Mozilla.

Даррен
источник
25
Чтобы подробнее рассказать об этом ответе: сервер также должен прослушивать сервер WebSocket. WebSockets не может напрямую подключаться к необработанному TCP-сокету. websockify - это инструмент, который действует как прокси-сервер WebSocket-to-TCP: он находится на вашем сервере и прослушивает соединения WebSocket, а затем пересылает сообщения WebSocket в указанный сокет TCP и обратно.
apsillers
58
Это не отвечает на вопрос - websocket - это протокол поверх TCP (например, HTTP), а не прямая TCP-связь.
AlikElzin-kilaka,
1
а как поместить сообщение в окошко браузера? :(
shzyincu
3
Этот ответ совершенно неверен и должен быть удален.
Брэд
1
@Brad, этот ответ помог мне, и, должно быть, помог некоторым другим, также получившим 22 голоса.
user1378687 01
6

Проект ws2s направлен на перенос сокетов в js на стороне браузера. Это сервер websocket, который преобразует websocket в сокет.

принципиальная схема 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)
}
chenyan
источник
5

См. Jsocket . Сам не пользовался. Прошло более 3 лет с момента последнего обновления (по состоянию на 26.06.2014).

* Использует вспышку :(

Из документации :

<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

Решение, которое вы действительно ищете, - это веб-сокеты. Тем не менее, в проекте Chrome были разработаны некоторые новые технологии, которые являются прямыми TCP-соединениями TCP chromium

Sdedelbrock
источник
0

Чтобы добиться желаемого, вам нужно будет написать два приложения (например, на Java или Python):

  1. Приложение Bridge, которое находится на клиентском компьютере и может работать как с сокетами TCP / IP, так и с WebSockets. Он будет взаимодействовать с рассматриваемым сокетом TCP / IP.

  2. Серверное приложение (например, JSP / Servlet WAR), которое может взаимодействовать с WebSockets. Он включает по крайней мере одну HTML-страницу (включая код обработки на стороне сервера, если это необходимо), к которой может получить доступ браузер.

Это должно работать так

  1. Мост откроет соединение WS с веб-приложением (потому что сервер не может подключиться к клиенту).
  2. Веб-приложение попросит клиента идентифицировать себя
  3. Клиент моста отправляет некоторую идентификационную информацию на сервер, который сохраняет ее, чтобы идентифицировать мост.
    1. Страница, доступная для просмотра в браузере, подключается к серверу WS с помощью JS.
    2. Повторите шаг 3, но для страницы на основе JS
    3. Страница на основе JS отправляет серверу команду, в том числе, к какому мосту она должна перейти.
    4. Сервер пересылает команду мосту.
    5. Мост открывает сокет TCP / IP и взаимодействует с ним (отправляет сообщение, получает ответ).
    6. Мост отправляет ответ серверу через WS
    7. WS перенаправляет ответ на страницу, доступную для просмотра в браузере.
    8. JS обрабатывает ответ и соответствующим образом реагирует
    9. Повторяйте, пока любой из клиентов не отключится / не выгружается

Примечание 1. Вышеупомянутые шаги являются значительным упрощением и не включают информацию об обработке ошибок и запросах keepAlive в случае, если либо клиент преждевременно отключается, либо серверу необходимо сообщить клиентам, что он завершает работу / перезапускается.

Примечание 2. В зависимости от ваших потребностей эти компоненты можно объединить в один, если рассматриваемый сервер сокетов TCP / IP (с которым связывается мост) находится на том же компьютере, что и серверное приложение.

Аги Вор Молота
источник