如何实现Android平板Web客户端与rosbridge的连接？

1. 确认Rosbridge服务端状态与网络权限 #

• 先在服务器主机上启动rosbridge_websocket节点，默认端口为9090，执行命令：
  roslaunch rosbridge_server rosbridge_websocket.launch
  若需自定义端口，可启动时指定：
  roslaunch rosbridge_server rosbridge_websocket.launch port:=自定义端口
• 检查服务器的防火墙、安全组规则，开放rosbridge使用的端口（默认9090），确保Android平板所在网络能访问该端口。

2. 修改ROSLibJS的连接配置 #

找到项目中的ROSInterface.js文件，调整ROS连接的地址参数：

• 将原代码中指向localhost的地址，替换为web服务器主机的局域网IP/公网IP（不能用localhost，因为平板属于远程设备），端口与rosbridge启动端口保持一致。
• 示例修改：

  // 原代码
  this.ros = new ROSLIB.Ros({
    url: 'ws://localhost:9090'
  });
  // 修改后
  this.ros = new ROSLIB.Ros({
    url: 'ws://你的服务器IP:9090'
  });
  

3. 验证网络连通性 #

• 在Android平板的浏览器中，尝试访问ws://你的服务器IP:9090，若浏览器控制台无连接错误，说明网络通路正常；若失败，检查服务器IP是否正确、端口是否开放、rosbridge节点是否正常运行。
• 也可使用wscat工具在平板所在网络测试：
  wscat -c ws://你的服务器IP:9090
  能成功建立连接则说明网络无问题。

4. 配置Webpack代理解决跨域（可选） #

若web服务器与rosbridge端口不同，为避免跨域问题，可在webpack.config.js中添加devServer代理：

module.exports = {
  // 其他配置项
  devServer: {
    proxy: {
      '/rosbridge': {
        target: 'ws://localhost:9090',
        ws: true,
        pathRewrite: { '^/rosbridge': '' }
      }
    }
  }
};

此时ROSLibJS的连接地址需改为：
ws://你的服务器IP:web服务器端口/rosbridge

5. 调试连接状态 #

在ROSInterface.js中添加状态监听代码，方便排查问题：

this.ros.on('connection', () => {
  console.log('已成功连接到rosbridge');
});

this.ros.on('error', (error) => {
  console.error('rosbridge连接失败:', error);
});

this.ros.on('close', () => {
  console.log('与rosbridge的连接已断开');
});

通过Android平板浏览器的开发者工具（如Chrome远程调试）查看控制台日志，定位连接失败的具体原因。

内容的提问来源于stack exchange，提问作者Bilal