-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
443 lines (427 loc) · 17.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- minimal css -->
<link rel="stylesheet" href="minimal.css" />
<!-- css -->
<link rel="stylesheet" href="main.css" />
<!-- fontawesome-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Mqtt docs from Sirius NET IoT team</title>
</head>
<body>
<nav>
<div class="nav__icon">
<i id="nav-btn" class="fa-solid fa-bars"></i>
<h1>Sirius NET</h1>
</div>
<div class="navbar">
<a class="hov-2" href="#Description"
><i class="fa-solid fa-gear"></i> Description</a
>
<a class="hov-2" href="#IOT"><i class="fa-solid fa-cube"></i> IOT</a>
<a class="hov-2" href="#MQTT"
><i class="fa-solid fa-border-none"></i> MQTT</a
>
<a href="#HIVEMQ" class="hov-2"
><i class="fa-solid fa-box"></i> HIVEMQ</a
>
<a class="hov-2" href="#Mosquitto"
><i class="fa-solid fa-heading"></i> Mosquitto</a
>
<a class="hov-2" href="#Paho"
><i class="fa-solid fa-arrow-pointer"></i> Paho</a
>
</div>
</nav>
<div class="main__container container flex g-5 pt-2 pb-2">
<aside class="flex flex-col g-1">
<h1>GPS tracker using MQTT</h1>
<a class="hov-2" href="#Description"
><i class="fa-solid fa-gear"></i> Description</a
>
<a class="hov-2" href="#IOT"><i class="fa-solid fa-cube"></i> IOT</a>
<a class="hov-2" href="#MQTT"
><i class="fa-solid fa-border-none"></i> MQTT</a
>
<a href="#HIVEMQ" class="hov-2"
><i class="fa-solid fa-box"></i> HIVEMQ</a
>
<a class="hov-2" href="#Mosquitto"
><i class="fa-solid fa-heading"></i> Mosquitto</a
>
<a class="hov-2" href="#Paho"
><i class="fa-solid fa-arrow-pointer"></i> Paho</a
>
<p class="mt-2">
Open source project by
<a class="hov-2" href="https://g.dev/mflxu" target="_blank"
>Sirius IOT team</a
>
</p>
</aside>
<main class="w-75 pl-2">
<div style="display: flex; flex-direction:row">
<div>
<h1 style="padding-top: 50px;">Contributors to the project:</h1>
<h3> ● Fethi Azibi</h3>
<h3> ● Hind Ledra</h3>
<h3> ● Imane Hamzaoui</h3>
<h3> ● Mohamed El Amine Bouchoucha</h3>
<h4> Documentation code by: <a href="https://github.com/imanehmz">Imane Hamzaoui</a></h4>
</div>
<div style="padding-top :60px; padding-left: 50px;">
<img src="./images/mqtt.jpg" alt="mqtt pic" width="300px" height="300px">
</div>
</div>
<div class="mb-5 mt-5">
<h3>Why MQTT</h3>
<p>
MQTT is a low network lightweight protocol based on TCP/IP, it is
low on energy and advantageous especially for wireless devices it
reduces the network bandwidth in communication and minimizes data
packets
</p>
</div>
<!-- intro -->
<h2 id="Description">Description</h2>
<p>
For our summer internship project, we worked on different IoT
solutions at Sirius NET. We have got to learn a lot and to practice
our programming skills that we acquired at school or at clubs. This
internship opened our eyes to the IoT field, with our supervisor Mr
Amine Fellahi that has been a generous encyclopedia that didn‘t
hesitate to share with us his years of experience in the field. Our
solution is based on a BCE GPS device, it is a device that offers many
functionalities such as GPS, weather data and can also be linked to
other sensors such as the car‘s CAN. We worked on getting the data
from the BCE device to the server and database using the MQTT
protocol,and translating the payloads from their formats to human
readable information.
</p>
<!-- IOT -->
<h2 id="IOT">IOT</h2>
<p>
The Internet of Things (IoT) describes the network of physical
objects—“things”—that are embedded with sensors, software, and other
technologies for the purpose of connecting and exchanging data with
other devices and systems over the internet. These devices range from
ordinary household objects to sophisticated industrial tools
</p>
<!-- grid system -->
<h2 id="MQTT">MQTT</h2>
<p>
In this internship we've used an MQTT broker to guarantee the
communication between our device and the server. In this part, we'll
be talking about MQTT and how you can use it for your IOT solution.
MQTT is a communication protocol based on tcp/ip.The first version of
the protocol was authored in 1999[<a
href="https://en.wikipedia.org/wiki/MQTT#cite_note-5"
>
1</a
>] by
<a href="https://en.wikipedia.org/wiki/Andy_Stanford-Clark">
Andy Stanford-Clark</a
>from IBM. It was used to monitor oil pipelines within the SCADA
industrial control system.[<a
href="https://en.wikipedia.org/wiki/MQTT#cite_note-6"
>2</a
>] The goal was to have a protocol that is bandwidth-efficient,
lightweight and uses little battery power, because the devices were
connected via satellite link which, at that time, was extremely
expensive.
</p>
<!-- How does it work -->
<h3>How does MQTT work</h3>
<p>In MQTT, we have a broker, subscriber and publisher.</p>
<div class="imgClass">
<img
src="./images/mqtt_broker.png"
alt="mqtt broker"
style="padding-top: 7px"
/>
<p style="padding-top: 7px">
<a
>Example of an MQTT connection (QoS 0) with connect,
publish/subscribe, and disconnect. The first message from client B
is stored due to the retain flag.
</a>
</p>
</div>
<h4>BROKER</h4>
<p>
A broker is a piece of software running on a computer (running
on-premises or in the cloud), and could be self-built or hosted by a
third party. It is available in both open source and proprietary
implementations. The broker acts as a post office. MQTT clients don't
use a direct connection address of the intended recipient, but use the
subject line called "Topic". Anyone who subscribes receives a copy of
all messages for that topic. Multiple clients can subscribe to a topic
from a single broker (one to many capability), and a single client can
register subscriptions to topics with multiple brokers (many to one).
[<a href="https://en.wikipedia.org/wiki/MQTT">3</a>]
</p>
<h4>SUBSCRIBER</h4>
<p>
A subscriber is an entity that subscribes to a specific topic on a
broker.it can subscribe to many topics at the same time, a subscriber
will receive all the messages sent in that topic.
</p>
<h4>PUBLISHER</h4>
<p>
A publisher is an entity that publishes,sends messages on a specific
topic. The subscriber of that topic will receive it. In our case the
publisher is the device because it's the one sending messages. When it
comes to choosing a broker, we have many open source options.In order
to get familiar with MQTT, it is recommended to start with HIVEMQ
which will be explained in a later section. For our project, we used a
Mosquitto broker that we installed on the server, Mosquitto will be
detailed in a later section.
</p>
<h3>Quality of service</h3>
<p>
Each connection to the broker can specify a quality of service (QoS)
measure. [<a href="https://en.wikipedia.org/wiki/MQTT#cite_note-24"
>4</a
>] These are classified in increasing order of overhead:
</p>
<p>
● At most
once the message is sent only once and the client and broker take no
additional steps to acknowledge delivery (fire and forget). <br />
● At least
once the message is re-tried by the sender multiple times until
acknowledgement is received (acknowledged delivery).<br />
● Exactly
once the sender and receiver engage in a two-level handshake to ensure
only one copy of the message is received (assured delivery).<br />
This field does not affect handling of the underlying TCP data
transmissions; it is only used between MQTT senders and receivers
</p>
<!-- HIVEMQ -->
<h2 id="HIVEMQ">HiveMQ</h2>
<h3>What is HiveMQ</h3>
<p>
HiveMQ is an online MQTT broker, in which you can simplify your Iot
application to only developing the client side, it offers several
tools for device management, including a dashboard with real-time data
displays. Role-based access can be configured and extensions are
monitored. You can benefit from HiveMQ free features by following this
documentation, and you can also use the business plan for larger
projects.
</p>
<h3>Getting started with HiveMQ</h3>
<p>
First, go to HiveMQ cloud under Cloud in the navigation bar, and then
create an account on Sign up now, you can choose to log in using your
email or github. After that you will get you profile as follows:
Choose the plan that suits you
</p>
<div class="imgClass2">
<img
src="./images/hivemq/image5.png"
alt="h1"
width="700"
height="400"
/>
<img
src="./images/hivemq/image3.png"
alt="h2"
width="700"
height="400"
/>
<p>Select the HiveMQ package that you want.</p>
<img
src="./images/hivemq/image7.png"
alt="h3"
width="700"
height="400"
/>
</div>
<p>
Choose a service provider,once you are in, it‘s time to create a
cluster! Next, go to Manage Cluster and then choose Access management
on the top so that you can provide a user name and a password for your
cluster, it looks like this :
</p>
<div class="imgClass2">
<img
src="./images/hivemq/image16.png"
alt="h3"
width="700"
height="400"
/>
</div>
<p>
After that, go to Getting started, you will see multiple tools to use
for your IoT applications
</p>
<div class="imgClass2">
<img
src="./images/hivemq/image45.png"
alt="h4"
width="700"
height="400"
/>
</div>
<h3>Websockets Client:</h3>
<p>
You can publish and subscribe using the user interface of HiveMQ, and
that‘s through the Websocket Client, here is an example of a
simple publish/subscribe scenario. The websockets client is right
here. <br />
Click on Access the websockets client and then, on the box that
appears, click on connect. Now you are connected as a client to your
cluster. <br />
Now let‘s publish a message ! <br />
go to the publish section and write your message, specify the topic
and the quality of the service
</p>
<div class="imgClass2">
<img
src="./images/hivemq/image11.png"
alt="h5"
width="700"
height="400"
/>
</div>
<p>
Write a message and pick the topic,click on publish, your message is
published now, but where to find it ? <br />
Well, since you didn‘t do any subscription, no one will receive
it ! Let‘s now do a subscribe to a topic. <br />
Go to the Subscriptions section and click on Add a new topic
subscription, add the topic and the Qos. Republish your message now.
</p>
<div class="imgClass2">
<img src="./images/hivemq/image20.jpg" alt="h6" />
<p>Your message is successfully published now!</p>
</div>
<p>
Note: the ‘#‘means: All topics, if you use the following
specification, for example : Anytopic/#, this means that all topics
under ‘AnyTopic‘ are included in the subscription.
</p>
<!-- Mosquitto part-->
<h2 id="Mosquitto">
Mosquitto
</h2>
<p>
In order to implement our broker we have installed the mosquitto Broker which is an open
source developed by ECLIPSE foundation and CEDALO. <br>
You can download it from this <a href="https://mosquitto.org/download/">link.</a> <br>
If you are working on a ubuntu machine as in our case you can check this try this command:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">sudo apt-get update</span></p>
</div>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">sudo apt-add-repository ppa:mosquitto-dev/mosquitto-ppa</span></p>
</div>
<p>
You can find the detailed documentation right <a href="https://mosquitto.org/documentation/"> here</a> <br>
You can confirm if it is installed by using this command:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto status</span></p>
</div>
<p>
If the result displays the mosquito‘s information details so it‘s PERFECT <br>
Then you have to edit the configuration file. <br>
Go to the conf file using the command :
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">cd /etc/mosquitto</span></p>
</div>
<p>
Then open the conf file using your prefered text editor vim probably not X)
We use nano because it‘s simpler.
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">so nano mosquitto.conf</span></p>
</div>
<p>
and add this line to this file :
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">allow_anonymous true
listener port</span></p>
</div>
</p>
<p>
port : is the number of the port you want to communicate with your machine with.
for example:
If we write in the conf file:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">listener 2200</span></p>
</div>
<p>
In this example 2200 is the port which the machine will allow the mqtt mosquitto broker to use
in order to communicate with other devices subscribers and publishers.
Then if you want to go further you can add a username and password for each user.
Which is a needed configuration for some Iot object in order to make the communication more
secure.
Here is a great video that will guide you : https://www.youtube.com/watch?v=IenXQvOcj54
Run
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto -d </span></p>
</div>
<p>
This commands runs mosquitto in the background as a daemon. All other
behavior remains the same. <br>
And then you can do some subscribe and publish.
</p>
<h3>Communication via MQTT using mosquitto:</h3>
<p>
● For Publish:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto_pub -p PortNumber -h AdressOfYourBroker -m Message -t Topic</span></p>
</div>
<p>
Example:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto_pub -p 1883 -h localhost -m "hello" -t "topic”</span></p>
</div>
<p>
● For a Subscribe:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto_sub -h AdressOfYourBroker -p PortNumber -t topics</span></p>
</div>
<p>
Example:
</p>
<div class="code-snippet p-2 mt-1 mb-1">
<p><span class="hl">mosquitto_sub -h localhost -p 1883 -t "#”</span></p>
</div>
<p>
Note : In this examples I‘m communicating with broker installed in my machine.
</p>
<div style="align-items: center; padding-top:70px; ">
<i><p style="color: rgb(185, 123, 248);font-size: 2rem;"> This project has been done under Sirius NET‘s supervision, check-out their <a style="font-size: 2.1rem;" href="https://www.sirius-dz.com/">website</a> for their different services </p></i>
</div>
<div class="socials">
<a href="https://github.com/imanehmz"
><i class="fa-brands fa-github hov-1"></i
></a>
<a href="https://www.linkedin.com/in/imane-hamzaoui-667514199//"
><i class="fa-brands fa-linkedin hov-1"></i
></a>
</div>
</main>
</div>
<script src="app.js"></script>
</body>
</html>