22 - Handling Server-side Message Responses

Author: codingforentrepreneurs

index.js

@@ -8,6 +8,7 @@ const MyWebSocket = () => {
     const [socket, setSocket] = useState(null)
     const [isOpen, setIsOpen] = useState(false)
     const [cellData, setCellData] = useState("") // type=text, textarea
+    const [result, setResult] = useState({})
     // 1. connect to the websocket server
     // 2. push & listen for messages in the websocket connection
     // 3. disconnect from websocket server
@@ -30,6 +31,12 @@ const MyWebSocket = () => {
             socket.onclose = () => {
                 setIsOpen(false)
             }
+
+            socket.onmessage = (event) => {
+                const {data} = event
+                const msgData = JSON.parse(data)
+                setResult(msgData)
+            }
         }
         return () => {
             if (socket) {
@@ -72,8 +79,12 @@ const MyWebSocket = () => {
             <button onClick={performOpen}>Open</button>
         </div>
         <div>{isOpen && 
-        
-        <textarea placeholder='Your cell data' value={cellData} name='cellData' onChange={handleInputChange} />
+            <React.Fragment>
+                <textarea placeholder='Your cell data' value={cellData} name='cellData' onChange={handleInputChange} />
+                {result.result && <div>{result.result}</div>}
+                {result.error && <div className='text-error'>{result.error}</div>}
+
+            </React.Fragment>
 
         } </div>
 

index.py

@@ -34,6 +34,7 @@ async def websocket_handler(websocket, path):
         if cell_data != None:
             stdout, stderr = await call_cli_command(cell_data)
             print(stdout, stderr)
+            await websocket.send(json.dumps({"result": stdout, "error": stderr}))
         # await websocket.send(json.dumps({"this": "awesome"}))
         # print(message)
     # pass

index.scss

@@ -1,3 +1,3 @@
-body {
+.text-error {
     color: red !important;
 }