WebSocket for live updates in Raspberry Pi - Step-by-Step Execution

Concept Flow - WebSocket for live updates

Client opens WebSocket connection

↓

Server accepts connection

↓

Client and Server send messages

↓

Client receives live updates

↓

Server sends live data

↓

Connection stays open for real-time

↓

Client or Server closes connection

The client opens a WebSocket connection to the server, which stays open to send and receive live updates in real time.

Execution Sample

Raspberry Pi

import asyncio
import websockets

async def listen():
    async with websockets.connect('ws://localhost:8765') as ws:
        while True:
            msg = await ws.recv()
            print(f'Received: {msg}')

This code connects to a WebSocket server and continuously receives and prints live messages.

Execution Table

Step	Action	Evaluation	Result
1	Client calls websockets.connect()	Connection attempt to ws://localhost:8765	Connection established
2	Client awaits ws.recv()	Waiting for server message	No message yet, waiting...
3	Server sends 'Hello from server!'	Message sent over WebSocket	Client receives message
4	Client prints message	Prints 'Received: Hello from server!'	Output shown on screen
5	Connection remains open	Ready for more messages	Live updates possible
6	Client or server closes connection	Connection closed	WebSocket session ends

💡 Connection closes when client or server ends session

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
ws	None	WebSocket connection object	Same connection object	Closed or None after close
msg	None	'Hello from server!'	'Hello from server!'	No new message after close

Key Moments - 3 Insights

Why does the client wait at ws.recv()?

At step 2 in the execution_table, the client pauses at ws.recv() because it waits for the server to send a message before continuing.

What keeps the connection open for live updates?

Step 5 shows the connection remains open, allowing continuous sending and receiving of messages without reconnecting.

What happens when the connection closes?

At step 6, either client or server closes the connection, ending the live update session and stopping message exchange.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'msg' after step 3?

A 'Received: Hello from server!'

B None

C 'Hello from server!'

D WebSocket connection object

💡 Hint

Check variable_tracker row for 'msg' after Step 3

At which step does the client print the received message?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look at execution_table row describing printing action

If the server never sends a message, what happens at step 2?

A Client waits indefinitely at ws.recv()

B Client connection closes

C Client prints a message immediately

D Client throws an error

💡 Hint

Refer to execution_table step 2 where client waits for server message

Concept Snapshot

WebSocket for live updates:
- Client opens a WebSocket connection to server
- Connection stays open for two-way live data
- Client waits for messages with ws.recv()
- Server sends live updates anytime
- Connection closes when either side ends
- Enables real-time communication without reconnects

Full Transcript

This example shows how a Raspberry Pi client uses WebSocket to get live updates from a server. First, the client opens a connection to the server. Then it waits to receive messages using ws.recv(). When the server sends a message, the client receives and prints it. The connection stays open to allow continuous live updates. Finally, the connection closes when either the client or server decides to end it. This method is useful for real-time data like sensor readings or notifications.

Practice

1. What is the main advantage of using WebSocket on a Raspberry Pi for live updates?

easy

A. It keeps a connection open for instant two-way data flow.

B. It sends data only once when the page loads.

C. It requires no network connection to work.

D. It stores data locally on the Raspberry Pi.

Solution

1. Step 1: Understand WebSocket connection behavior

   WebSocket keeps a connection open between the Raspberry Pi and the web page, allowing data to flow instantly both ways.

2. Step 2: Compare options with WebSocket features

   Options A, B, and C do not describe WebSocket's live, continuous connection feature.

3. Final Answer:

   It keeps a connection open for instant two-way data flow. -> Option A

4. Quick Check:

   WebSocket = open two-way connection [OK]

Hint: Remember: WebSocket keeps connection open for live updates [OK]

Common Mistakes:

• Thinking WebSocket sends data only once
• Confusing WebSocket with HTTP request-response
• Assuming WebSocket works offline

2. Which of the following is the correct way to create a WebSocket client connection in JavaScript on a Raspberry Pi web page?

easy

A. const socket = new Socket('ws://localhost:8080');

B. const socket = WebSocket.connect('http://localhost:8080');

C. const socket = WebSocket('https://localhost:8080');

D. const socket = new WebSocket('ws://localhost:8080');

Solution

1. Step 1: Recall correct WebSocket syntax in JavaScript

   The correct syntax to create a WebSocket client is using the WebSocket constructor with the URL starting with 'ws://' or 'wss://'.

2. Step 2: Check each option's syntax

   const socket = new WebSocket('ws://localhost:8080'); uses 'new WebSocket' with 'ws://' which is correct. Options A, B, and D use incorrect methods or protocols.

3. Final Answer:

   const socket = new WebSocket('ws://localhost:8080'); -> Option D

4. Quick Check:

   WebSocket client = new WebSocket('ws://...') [OK]

Hint: Use 'new WebSocket("ws://...")' to create connection [OK]

Common Mistakes:

• Using 'http://' instead of 'ws://'
• Calling WebSocket as a function without 'new'
• Using undefined methods like WebSocket.connect

3. Given this Python code running on a Raspberry Pi using the 'websockets' library, what will be printed when a client connects and sends 'Hello'?

import asyncio
import websockets

async def handler(websocket):
    message = await websocket.recv()
    print(f'Received: {message}')

async def main():
    async with websockets.serve(handler, 'localhost', 8765):
        await asyncio.Future()

asyncio.run(main())

medium

A. Received: Hello

B. Received: websocket

C. Error: No client connected

D. Received: None

Solution

1. Step 1: Understand the handler function

   The handler waits to receive a message from the client and then prints it with 'Received: ' prefix.

2. Step 2: Analyze what happens when client sends 'Hello'

   The message 'Hello' is received and printed as 'Received: Hello'.

3. Final Answer:

   Received: Hello -> Option A

4. Quick Check:

   Received message = 'Hello' [OK]

Hint: Handler prints whatever client sends prefixed by 'Received:' [OK]

Common Mistakes:

• Assuming it prints 'websocket' instead of message
• Expecting an error without client connection
• Thinking it prints None if message missing

4. Identify the error in this Raspberry Pi WebSocket server code snippet:

import asyncio
import websockets

async def handler(websocket):
    while True:
        message = websocket.recv()
        print(message)

async def main():
    async with websockets.serve(handler, 'localhost', 8765):
        await asyncio.Future()

asyncio.run(main())

medium

A. The server address 'localhost' is invalid.

B. The while loop should be outside the handler function.

C. Missing 'await' before websocket.recv() call.

D. The 'asyncio.run(main())' should be 'asyncio.start(main())'.

Solution

1. Step 1: Check asynchronous calls in handler

   The 'websocket.recv()' is a coroutine and must be awaited to get the message.

2. Step 2: Verify other parts of the code

   Address 'localhost' is valid, the loop inside handler is correct for continuous receiving, and 'asyncio.run' is the proper way to start.

3. Final Answer:

   Missing 'await' before websocket.recv() call. -> Option C

4. Quick Check:

   Await async calls like websocket.recv() [OK]

Hint: Always await async functions like websocket.recv() [OK]

Common Mistakes:

• Forgetting 'await' on async calls
• Misplacing the while loop
• Using wrong asyncio start function

5. You want your Raspberry Pi to send live temperature updates to a web page using WebSocket. Which approach best ensures the web page updates instantly when the sensor value changes?

hard

A. Open a new WebSocket connection every time the temperature changes.

B. Open a WebSocket connection once, then send new temperature data whenever it changes.

C. Send temperature data only when the web page reloads.

D. Use HTTP GET requests repeatedly to fetch temperature data.

Solution

1. Step 1: Understand WebSocket usage for live updates

   WebSocket keeps a connection open, so sending data only when it changes over the same connection is efficient and instant.

2. Step 2: Evaluate other options

   Opening new connections repeatedly (B) wastes resources. Sending data only on reload (C) or using HTTP polling (D) is slower and less real-time.

3. Final Answer:

   Open a WebSocket connection once, then send new temperature data whenever it changes. -> Option B

4. Quick Check:

   One open connection + send updates = instant live data [OK]

Hint: Keep one connection open; send updates as they happen [OK]

Common Mistakes:

• Opening multiple connections unnecessarily
• Relying on page reloads for updates
• Using HTTP polling instead of WebSocket