ROS - 2. ROS2 Web Server & 웹앱

IT/Network & OS

ROS - 2. ROS2 Web Server & 웹앱

루벤초이 2021. 5. 17. 22:06

지난 편에서 ROS2와 LG CLOi 시뮬레이터를 설치하고 터미널에서 명령을 보내봤습니다.

오늘은 방향키 GUI를 가진 React 웹앱을 만들어 연결해 봅시다.

CLI - Subscribe 테스트

지난 편에서 키보드를 누르면 ROS 토픽(/cloi1/cmd_vel)으로 데이터가 publish되어 시뮬레이터의 클로이를 움직였는데요, 클로이가 해당 토픽에 subscribe하고 있기 때문에 움직일 수 있던 거에요. 이는 ROS2 CLI로도 확인할 수 있는데요, ros2 topic echo <토픽> 명령을 치면, 키보드를 누를 때 전송되는 데이터를 확인할 수 있습니다.

$ ros2 topic echo /cloi1/cmd_vel
linear:
  x: 0.0
  y: 0.0
  z: 0.0
angular:
  x: 0.0
  y: 0.0
  z: -1.0
---

위와 같이 linear와 angular 데이터가 오는군요.

CLI - Publish 테스트

키보드로 명령을 보내는 대신 CLI로 명령을 보낼 수도 있습니다. 새로운 터미널을 열어 ROS를 적용한 후,

$ros2 topic pub --once /cloi1/cmd_vel geometry_msgs/msg/Twist '{linear: {x: 2.0, y: 0.0, z: 0.0}, angular: {x: 0.0, y: 0.0, z: 1.8}}'

publisher: beginning loop
publishing #1: geometry_msgs.msg.Twist(linear=geometry_msgs.msg.Vector3(x=2.0, y=0.0, z=0.0), angular=geometry_msgs.msg.Vector3(x=0.0, y=0.0, z=1.8))

이렇게 하면 키보드를 쳤을 때와 같이 CLI - Subscribe 테스트 터미널에 데이터가 날라오는 것이 보입니다.

이제 웹앱에서 보내 보겠습니다.

ROS2 Web Server

지금까지 사용해 온 CLI 대신 웹앱에서 명령을 보내려면 먼저 ROS2 Web Server를 설치해야 합니다.

RobotWebTools/ros2-web-bridge

Bridging your browser to the ROS 2.0. Contribute to RobotWebTools/ros2-web-bridge development by creating an account on GitHub.

github.com

이는 웹앱이 ROS2가 설치된 디바이스와 통신하기 위한 일종의 안테나로 이해하면 되는데요, 웹앱에서 ROS2 Web Server의 웹소켑에 연결해서 ROS 메시지를 보내면 웹 서버 내에서 ROS2와 통신(rclnodejs; ros client library for node js를 이용하는 거죠)하고 결과를 포워딩해주는 브릿지 역할을 해줍니다.

이 툴은 Node.js 버전 10.23.1 ~ 12.x 에서 동작하는데요, 보통 요즘에는 현재 Node.js 버전이 16까지 나왔고 LTS(안정화된 버전)가 14인 시점에서 구버전을 쓰면 다른 Node 프로그램들에 문제가 생기겠죠. 이럴 때 사용하는 것이 NVM(Node Version Manager)인데요, 터미널(쉘)마다 다른 Node.js 버전을 사용할 수 있게 해줍니다. 즉, 원래 Node.js v14를 사용하는데 어떤 터미널에서만 v10을 사용할 수 있다는 것이죠.

NVM 설치는 링크를 참고해서 세 줄을 실행하면 됩니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

NVM 버전을 사용할 때는 nvm use v10 이런 식으로 사용하면 됩니다.

다시 본론으로 돌아가서, 소스를 다운받아 빌드합니다. 이때 터미널에 ROS 환경이 적용돼 있어야 합니다.

$ git clone https://github.com/RobotWebTools/ros2-web-bridge.git

package.json을 열어보면 rclnodejs 버전이 안 정해져있는데요, 저는 ROS2 Eloquent니까, 0.18.2로 변경해주고 nvm use v10.24.1로 설정 후 npm install 완료했습니다.

빌드에 성공했다면, 이제 실행합니다.

ros2-web-bridge$ node bin/rosbridge.js
Websocket started on ws://localhost:9090

웹앱

잘 돌아가는지 간단한 HTML 코드로 검증해 봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.js"></script>

<script>
const ros = new ROSLIB.Ros();
ros.connect('ws://localhost:9090');

const rosTopic = new ROSLIB.Topic({
	ros : ros,
	name : '/cloi1/cmd_vel',
	messageType : 'geometry_msgs/Twist'
});

const twist = new ROSLIB.Message({
	linear: {
		x: 0.25,
		y: 0,
		z: 0
	},
	angular: {
		x: 0,
		y: 0,
		z: 0.25
	}
});

function sendTwist(){
	console.log("sendTwist", rosTopic, twist);
	rosTopic.publish(twist);
}
</script>
</head>

<body>
	<h1>RubenChoi Test</h1>
	<button onclick="sendTwist()">Send ROS</button>
</body>
</html>

Send ROS 버튼을 누르면 Twist 토픽 데이터가 publish되고 이를 클로이가 받아 움직이기 시작합니다.

728x90

'IT > Network & OS' 카테고리의 다른 글

[AWS] EC2 (0)	2022.02.05
ROS - 3. React 웹앱 (0)	2021.05.27
ROS - 1. ROS2 설치 및 CLOi 시뮬레이터 (0)	2021.05.17
네트워크 - 2. MQTT Client (0)	2021.04.08
네트워크 - 1. MQTT (0)	2021.04.02

현재글ROS - 2. ROS2 Web Server & 웹앱

IT & Art