#3 [state, browser, websocket] Control the Tello drone! Node.js | TypeScript | JavaScript

Tello, TypeScript, Node.js

This is the third part of a series about Tello drone programming. This article provides information about the drone state & sending it to the browser! For basic information about the drone state itself, I recommend You read the previous articles (links below). Next time we will talk about presenting video in the browser, so stay tuned! 👌 💪

All from the series

• #1 [overview, commands] Control the Tello drone! Node.js | TypeScript | JavaScript
• #2 [state, video] Control the Tello drone! Node.js | TypeScript | JavaScript
• #3 [state, browser, web socket]— this one.
• #4 — soon…

Table of content

#1 — Idea
#2 — WebSocket
#3 — Implementation
#4 — Example of use
#5 — Conclusions
About the author
Repository link

#1 — Idea

Ok, so how we will present the drone state in the browser? The idea may be closed in three steps:

1. Connect to the drone and listen to its state (done in the previous article).
2. Send state to the browser.
3. Get state at the browser and just display it.

Seems simple… but how to exactly do it? That’s a good question. We can’t do it directly from the drone — the drone stream its state on the UDP port and we can't connect to the UDP port directly from the browser… so what now? WebSockets to the rescue!

#2 — WebSocket

To present the drone state in the browser we will use WebSocket.

As usual, we won’t discuss it in detail. Of course, I recommend You to explore the topic by yourself 😉 But! what we need to know about it at that moment…

WebSocket is a technology that provides a two-way communication channel over a TCP socket. What does it mean for us? We will establish a connection between our node.js app (server) and the browser (client). Then we’ll send messages (drone state) through a socket in real-time. Thanks to this, after establishing a socket connection we will get the latest information (state) without asking about it again.

Following the KISS rule (yes it really exist 😅, is an acronym from Keep It Simple, Stupid) we can extend the above steps:

1. Create a WebSocket (server).
2. Connect to the drone and listen to its state on the UDP port (server).
3. Connect to WebSocket and listen to its messages (browser).
4. After receiving the state, send it immediately to the WebSocket (server).
5. Display or do whatever You want with received messages /drone state (browser).

#3 — Implementation

To present data in the browser we will create a simple client-server app. We can distinguish three main things:

1. Drone stuff — code that connects to the drone and gets its state.
2. Client (browser) — code that connects to WS and displays received messages.
3. Server — code that serves our files and connects together all of the logic.

We already have one part of the puzzle —drone stuff — code that gets the drone state from UDP. But before we start, we need to change one tiny thing: drone-state.ts.

So far, we just displayed the received state by console.log. Now, we want to store these messages somehow and make them readable outside of the object. To do this we are gonna use Subject from the RxJs library.

File structure

We won’t discuss in detail each file — the whole project is available in the repository.

Project structure

TELLO-COPTER /
├── src/
│   └── drone/  files related to the drone (UDP socket, state, IO)
│   └──web/     simple web app (get messages from WS and display it)
├──server.js    main logic (WS, drone, file serve)
├──package.json
├──tsconfig.json

Server

Ok time to the most important file in this article — server.js. To not make it more complicated we won’t implement it in TypeScript. We will use JavaScript!

Logic can be divided into a few main things:

• (1) drone stuff — where we will connect to the drone and get its state. All logic about the drone was presented in the previous articles.

• (2) HTTP server — serving our web app. Simple create server and indicate the folder where the web files are.

• (3) WebSocket — connect to WS on port 3001 and send messages through it. Messages come from RxJs pipe so we need to subscribe to it.

Web

Our web application is as simple as possible. There are two files (1) index.html where is just a container for the state, (2) app.js client/browser logic where we connecting to WS, parsing the message, and displaying it in the HTML element (view).

index.html

app.js

We simply connect to the WebSocket server on port 3001 — the socket which we created in server.js — and listen to its messages. If we receive a message then we can pass it to the view — stateEl.

Additionally, we created parseDroneState method to extract information about the state (for more information about state format please see the previous article). The method gets the drone state (string) and returns values as an object.

#4 — Example of use

Everything is combined with ts/js files so to make it faster I created a simple script in package.json:

...
"scripts": {
   ...
   "start": "tsc -p tsconfig.json && node server.js"
},
...

NOTE. Check how tsconfig.json looks like on the repository — among other things, there is defined dist folder for outputs.

This script compiles all .ts (typescript) files and outputs them to the dist folder. Next, it runs server.js file where is the main logic. Thanks to this to run all project you should follow the steps below:

1. Turn on the Tello drone and connect to its WiFi. Tello WiFi is usually named like TELLO-xyz where xyz is a unique string.
2. Go to tello-copter folder.
3. Run npm run start.
4. Open browser on http://localhost:3000/index.html
5. Observe the result 😎

Web — photo example

Server — photo example

How app works — GIF example

#5 — Conclusions

Despite the fact that we cannot access the drone video stream directly from the browser, we used a WebSocket to create a kind of bridge/middleware. Our simple all connect to drone, send command to it and gets its state. Immediately after receiving state, it’s sending it to the socket channel. On the other side is a web client which is listening to a specific port (web socket) and takes messages from it (state). And that all we did in just a dozen lines of code! Simple, isn’t it?

In the next article, we will add to our app… displaying drone video! Stay tuned guys! 😎💪

Thanks for reading and making it to the end! 💪💪

About the author

Passionate about programming and technology, especially related to Web Development. I’m currently working as a Web Software Engineer in Teleste Video Network.

Repository link

All of the presented code is available in my repository (link below). The code may be slightly different, but the idea stays the same.

pawelidziak/tello-copter