Skip to content

Commit 3629ed9

Browse files
21 - Handle Textinput for Socket Messages
1 parent d551d41 commit 3629ed9

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

index.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const MyWebSocket = () => {
77
const wsURI = 'ws://localhost:8765'
88
const [socket, setSocket] = useState(null)
99
const [isOpen, setIsOpen] = useState(false)
10+
const [cellData, setCellData] = useState("") // type=text, textarea
1011
// 1. connect to the websocket server
1112
// 2. push & listen for messages in the websocket connection
1213
// 3. disconnect from websocket server
@@ -51,21 +52,30 @@ const MyWebSocket = () => {
5152

5253
const performSend = _ => {
5354
if (socket && socket.readyState == WebSocket.OPEN) {
54-
const myData = {cell_data: "print(\"hello world\")"}
55+
const myData = {cell_data: cellData}
5556
socket.send(JSON.stringify(myData))
57+
setCellData("")
5658
} else {
5759
alert("Your websocket session has closed")
5860
}
59-
6061
}
6162

63+
const handleInputChange = (event) => {
64+
const val = event.target.value
65+
setCellData(val)
66+
}
67+
6268
return <div>
6369
<h1>WebSocket</h1>
6470
<div>
6571
<button onClick={performClose}>Close</button>
6672
<button onClick={performOpen}>Open</button>
6773
</div>
68-
<div>{isOpen && <p>Open Socket</p>} </div>
74+
<div>{isOpen &&
75+
76+
<textarea placeholder='Your cell data' value={cellData} name='cellData' onChange={handleInputChange} />
77+
78+
} </div>
6979

7080
<button onClick={performSend}>Send</button>
7181
</div>

0 commit comments

Comments
 (0)