ROS2 Jazzy rosbridge connection to web

ros2에서 제공하는 ros bridge는 ros에서 publish하는 모든 데이터를 web으로 가지고 와서 사용할 수 있게 해주는 기능이다. 

topic 혹은 service와 그것들이 사용하는 데이터 타입을 알고 있으면 html 코드 내에서 JavaScript로 들을 topic과 data type를 지정해주면 된다.

1. 웹사이트 GUI가 필요하다.

보통 웹사이트는 html, css, javascript 이 세가지를 사용해서 GUI를 구성한다. ROS와 web을 연결할때 roslibjs 를 사용하기 때문에 당연히 javascript를 사용할 수 있는 html로 웹사이트를 만들는게 가장 좋다.

html코드는 AI툴로 간단하고 빠르게 만들 수 있다.

2. .html 파일 안에 roslibjs를 사용해 web socket 연결해준다.

ROSLIB.ROS({ url: "ws://192./168.90.5:9090" });

ROSLIB.Ros가 실질적으로 web과 ros사이의 web socket를 만들주는 class이다. ROSLIB.Ros class에는 .on이라는 함수가 있는데 연결 상태를 string으로 반환해주기 때문에 이것을 통해 연결 상태를 알 수 있다.

ros bridge가 실행되는 서버의 local ip 주소이며 ros bridge의 ip port는 기본 9090이다. (port는 변경할 수 도 있다.)

new ROSLIB.TOPIC({
ros,
name: "[topic Name]",
messageType: "[topic type Name]",
});

ROSLIB.TOPIC은 ROS 노드에서 publish하는 topic혹은 service의 데이터를 받아올 수 있게 해준다. 원하는 topic 혹은 service이름과 data type을 입력하면 된다.

const myService = new ROSLIB.Service({
    ros: ros,
    name: '/my_service_name',
    serviceType: 'your_package/YourServiceType'
});

const request = new ROSLIB.ServiceRequest({
    // Add your service request parameters here
});

myService.callService(request, function(result) {
    console.log('Service response:', result);
});

service는 request와 response의 다른 구조를 사용하기 때문에 ServiceRequest를 해줘야 된다.

3. ROS Bridge Server 설치

sudo apt install ros-<ROS_DISTRO>-rosbridge-server

ros setup해주고

4. ROS Bridge Server 실행

$ ros2 launch rosbridge_server rosbridge_websocket.launch

.html파일을 브라우저에서 열면 web이 ros bridge를 통해 ros가 발행하는 데이터를 읽어올 수 있다.