使用javascript从浏览器连接到TCP Socket

6 回答

• 28

  您真正需要的解决方案是Web套接字 . 然而，铬项目开发了一些直接TCP连接的新技术TCP chromium

  回复于 2024-05-08T02:09:17+08:00
• 0

  至于你的问题，目前你将不得不依赖于XHR或websockets .

  目前还没有流行的浏览器为javascript实现任何这样的原始套接字api，可以让你创建和访问原始套接字，但是在JavaScript中实现原始套接字api的草案正在进行中 . 看看这些链接：
  http://www.w3.org/TR/raw-sockets/
  https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket

  Chrome现在支持其“实验”API中的原始TCP和UDP套接字 . 这些功能 are only available for extensions 虽然有记载，但暂时隐藏起来 . 话虽如此，一些开发人员已经在使用它创建有趣的项目，例如this IRC client .

  要访问此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!");         
      });
  });
  

  回复于 2024-05-08T02:09:17+08:00
• 0

  你可以使用 HTML5 Web Sockets ：

  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所述编写自己的服务器 .

  Additional:

  更新：从2016年1月的W3C草案：

  这可以通过导航器界面实现，如下所示：

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

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

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

  回复于 2024-05-08T02:09:17+08:00
• 45

  见jsocket . 我自己没用过 . 自上次更新至今已超过3年（截至2014年6月26日） .

  *使用闪光:(

  来自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>
  

  回复于 2024-05-08T02:09:17+08:00
• 5

  ws2s项目旨在为浏览器端js带来套接字 . 它是一个websocket服务器，它将websocket转换为socket .

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

  回复于 2024-05-08T02:09:17+08:00
• 4

  为了实现你想要的，你必须编写两个应用程序（例如Java或Python）：

  • Bridge应用程序位于客户端的计算机上，可以处理TCP / IP套接字和WebSockets . 它将与相关的TCP / IP套接字进行交互 .

  • 可以与WebSockets通信的服务器端应用程序（例如JSP / Servlet WAR） . 它包括至少一个HTML页面（如果需要，包括服务器端处理代码），供浏览器访问 .

  它应该像这样工作

  • Bridge将打开与Web应用程序的WS连接（因为服务器无法连接到客户端） .

  • Web应用程序将要求客户端识别自己

  • 网桥客户端向服务器发送一些ID信息，服务器将其存储以识别网桥 .

  • 浏览器可查看页面使用JS连接到WS服务器 .

  • 重复步骤3，但对于基于JS的页面

  • 基于JS的页面向服务器发送命令，包括它必须到哪个桥 .

  • 服务器将命令转发到网桥 .

  • 网桥打开TCP / IP套接字并与之交互（发送消息，获取响应） .

  • Bridge通过WS向服务器发送响应

  • WS将响应转发给浏览器可查看的页面

  • JS处理响应并做出相应的反应

  • 重复，直到任一客户端断开/卸载

  注意1：如果客户端过早断开连接或服务器需要通知客户端它正在关闭/重新启动，则上述步骤非常简单，并且不包含有关错误处理和keepAlive请求的信息 .

  注意2：根据您的需要，如果有问题的TCP / IP套接字服务器（网桥与之通信）与服务器应用程序位于同一台计算机上，则可以将这些组件合并为一个 .

  回复于 2024-05-08T02:09:17+08:00