介绍
本文将会介绍如何使用 npm 包 react-ros2djs 实现基于 ROS 的前端开发，所用到的技术有 ROS、JavaScript、React 以及 npm 等。通过本篇文章的学习，读者将会掌握通过 npm 包 react-ros2djs 实现基于 ROS 的前端开发的方法，对于 ROS 基于 web 开发的学习也将会有所帮助。
安装
首先，我们需要安装 ROS，在安装过程中需要创建一个 ROS 的 workspace，此处只做简单介绍，具体教程可以参照 ROS 官方文档。
安装好 ROS 后，我们需要安装一些其它的东西，包括 Node.js、npm 和一些 ROS 依赖包。在安装 Node.js 和 npm 之后，我们需要安装以下的 ROS 依赖包。
sudo apt-get install ros-${ROS_DISTRO}-rosbridge-server ros-${ROS_DISTRO}-rosbridge-suite ros-${ROS_DISTRO}-robot-state-publisher安装好 ROS 依赖包之后，我们可以使用以下命令来安装 react-ros2djs。
npm install react-ros2djs
例子
下面将会通过一个简单的例子来介绍如何使用 react-ros2djs。本例子假设读者已经了解了 ROS 的基本概念，能够使用 ROS 实现一个简单的控制程序。
创建 ROS 控制程序
首先，我们需要创建一个 ROS 控制程序。该程序将会监听一个 ROS 话题，该话题将会包含我们控制机器人的一些信息。在本例子中，我们将会发送一个如下的消息：
-- -------------------- ---- -------
-
--------- -
-- --
-- --
------ -
--
--------- -
-- --
-- --
------ -
-
-该消息包含机器人的位置和速度信息。
-- -------------------- ---- -------
-------------- ------
------ -----
---- ----------------- ------ -----
----- --------
--- ---------------
-------------------------------
-------------- - -------------------------- ------ --------------
--- ----------
---- - --------------
----- --- --------------------
--------------------
------------
--- --------------------
----- - -------
-------------- - ---
--------------- - ---
-----------------------------
-- -------- -- -----------
----
---------------
------ ----------------------------
----
上述 Python 代码将会发布一个包含固定速度的消息。
创建 React 应用程序
现在我们需要创建 React 应用程序，该程序将会订阅 ROS 此处控制程序发布的话题，在屏幕上显示机器人的位置和速度信息。在创建 React 应用程序之前，我们需要创建一个 RosBridge 连接以便于将 ROS 话题的数据传输到 React 应用程序中。下面是一个简单的代码片段，展示了如何创建 RosBridge 连接以及如何创建一个订阅器。
-- -------------------- ---- ------- ------ ------ ---- --------- ----- --- - --- ------------ --- - --------------------- --- ----- -------- - --- -------------- --- - ---- ---- - ----------- ----------- - --------------------- --- ---------------------------- -- - --------------------- ---
在上述代码中，我们创建了一个 RosBridge 连接，该连接监听在 9090 端口，旨在与之前创建的控制程序进行通信。在 RosBridge 连接被创建之后，我们可以创建一个订阅器，该订阅器将会订阅 cmd_vel 话题，并在收到消息之后打印出来。下面我们通过 react-ros2djs 在 React 应用程序中加入 ROS 数据的可视化展示。按照以下步骤：
- 在 React 应用程序中安装 react-ros2djs：
npm install react-ros2djs --save
- 在需要使用 ROS 数据的组件中导入和使用 react-ros2djs：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------------
----- --- - -- -- -
-------
-
-- ---- --------- -------------- -- -- -
---- -------- ------- ------- ---
----------------- ---------------- --
---------------------- ---------------- ---------------- ------------ --
------
-
-
--------
--在上述代码中，我们创建了一个 React 组件 Map，并使用了 react-ros2djs 中的 ROS2D。ROS2D 上下文在括号中定义。通俗的说就是我们将如何去订阅(ROS2D.NavigationArrow)和可视化(ROS2D.GridClient)都放到这个定义好的上下文中，之后再发布 ROS 数据时给这个子节点传递 ROS2D 上下文就有助于订阅和可视化流程的自動回调。
- 运行你的 React 应用程序，并观察屏幕上显示的信息。
下面是完整代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ----------------
----- --- - -- -- -
-------
-
-- ---- --------- -------------- -- -- -
---- -------- ------- ------- ---
----------------- ---------------- --
---------------------- ---------------- ---------------- ------------ --
------
-
-
--------
--总结
本文介绍了如何使用 npm 包 react-ros2djs 实现基于 ROS 的前端开发。我们通过一个简单的例子来展示了 react-ros2djs 如何被使用来订阅 ROS 话题，并将其可视化。希望读者可以通过本文来学习和掌握如何使用 react-ros2djs 实现基于 ROS 的前端开发，并将 ROS 的控制应用扩展到 web 上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b36768