왕다방

인공지능 & 로봇 사용자들의 자유게시판입니다. 인공지능, 가정용로봇, 서비스로봇, 인공지능스피커 등 자유롭게 올려주세요. 질문과답변도 이곳에 올려주세요.

제목ROS와 비ROS 사이의 통신: roslibjs2022-01-27 01:27
작성자user icon Level 4

88x31.png


이번에는 roslibjs 모듈을 통해 웹에서 구독자(subcriber)와 발행자(publisher)를 만들어보겠습니다.


우선 서버로 사용할 폴더를 생성하세요.

 $ mkdir ~/node-server && cd ~/node-server && mkdir html


npm을 통해 express 모듈을 설치합니다.

 $ npm i express


웹서버 모듈을 다음과 같이 작성하세요. 3000번 포트를 웹서버로 사용하겠습니다.

 $ touch app.js && xed app.js

const express = require('express')


const app = express()

const SERVER_PORT = 3000


app.use(express.static(__dirname + '/html'))

app.use((req, res) => {

    res.status(404).send('Not Found')

})


const HTTPServer = app.listen(SERVER_PORT, () => {

    console.info(`Server is running on ${SERVER_PORT} port`)

})


mb-file.php?path=2022%2F01%2F26%2FF4551_1.png
 

html 파일을 작성하세요.

 $ touch html/index.html && xed html/index.html

<!doctype html>

<html lang="ko">

  <head>

    <meta name="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>

    <script src="/script.js" defer></script>

    <title>ROS2 토픽 예제</title>

  </head>

  <body>

    <CENTER>

      <h2>발행자</h2>

      <input type="text" id="msg" />

      <button id = "publish" onClick="publish()">발행</button>

    </CENTER>

    <CENTER>

      <h2>구독자</h2>

      <p id="subscribe"></p>

    </CENTER>

  </body>

</html>

mb-file.php?path=2022%2F01%2F27%2FF4560_2.png
 

script.js 파일을 작성하세요.

 $ touch html/script.js && xed html/script.js

const ros = new ROSLIB.Ros();


ros.connect('ws://localhost:9090');


ros.on('error', (error) => {

  console.log(error);

});


ros.on('connection', (error) => {

  console.log('Connection: ok!');

});


ros.on('close', (error) => {

  console.log('Connection closed.');

});


const topic = new ROSLIB.Topic({

  ros: ros,

  name: '/topic',

  messageType: 'std_msgs/String'

});


let msg = new ROSLIB.Message({

    data: ''

});


function publish() {    

    msg.data = document.getElementById('msg').value

    document.getElementById('msg').value = ''

    topic.publish(msg)

}


window.onload = () => {

    topic.subscribe((res) => {

        document.getElementById('subscribe').innerHTML = res.data

    })

}

mb-file.php?path=2022%2F01%2F27%2FF4561_3.png


ros 객체를 생성하고 connect 메소드로 브릿지에 연결합니다. 그리고 on 메소드를 통해 각각의 이벤트에 대한 콜백함수를 작성하세요.

const ros = new ROSLIB.Ros();


ros.connect('ws://localhost:9090');


ros.on('error', (error) => {

  console.log(error);

});


ros.on('connection', (error) => {

  console.log('Connection: ok!');

});


ros.on('close', (error) => {

  console.log('Connection closed.');

});


토픽 객체와 메시지 객체를 생성합니다.

const topic = new ROSLIB.Topic({

  ros: ros,

  name: '/topic',

  messageType: 'std_msgs/String'

});


let msg = new ROSLIB.Message({

    data: ''

});


"발행" 버튼을 누르면 publish 함수가 실행됩니다. 이때 토픽 객체의 publish 메소드를 통해 메시지가 발행되도록 작성합니다.

function publish() {    

    msg.data = document.getElementById('msg').value

    document.getElementById('msg').value = ''

    topic.publish(msg)

}


페이지가 로딩되면 토픽객체의 subscribe 메소드를 통해 해당 토픽을 구독하도록 작성합니다. 해당 메소드는 콜백함수를 인수로 가집니다. 콜백함수는 매개변수로 발행된 토픽 메시지 객체를 받습니다.

window.onload = () => {

    topic.subscribe((res) => {

        document.getElementById('subscribe').innerHTML = res.data

    })

}


저장하고 터미널에 다음 명령어를 통해 웹서버를 실행합니다.

 $ node ~/node-server/app.js

mb-file.php?path=2022%2F01%2F27%2FF4562_4.png


ROS에서 rosbridge_server 패키지의 rosbridge_websocket_launch.xml 파일을 launch 명령어를 통해 실행합니다.

 $ ros2 launch rosbridge_server rosbridge_websocket_launch.xml

mb-file.php?path=2022%2F01%2F27%2FF4563_5.png

예전에 만든 pubsub_py 패키지의 sub 노드를 실행합니다. 해당노드는 "topic" 토픽을 구독하는 노드입니다.

https://www.robotstory.co.kr/king/?vid=885 를 참고하세요.

 $ overlay && ros2 run pubsub_py sub


mb-file.php?path=2022%2F01%2F27%2FF4564_6.png
 

웹브라우저(크롬)에서 http://localhost:3000 으로 이동하세요.

mb-file.php?path=2022%2F01%2F27%2FF4565_7.png


input 입력창에 아무 문자열이나 입력 후 발행을 눌러보세요.

mb-file.php?path=2022%2F01%2F27%2FF4566_1.gif

새로운 터미널을 열고 pubsub_py 패키지의 pub 노드를 실행합니다. 해당 노드는 "topic" 토픽으로 메시지를 발행하는 노드입니다.

 $ overlay && ros2 run pubsub_py pub

mb-file.php?path=2022%2F01%2F27%2FF4567_2.gif 


#ROS2# rosbridge# roslibjs# publisher# subscriber
댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)