Skip to content

Commit e5e507a

Browse files
22 - Handling Server-side Message Responses
1 parent 3629ed9 commit e5e507a

File tree

3 files changed

+15
-3
lines changed

3 files changed

+15
-3
lines changed

index.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const MyWebSocket = () => {
88
const [socket, setSocket] = useState(null)
99
const [isOpen, setIsOpen] = useState(false)
1010
const [cellData, setCellData] = useState("") // type=text, textarea
11+
const [result, setResult] = useState({})
1112
// 1. connect to the websocket server
1213
// 2. push & listen for messages in the websocket connection
1314
// 3. disconnect from websocket server
@@ -30,6 +31,12 @@ const MyWebSocket = () => {
3031
socket.onclose = () => {
3132
setIsOpen(false)
3233
}
34+
35+
socket.onmessage = (event) => {
36+
const {data} = event
37+
const msgData = JSON.parse(data)
38+
setResult(msgData)
39+
}
3340
}
3441
return () => {
3542
if (socket) {
@@ -72,8 +79,12 @@ const MyWebSocket = () => {
7279
<button onClick={performOpen}>Open</button>
7380
</div>
7481
<div>{isOpen &&
75-
76-
<textarea placeholder='Your cell data' value={cellData} name='cellData' onChange={handleInputChange} />
82+
<React.Fragment>
83+
<textarea placeholder='Your cell data' value={cellData} name='cellData' onChange={handleInputChange} />
84+
{result.result && <div>{result.result}</div>}
85+
{result.error && <div className='text-error'>{result.error}</div>}
86+
87+
</React.Fragment>
7788

7889
} </div>
7990

index.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ async def websocket_handler(websocket, path):
3434
if cell_data != None:
3535
stdout, stderr = await call_cli_command(cell_data)
3636
print(stdout, stderr)
37+
await websocket.send(json.dumps({"result": stdout, "error": stderr}))
3738
# await websocket.send(json.dumps({"this": "awesome"}))
3839
# print(message)
3940
# pass

index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
body {
1+
.text-error {
22
color: red !important;
33
}

0 commit comments

Comments
 (0)