实现ROS系统的Websocket传输，向Web应用推送sensor_msgs::Image数据

博主：小蓝
发布时间：2023 年 12 月 07 日
1142 次浏览
暂无评论
4438字数
分类： Linux 技术杂烩

要在ROS系统中实现WebSocket传输以向Web应用推送 `sensor_msgs::Image`数据，可以通过以下步骤实现：

### 1. 选择合适的WebSocket库

首先，需选择一个合适的WebSocket库。在ROS环境中，经常使用 `websocketpp`库，这是一个C++库，用于构建WebSocket服务器和客户端。此外，也可考虑使用 `rosbridge_suite`，它为ROS提供了一个JSON API，使得通过WebSocket与非ROS系统进行通信变得容易。![](https://www.8kiz.cn/usr/uploads/2023/11/3086001380.png)

### 2. 设置ROS环境

确保您的ROS环境已正确安装并设置。创建一个新的ROS工作空间，并在其中创建一个新的包以容纳WebSocket通信代码。

```bash
mkdir -p ~/websocket_ws/src
cd ~/websocket_ws/src
catkin_create_pkg websocket_communication std_msgs rospy roscpp
cd ~/websocket_ws
catkin_make
source devel/setup.bash
```

### 3. 编写WebSocket服务器端代码

在您的ROS包中创建WebSocket服务器端代码。以下是一个简化的例子，展示了一个基本的WebSocket服务器，它监听 `sensor_msgs::Image`类型的消息，并将其转发给所有连接的客户端。

```cpp
#include <ros/ros.h>
#include <sensor_msgs/Image.h>
#include <websocketpp/config/asio_no_tls.hpp>
#include <websocketpp/server.hpp>

typedef websocketpp::server<websocketpp::config::asio> server;
typedef server::message_ptr message_ptr;

class ImageServer {
public:
    ImageServer() {
        // 初始化ROS节点
        ros::NodeHandle nh;
        // 订阅Image类型的消息
        image_sub = nh.subscribe("/camera/image", 10, &ImageServer::imageCallback, this);

// 设置WebSocket事件处理函数
        wss.init_asio();
        wss.set_message_handler(bind(&ImageServer::on_message, this, ::_1, ::_2));
    }

void imageCallback(const sensor_msgs::ImageConstPtr& msg) {
        // 将接收到的Image消息转换为适合WebSocket传输的格式
        std::string image_data(reinterpret_cast<const char*>(&msg->data[0]), msg->data.size());

// 向所有WebSocket客户端广播图像数据
        for (auto it : connections) {
            wss.send(it, image_data, websocketpp::frame::opcode::binary);
        }
    }

void on_message(websocketpp::connection_hdl hdl, message_ptr msg) {
        // ... 处理来自客户端的消息（如果需要）
    }

void run(int port) {
        // 监听指定端口
        wss.listen(port);
        // 开始WebSocket事件循环
        wss.start_accept();
        wss.run();
    }

void add_connection(websocketpp::connection_hdl hdl) {
        connections.insert(hdl);
    }

void remove_connection(websocketpp::connection_hdl hdl) {
        connections.erase(hdl);
    }

private:
    server wss;
    ros::Subscriber image_sub;
    std::set<websocketpp::connection_hdl,std::owner_less<websocketpp::connection_hdl>> connections;
};

int main(int argc, char** argv) {
    // 初始化ROS节点
    ros::init(argc, argv, "image_server");
    // 创建ImageServer对象
    ImageServer server;

// 运行WebSocket服务器
    server.run(9002);

ros::spin();

return 0;
}
```

在此代码中，`imageCallback`方法将ROS图像消息逐字节转换为字符串，并通过WebSocket广播给所有连接的客户端。这种做法基于*原始*比特传输，适用于不需要处理图像编码和解码的场景。

### 4. 编写Web客户端

创建Web页面，其中包含连接到您的WebSocket服务器的JavaScript代码。用于从ROS WebSocket服务器接收图像数据的JavaScript客户端代码片段如下：

```javascript
var ws = new WebSocket("ws://localhost:9002/");
ws.binaryType = 'arraybuffer';  // 以二进制形式接收数据

ws.onmessage = function(event) {
    var blob = new Blob([event.data], {type: "image/jpeg"});
    var url = URL.createObjectURL(blob);
    document.getElementById("ros-image").src = url;
};

ws.onopen = function(event) {
    console.log("Connected to WebSocket server.");
};

ws.onerror = function(error) {
    console.log("WebSocket Error: ", error);
};
```

在此代码中，WebSocket客户端监听服务器发送的数据，并将接收到的数据作为Blob对象创建一个URL，然后将这个URL设置为HTML图片元素的源，以便显示图像。

### 5. 编译和运行

编译新的ROS包和您的WebSocket服务器代码：

```bash
cd ~/websocket_ws
catkin_make
```

启动ROS节点：

```bash
rosrun websocket_communication image_server
```

在Web浏览器中打开包含上述JavaScript代码的HTML文件，您应该能够看到通过WebSocket从ROS接收的图像。

### 6. 性能优化

由于直接传输未压缩的图像数据可能导致带宽使用率较高，您可能需要在发送之前对图像进行压缩（例如，将其转换成JPEG或PNG格式）。为此，可以使用 `cv_bridge`和 `opencv`库对图像进行编码，然后再发送。

### 注意：

WebSocket协议具有低延迟和高实时性的特性，适用于实时数据推送。但是，它也依赖于网络条件，因此，在通过WebSocket发送数据时，保证网络稳定性也是重要的。以上步骤为建立基本的WebSocket传输提供了框架，并可以根据实际需求进行调整和优化。

#### [云服务器/高防CDN推荐](https://www.tsyvps.com/)

#### [蓝易云](https://www.tsyvps.com/)国内/海外高防云服务器推荐

<div class="inner-content" >
<p class="inser-title">蓝易云-五网CN2服务器【点我购买】</p>
<div class="inster-summary text-muted">
<span style='color: red;'>蓝易云采用KVM高性能架构，稳定可靠，安全无忧！<br>蓝易云服务器真实CN2回国线路，不伪造，只做高质量海外服务器。</span>
</div>
</div>
</a>

</div>

</div>

---

**<span style='color:#000000'>海外免备案云服务器链接：[www.tsyvps.com](https://www.tsyvps.com)</span>**

**<span style='color:#000000'>蓝易云安全企业级高防CDN：[www.tsycdn.com](https://www.tsycdn.com)</span>**

**<span style='color:#DC143C'>持有增值电信营业许可证：B1-20222080【资质齐全】</span>**

**<span style='color:#DC143C'>蓝易云香港五网CN2 GIA/GT精品网络服务器。拒绝绕路，拒绝不稳定。</span>**

---

#### **百度搜索：[蓝易云](https://www.baidu.com/s?ie=UTF-8&wd=%E8%93%9D%E6%98%93%E4%BA%91)**![](https://www.8kiz.cn/usr/uploads/2023/11/2326015522.png)

蓝易云是一家专注于香港及国内数据中心服务的提供商，提供高质量的服务器租用和云计算服务、包括免备案香港服务器、香港CN2、美国服务器、海外高防服务器、国内高防服务器、香港VPS等。致力于为用户提供稳定,快速的网络连接和优质的客户体验。

最后修改：2023 年 12 月 07 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

实现ROS系统的Websocket传输，向Web应用推送sensor_msgs::Image数据

小蓝 • 2023 年 12 月 07 日