Vue3+Typescript+Ros2简单示例_vue ros

ROS2的引入

main.ts中添加ros库的引入：

import 'roslib/build/roslib';    // 注意build
ros = new window.ROSLIB.Ros({
    url: 'ws://127.0.0.1:9090'
});

Ros-Topic

一段封装过topic之后的代码：

import getVProxy from '@/utils/app-proxy';
import 'roslib/build/roslib';
import assetKit from '@/utils/asset-kit';
import * as autopic from '@/types/autopic';
 
const proxy = getVProxy();
const curTopic = ref('');
const curTopicResponse = ref('');
const topicOptions = autopic.AU_TOPIC_ARR;
const topicMap = autopic.AU_TOPIC_MAP;
 
let topicListener = new window.ROSLIB.Topic({
  ros: proxy.ros,
  // name: '/topic_path/topic',
  // messageType: '/msg_path/type'
});
 
onMounted(() => {
  console.log('TopicTestWidget.onMounted');
  // console.log(topicOptions)
  // console.log(topicMap)
});
 
onActivated(() => {
  console.log('TopicTestWidget.onActivated');
  if (!curTopic.value) return;
  subscribeTopic(curTopic.value, topicMap.get(curTopic.value)?.msgType);
});
 
onDeactivated(() => {
  // console.log('TopicTestWidget.onDeactivated')
  unsubscribeCurTopic();
});
 
onUnmounted(() => {
  console.log('TopicTestWidget.onUnmounted');
});
 
function subscribeTopic(name?: string, msgType?: string) {
  topicListener.name = name;
  topicListener.msgType = msgType;
  console.log(topicListener);
  topicListener.subscribe(function (message: any) {
    // console.log('******%s start*******', curTopic.value)
    // console.log(message)
    curTopicResponse.value = JSON.stringify(message);
    // console.log('******%s end*******', curTopic.value)
  });
}
 
function unsubscribeCurTopic() {
  topicListener.unsubscribe();
}
 
function onTopicClear() {
  // ElMessage.info('onTopicClear ' + curTopic.value)
  topicListener.unsubscribe();
  // topicListener.unsubscribe(() => {
  //   console.log('unsubscribe change to=>%s', curTopic.value)
  // })
}
 
function onTopicChange() {
  // ElMessage.info('onTopicChange ' + curTopic.value)
  unsubscribeCurTopic();
  curTopicResponse.value = '';
  if (!curTopic.value) {
    console.log('onTopicChange to empty:' + curTopic.value);
    return;
  }
 
  subscribeTopic(curTopic.value, topicMap.get(curTopic.value)?.msgType);
  // topicListener.name = curTopic.value
  // topicListener.msgType = topicMap.get(curTopic.value)?.msgType
  // console.log(topicListener)
  // topicListener.subscribe(function (message: any) {
  //   console.log('******%s start*******', curTopic.value)
  //   console.log(message)
  //   curTopicResponse.value = JSON.stringify(message)
  //   console.log('******%s end*******', curTopic.value)
  // })
}

Ros-Service

简单的service调用：

const aService= new window.ROSLIB.Service({
  ros: proxy.ros,
  name: '/service1',
  serviceType: 'serviceType',
});
 
let aServiceRequest= new window.ROSLIB.ServiceRequest({
 
});
 
aService.callService(
  aServiceRequest,
  function (result: any) {
    console.log('---------aServiceresponse-----');
    console.log(result);
  }
);

以上，mark一个简单的ros-vue3中topic/service示例。