Web Interfaces For ROS doesn't work after update of ros develop studio

In recent days I was following the tutorial of Developing Web Interfaces For ROS Robots - Ep 1: Introduction to ROSBridge Server and it worked perfectly. Today that I manage to resume the tutorial I see that the user interface of ros developmen studio has changed. and when I try to access the web application it tells me that the server has rejected the connection.

![evidencia2|690x371]

Hello @aserrate,

There was a change in the number of the port we are redirecting to the web server. You should use the webpage_address we set as well. Please try the instructions below:

  • Launch the web server like this: python -m http.server 7000
  • Check the public address with the command: webpage_address

You should have something more or less like:
https://i-08966137a7862b2c8.robotigniteacademy.com/e8ea1c84-42ac-47da-92d3-c1dca5283a04/webpage/

Please, let me know if that works for you.

Regards

Hello @marco.nc.arruda.

I appreciate the solution you give me, it works perfectly well.
I have tried to connect the client to rosbridge through this url and I get the following error:

roslib.min.js:1 WebSocket connection to ‘wss://i-08966137a7862b2c8.robotigniteacademy.com/3fc87d1f-29f3-4ea0-84ed-ddce69c91526/webpage/webpage_ws/’ failed: Error during WebSocket handshake: Unexpected response code: 200

try adjusting the url as follows: wss://i-08966137a7862b2c8.robotigniteacademy.com/3fc87d1f-29f3-4ea0-84ed-ddce69c91526/

which allowed me to connect with rosbridge but in the console no connected client registers me and on the contrary it shows me rosapi started and when I send speed messages these are not being received by ROS, the above had already worked perfectly in the previous version by ros development studio. and the robot was moving correctly and a client was connected in the console

This is the javascript code

var app = new Vue({
el: ‘#app’,
// storing the state of the page
data: {
connected: false,
ros: null,
ws_address: ‘wss://i-08966137a7862b2c8.robotigniteacademy.com/3fc87d1f-29f3-4ea0-84ed-ddce69c91526/webpage/webpage_ws/’,
logs: ,
loading: false,
topic: null,
message: null,
},
// helper methods to connect to ROS
methods: {
connect: function () {
this.loading = true
this.ros = new ROSLIB.Ros({
url: this.ws_address
})
this.ros.on(‘connection’, () => {
this.logs.unshift((new Date()).toTimeString() + ’ - Connected!’)
this.connected = true
this.loading = false
})
this.ros.on(‘error’, (error) => {
this.logs.unshift((new Date()).toTimeString() + - Error: ${error})
})
this.ros.on(‘close’, () => {
this.logs.unshift((new Date()).toTimeString() + ’ - Disconnected!’)
this.connected = false
this.loading = false
})
},
disconnect: function () {
this.ros.close()
},
setTopic: function () {
this.topic = new ROSLIB.Topic({
ros: this.ros,
name: ‘/cmd_vel’,
messageType: ‘geometry_msgs/Twist’
})
},
forward: function () {
this.message = new ROSLIB.Message({
linear: { x: 1, y: 0, z: 0, },
angular: { x: 0, y: 0, z: 0, },
})
this.setTopic()
this.topic.publish(this.message)
},
stop: function () {
this.message = new ROSLIB.Message({
linear: { x: 0, y: 0, z: 0, },
angular: { x: 0, y: 0, z: 0, },
})
this.setTopic()
this.topic.publish(this.message)
},
backward: function () {
this.message = new ROSLIB.Message({
linear: { x: -1, y: 0, z: 0, },
angular: { x: 0, y: 0, z: 0, },
})
this.setTopic()
this.topic.publish(this.message)
},
turnLeft: function () {
this.message = new ROSLIB.Message({
linear: { x: 0.5, y: 0, z: 0, },
angular: { x: 0, y: 0, z: 0.5, },
})
this.setTopic()
this.topic.publish(this.message)
},
turnRight: function () {
this.message = new ROSLIB.Message({
linear: { x: 0.5, y: 0, z: 0, },
angular: { x: 0, y: 0, z: -0.5, },
})
this.setTopic()
this.topic.publish(this.message)
},
},
mounted() {
},
})

do you know why this problem occurs?

thank you very much greetings.

Hello @aserrate,

You have to set a different address for rosbridge server, the correct address comes with the command:

rosbridge_address

Let me know if it works for you as well!

Regards

Hello @marco.nc.arruda

thank you very much for your help

I got the following address when executing the command
wss://i-08966137a7862b2c8.robotigniteacademy.com/f7895d76-50af-4f82-9be8-afe3f556cf61/rosbridge/

when I try to make the connection it shows me the following error:

roslib.min.js:1 WebSocket connection to ‘wss://i-08966137a7862b2c8.robotigniteacademy.com/f7895d76-50af-4f82-9be8-afe3f556cf61/rosbridge/’ failed: Error during WebSocket handshake: Unexpected response code: 400

and in the console where rosbridge is running :

2020-12-26 03:22:38+0000 [-] failing WebSocket opening handshake (‘port 20008 in HTTP Host header ‘localhost:20008’ does not match server listening port 9090’)
2020-12-26 03:22:38+0000 [-] dropping connection to peer tcp4:172.18.0.1:57356 with abort=False: port 20008 in HTTP Host header ‘localhost:20008’ does not match server listening port 9090

do you know why this problem occurs?

thank you very much greetings.

Yes, I have a clue!

Our system works with dynamic ports mapping (this is specific of the web platform of ROSDS), so you need to setup the port number dynamically, as well. Check the launch file as example below:

<launch>
    <include file="$(find rosbridge_server)/launch/rosbridge_websocket.launch">
        <arg name="port" value="9090" />
        <arg name="websocket_external_port" value="$(env SLOT_ROSBRIDGE_PORT)" />
    </include>
    <node name="web_video_server" pkg="web_video_server" type="web_video_server">
        <param name="port" value="11315" />
    </node>
</launch>

Here we are launching both rosbridge and web video server, you can remove the 2nd one if you don’t want to.

Please, let me know if it works for you!

Regards

@marco.nc.arruda

Thank you so much for all your help. with the solution you propose it works perfectly.

1 Like

I’m trying to run the same code locally on the Ubuntu cloud.

How do you find out the value for the websocket external port? I tried to set the value to 20003 and I received the following error:
2022-03-21 06:25:23-0400 [-] failing WebSocket opening handshake (‘port 9090 in HTTP Host header ‘localhost:9090’ does not match server listening port 20003’)
2022-03-21 06:25:23-0400 [-] dropping connection to peer tcp4:127.0.0.1:43906 with abort=False: port 9090 in HTTP Host header ‘localhost:9090’ does not match server listening port 20003

How can I fix this? Many thanks for your help.

Hi @kavi1 ,

The default port of rosbridge is 9090.

If it fails, we would need the logs of rosbridge server and also the logs in the browser console.
Could you provide both? Screenshot would be great

Thank you so much! That is working now with that port number and enabling that port firewall

1 Like

@marco.nc.arruda @kavi1 getting this type error while trying to connect ros-bridge to unreal engine 4.27 project.
Really need help here.
Thanks in advance.

ROS_MASTER_URI=http://127.0.0.1:11311
process[rosbridge_websocket-1]: started with pid [21280]
process[rosapi-2]: started with pid [18892]
[INFO] [1658097722.655013]: Rosapi started
2022-07-17 18:42:02-0400 [-] Log opened.
2022-07-17 18:42:02-0400 [-] registered capabilities (classes):
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.call_service.CallService’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.advertise.Advertise’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.publish.Publish’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.subscribe.Subscribe’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.defragmentation.Defragment’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.advertise_service.AdvertiseService’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.service_response.ServiceResponse’>
2022-07-17 18:42:02-0400 [-] - <class ‘rosbridge_library.capabilities.unadvertise_service.UnadvertiseService’>
2022-07-17 18:42:03-0400 [-] WebSocketServerFactory starting on 9090
2022-07-17 18:42:03-0400 [-] Starting factory <autobahn.twisted.websocket.WebSocketServerFactory object at 0x0000020C74828160>
2022-07-17 18:42:03-0400 [-] [INFO] [1658097723.015968]: Rosbridge WebSocket server started at ws://0.0.0.0:9090
2022-07-17 18:42:08-0400 [-] dropping connection to peer tcp4:127.0.0.1:50002 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:13-0400 [-] dropping connection to peer tcp4:127.0.0.1:50003 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:18-0400 [-] dropping connection to peer tcp4:127.0.0.1:50004 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:23-0400 [-] dropping connection to peer tcp4:127.0.0.1:50005 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:28-0400 [-] dropping connection to peer tcp4:127.0.0.1:50008 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:33-0400 [-] dropping connection to peer tcp4:127.0.0.1:50040 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:38-0400 [-] dropping connection to peer tcp4:127.0.0.1:50042 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:43-0400 [-] dropping connection to peer tcp4:127.0.0.1:50043 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:48-0400 [-] dropping connection to peer tcp4:127.0.0.1:50045 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:53-0400 [-] dropping connection to peer tcp4:127.0.0.1:50054 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:42:58-0400 [-] dropping connection to peer tcp4:127.0.0.1:50057 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:03-0400 [-] dropping connection to peer tcp4:127.0.0.1:50059 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:08-0400 [-] dropping connection to peer tcp4:127.0.0.1:50060 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:13-0400 [-] dropping connection to peer tcp4:127.0.0.1:50061 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:18-0400 [-] dropping connection to peer tcp4:127.0.0.1:50062 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:23-0400 [-] dropping connection to peer tcp4:127.0.0.1:50063 with abort=True: WebSocket opening handshake timeout (peer did not finish the opening handshake in time)
2022-07-17 18:43:28-0400 [-]

@vinay.nandamuri We do not use or support unreal engine at this time. You might get something via a Google search.