Kết nối với TCP Socket từ trình duyệt bằng javascript


111

Tôi có một ứng dụng vb.net mở một ổ cắm và nghe trên đó.

Tôi cần giao tiếp qua ổ cắm này với ứng dụng đó bằng javascript chạy trên trình duyệt. Đó là tôi cần gửi một số dữ liệu trên ổ cắm này để ứng dụng đang nghe trên ổ cắm này có thể lấy dữ liệu đó, thực hiện một số công việc bằng cách sử dụng một số cuộc gọi từ xa và nhận thêm một số dữ liệu và đặt nó trở lại ổ cắm mà javascript của tôi cần đọc và in nó trong trình duyệt.

Tôi đã thử, socket.io, websockify nhưng không có cái nào tỏ ra hữu ích.

Do đó câu hỏi đặt ra là điều tôi đang cố gắng có khả thi không? Có cách nào mà javascript chạy trong trình duyệt có thể kết nối với ổ cắm tcp và gửi một số dữ liệu và lắng nghe nó để biết thêm một số phản hồi dữ liệu trên ổ cắm và in nó ra trình duyệt không.

Nếu điều này có thể, một số người có thể chỉ cho tôi đi đúng hướng mà sẽ giúp tôi thiết lập mục tiêu.


3
Không, bạn bị giới hạn ở WebSockets
Bergi

2
@Bergi - HTTP là một giao thức qua tcp, vậy tại sao một kết nối HTTP có thể được thực hiện mà không phải là TCP?
AlikElzin-kilaka

@kilaka: Vì các API (tiêu chuẩn) có sẵn trong môi trường trình duyệt bị giới hạn ở những API đó .
Bergi


6
Tôi thấy một tiêu chuẩn mới đang len lỏi vào cột sống của Javascript: w3.org/TR/raw-sockets .
AlikElzin-kilaka

Câu trả lời:


57

Đối với vấn đề của bạn, hiện tại bạn sẽ phải phụ thuộc vào XHR hoặc websockets cho việc này.

Hiện tại chưa có trình duyệt phổ biến nào triển khai bất kỳ api socket thô nào như vậy cho javascript cho phép bạn tạo và truy cập các socket thô, nhưng bản nháp để triển khai api socket thô trong JavaScript đang được thực hiện. Hãy xem các liên kết sau:
http://www.w3.org/TR/raw-sockets/
https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

Chrome hiện đã hỗ trợ các ổ cắm TCP và UDP thô trong các API 'thử nghiệm' của nó. Các tính năng này chỉ có sẵn cho các tiện ích mở rộng và mặc dù đã được ghi lại bằng tài liệu nhưng hiện tại vẫn bị ẩn. Phải nói rằng, một số nhà phát triển đã và đang tạo ra các dự án thú vị bằng cách sử dụng nó, chẳng hạn như ứng dụng khách IRC này .

Để truy cập API này, bạn cần bật cờ thử nghiệm trong tệp kê khai của tiện ích. Sử dụng ổ cắm khá đơn giản, ví dụ:

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

Những trình duyệt nào hỗ trợ ổ cắm thô?
AlikElzin-kilaka

2
Bất kỳ hiệu suất nào tăng so với Websockets và Rawsockets?
NiCk Newman,

3
Không cho phép javascript trong Trình duyệt kết nối với cổng tcp, một lỗ hổng bảo mật? Hãy tưởng tượng javascript trong firefox / chrome của bạn kết nối với bất kỳ thứ gì bạn chạy cục bộ (giả sử MySQL DB) và xuất bản dữ liệu lên một trang web xấu?
Arun Avanathan

@ArunAvanathan bất cứ điều gì bạn làm với ajax, bạn có thể làm với ổ cắm và ngược lại ... không có vấn đề bảo mật như tôi nghĩ.
Firas Abd Alrahman

1
@FirasAbdAlrahman Tôi nghĩ rằng có nhiều chính sách bảo mật khác nhau điều chỉnh hành vi của trình duyệt đối với HTTP / S. Vì vậy, kết nối socket của trình duyệt qua TCP không giống như HTTP / S.
Arun Avanathan

30

Điều này có thể thực hiện được thông qua giao diện điều hướng như hình dưới đây:

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

Các chi tiết khác được nêu trong tài liệu w3.org tcp-udp-sockets.

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

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

Một giải pháp thay thế khác là sử dụng Chrome Sockets

Tạo kết nối

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

Gửi dữ liệu

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

Nhận dữ liệu

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

Bạn cũng có thể sử dụng thử sử dụng HTML5 Web Sockets(Mặc dù đây không phải là giao tiếp TCP trực tiếp):

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/

Máy chủ của bạn cũng phải đang lắng nghe với máy chủ WebSocket chẳng hạn như pywebsocket, hoặc bạn có thể viết của riêng bạn như đã nêu tại Mozilla


25
Để giải thích thêm một chút về câu trả lời này: máy chủ cũng phải lắng nghe máy chủ WebSocket. WebSockets không thể kết nối trực tiếp với ổ cắm TCP thô. websockify là một công cụ hoạt động như proxy WebSocket-to-TCP: nó nằm trên máy chủ của bạn và lắng nghe các kết nối WebSocket, sau đó chuyển tiếp giao tiếp WebSocket đến và từ một ổ cắm TCP được chỉ định.
apsillers 13/09/12

58
Điều này không trả lời câu hỏi - websocket là một giao thức qua TCP (như HTTP chẳng hạn) và không phải là giao tiếp TCP trực tiếp.
AlikElzin-kilaka

1
nhưng làm thế nào để đưa thông báo vào cửa sổ trình duyệt? :(
shzyincu

3
Câu trả lời này hoàn toàn sai và nên bị xóa.
Brad

1
@Brad câu trả lời này đã giúp tôi và nó hẳn đã giúp một số người khác cũng có 22 lượt ủng hộ.
user1378687

6

Dự án ws2s nhằm đưa socket đến js phía trình duyệt. Nó là một máy chủ websocket chuyển đổi websocket thành socket.

giản đồ ws2s

nhập mô tả hình ảnh ở đây

mẫu mã:

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

Xem jsocket . Bản thân chưa sử dụng. Đã hơn 3 năm kể từ lần cập nhật cuối cùng (tính đến ngày 26/6/2014).

* Sử dụng flash :(

Từ tài liệu :

<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

Giải pháp bạn thực sự đang tìm kiếm là ổ cắm web. Tuy nhiên, dự án crom đã phát triển một số công nghệ mới là kết nối TCP trực tiếp TCP crom


0

Để đạt được những gì bạn muốn, bạn sẽ phải viết hai ứng dụng (ví dụ: bằng Java hoặc Python):

  1. Ứng dụng Bridge nằm trên máy của khách hàng và có thể xử lý cả ổ cắm TCP / IP và WebSockets. Nó sẽ tương tác với TCP / IP socket được đề cập.

  2. Ứng dụng phía máy chủ (chẳng hạn như JSP / Servlet WAR) có thể nói chuyện với WebSockets. Nó bao gồm ít nhất một trang HTML (bao gồm mã xử lý phía máy chủ nếu cần) để được trình duyệt truy cập.

Nó sẽ hoạt động như thế này

  1. Bridge sẽ mở kết nối WS với ứng dụng web (vì máy chủ không thể kết nối với máy khách).
  2. Ứng dụng web sẽ yêu cầu khách hàng tự nhận dạng
  3. Máy khách cầu nối gửi một số thông tin ID đến máy chủ, máy chủ này sẽ lưu trữ thông tin đó để xác định cầu nối.
    1. Trang có thể xem của trình duyệt kết nối với máy chủ WS bằng JS.
    2. Lặp lại bước 3, nhưng đối với trang dựa trên JS
    3. Trang dựa trên JS sẽ gửi một lệnh đến máy chủ, bao gồm cả cầu nối mà nó phải đi.
    4. Máy chủ chuyển tiếp lệnh tới cầu nối.
    5. Cầu nối mở một ổ cắm TCP / IP và tương tác với nó (gửi tin nhắn, nhận phản hồi).
    6. Bridge gửi phản hồi đến máy chủ thông qua WS
    7. WS chuyển tiếp phản hồi đến trang trình duyệt có thể xem
    8. JS xử lý phản hồi và phản ứng tương ứng
    9. Lặp lại cho đến khi một trong hai máy khách ngắt kết nối / tải xuống

Lưu ý 1: Các bước trên là một sự đơn giản hóa lớn và không bao gồm thông tin về xử lý lỗi và yêu cầu keepAlive, trong trường hợp máy khách ngắt kết nối sớm hoặc máy chủ cần thông báo cho máy khách rằng nó đang tắt / khởi động lại.

Lưu ý 2: Tùy thuộc vào nhu cầu của bạn, có thể hợp nhất các thành phần này thành một nếu máy chủ ổ cắm TCP / IP được đề cập (mà cầu nối giao tiếp) trên cùng một máy với ứng dụng máy chủ.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.