Trainee project about how to utilize WebSockets in Bravo Dashboard.

1. WebSockets
in
Bravo
Dashboard
Ilari Lehtonen
22.8.2019

2. Contents
What is WebSocket
The Project
WebSocket examples
1
2
3

3. WebSocket
● Computer communication protocol
● Works over a single TCP connection.
● Used to achieve connection between web browser
and server.
● Full-duplex communication
○ Real time data transfer both directions
○ Compared to HTTP polling which is a half-duplex
communication.
● Used a lot in chat applications

4. Bravo
Dashboard

6. Dashboard
● Mainly developed for Exove’s internal use.
○ To show employee presence and absences
○ Other useful internal data
○ Useful everyday data like weather, date and news.

7. Why WebSockets in Bravo Dashboard
● Curiosity, no experience beforehand
● Easy to send and receive data quickly.
○ For example editing pingpong results in Dashboard.

8. The code

9. Socket.io
● Library which enables use of websockets in Bravo
Dashboard.
● Few useful methods:
○ On
○ Off
○ Emit

10. Frontend: Backend:GETTING DATA FROM DATABASE
Start listening port 8000.
Request for get initial notes from backend.
Listening socket connection and receive response
when server has sent the data.
After getting notes from database, send
them to frontend with emit.
Receiving request for initial notes.
Close the socket connection.

11. Frontend: Backend:SENDING DATA TO DATABASE
Sending input field data to server with emit.
Receiving data from frontend as parameters
and use the data to update mongoDB.

12. Thank you!