使用Angular运行roslibjs

2 年 ago

3 minutes

章节目录

1. 概述
2. 环境
3. 引入Angular端
4. 引入ROS端
5. 实践
6. 结语

总结

今年的ROS Advent Calendar上有很多关于ROS和Web协作的文章，我觉得非常有趣，所以一直在看。
不过我发现，虽然有关于Vue和React与ROS协作的文章，但是几乎没有关于Angular和ROS的文章。
因此，在本文中，我将简要介绍如何使用Angular进行ROS通信。
如果有任何错误之处，请您发现后留下评论，我将不胜感激。

环境

Angular 13

在中文翻译为：“引入Angular侧”。

前提 – Only need one option

假设已经完成了Angular和ROS的环境设置。
此外，将在接下来的项目中使用Angular进行操作。

1. 安装roslibjs

引入roslibjs库，该库用于与ROS进行通信。

npm install roslib

2. 安装数据类型定义

为了让TypeScript能够使用roslibjs，需要安装类型定义文件，因为roslibjs是用于JavaScript的。

npm i @types/roslib --save-dev

3. 安装依赖关系

由于roslibjs依赖于许多库，因此需要安装这些库。

npm install

4. 对WebWorkify进行修复。

我参考了@shiro-kuma先生使用React实时绘制ROS主题并入门到前端部分。非常感谢！

从Angular 12开始，Webpack升级到了版本5，但是根据这里所写的，Webpack 5和roslibjs似乎不兼容。
具体来说，这似乎是由于Webpack 5中包含的Webworkify存在问题，所以我们将根据Webworkify的问题报告来修复相关部分。

首先，打开Angular项目中的node_modules/webworkify/index.js文件。然后，

 var bundleFn = arguments[3];
 var sources = arguments[4];
 var cache = arguments[5];
 var stringify = JSON.stringify;
module.exports = function (fn, options) {

成为了

var stringify = JSON.stringify;

module.exports = function (fn, options) {
    var bundleFn = arguments[3];
    var sources = arguments[4];
    var cache = arguments[5];

我会像这样进行更改。

Angular的引入已经完成了。

ROS的引入

请安装ros-bridge-server。

请参考：http://wiki.ros.org/rosbridge_suite，并安装ros-bridge-server。这是一个ROS包，它允许通过websocket通信方式来访问ROS。

sudo apt-get install ros-noetic-rosbridge-server

ROS的安装到此为止。

实践 (shí

暂时先创建一个Component和一个Service。
Service的代码可以按照以下方式编写。

服务

import { Injectable } from '@angular/core';
import * as ROSLIB from 'roslib';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class RosService {
  ros: ROSLIB.Ros;
  url = 'ws://127.0.0.1:9090';
  isConnected: Subject<boolean> = new Subject();
  listener: ROSLIB.Topic;
  talker: ROSLIB.Topic;

  constructor() {
    this.ros = new ROSLIB.Ros({
      url: this.url,
    });
    this.ros.on('connection', () => {
      console.log('Connected');
      this.isConnected.next(true);
    });

    this.ros.on('error', (error) => {
      console.log('error', error);
      this.isConnected.next(false);
    });

    this.ros.on('close', () => {
      console.log('closed');
      this.isConnected.next(false);
    });

    this.listener = new ROSLIB.Topic({
      ros: this.ros,
      name: '/listener',
      messageType: 'std_msgs/String',
    });

    this.talker = new ROSLIB.Topic({
      ros: this.ros,
      name: '/talker',
      messageType: 'std_msgs/String',
    });
  }
}

在构造函数中创建ROSLIB.Ros对象。由于只需要一个对象，因此在Service中声明以便可以重新使用。
此外，还在这里生成用于Subscribe/Publish时使用的ROSLIB.Topic对象。
然后按照下面的方式编写组件。

组件

import { Component, OnInit } from '@angular/core';
import * as ROSLIB from 'roslib';
import { RosService } from '../ros.service';

export interface String {
  data: string;
}

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss'],
})
export class TopComponent implements OnInit {
  isConnected: boolean = false;
  message: string = '';
  constructor(private rosService: RosService) {}

  ngOnInit(): void {
    this.rosService.isConnected.subscribe(
      (data: boolean) => (this.isConnected = data)
    );
    this.rosService.listener.subscribe((msg: ROSLIB.Message) => {
      this.message = (msg as String).data;
    });
  }

  talk(message: any): void {
    const publishMsg: String = { data: message };
    this.rosService.talker.publish(publishMsg);
  }
}

请不要在意名字叫top.component的这个名字，不太清楚啊笑
在组件中主要进行数据的展示和发布。
需要注意的是，ROS中不存在std_msgs/String类型。

export interface String {
  data: string;
}

这个步骤是为自己定义模式的部分。
最后是HTML。

HTML的中文释义是超文本标记语言。

<h1>ROS connected: {{ isConnected }}</h1>
<h1>Subscribed Message:{{ message }}</h1>
<label>
  publish message:
  <input type="text" #msg />
</label>
<button (click)="talk(msg.value)">publish</button>

我先简单地写了HTML，当在输入框中输入文字并按下“publish”按钮时，它会被发布出去。

实际显示的界面

执行

打开终端

  roslaunch rosbridge_server rosbridge_websocket.launch

输入该命令后，服务器将启动并开始与网站进行通信。如果在网站上看到ROS connected:true，说明连接已经建立完成。

发布

在另一个终端上

rostopic echo /talker

我可以看出已经成功发布了。

結論-

我最近在Angular上成功地创建了一个简单的程序来实现ROS和发布/订阅通信。由于在网络上很少有关于Angular和ROS协作的资源，所以我希望这能帮到一些遇到困难的人们。

请提供相关文献参考。

roslibjsの基本的な使い方