Vue3 Typescript Ros2简单示例

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示例。