React與Go WebSocket發收訊息範例。
範例環境:
- Go 1.19
- React 18
事前要求
請先參考以下了解必要概念:
- React 建立組件 create component
- React onclick 事件處理範例
- React 組件狀態 Component State
- React Hook useState 簡單範例
- React Hook useEffect 簡單範例
- Golang WebSocket hello world
- React 從Go WebSocket接收訊息
Go
參考「Golang WebSocket hello world」建立WebSocket server,WebSocket URL為http:localhost:8080/echo
。
React
建立React應用程式網址為http:localhost:3000
。
App.js
內容如下,建立ComponentMessage
。
App.js
import { useEffect, useState } from "react";
import './App.css';
import * as React from 'react';
function App() {
return (
<Message/>
);
}
const ws = new WebSocket('ws://localhost:8080/echo'); // get WebSocket connection object
const Message = () => {
const [input, setInput] = useState('') // 'input' store data sending to WebScoket Server
const [message, setMessage] = useState('') // 'message'store data received from WebSocket Server
const handleChange = (event) => { // when <input> value changing, store the value to 'input' state
setInput(event.target.value);
};
const handleClick = () => { // when clicking Send button, send stored value of 'input' to WebSocket Server
ws.send(input)
}
useEffect(() => {
ws.addEventListener('message', (event) => { // listen WebSocket message event to receive data from WebSocket Server
setMessage(event.data)
})
},[])
return (
<div>
<div>
<input onChange={handleChange}/>
<button onClick={handleClick}>Send</button>
</div>
<div>{message}</div>
</div>
)
}
export default App;
使用new WebSocket('ws://localhost:8080/echo')
建立連線物件WebSocket
在欄位輸入文字時handleChange
函式會將欄位值儲存至Message.state.input
。
點擊Send按鈕時handleClick
函式會將Message.state.input
的值透過WebSocket.send()
送至Go WebSocket server。
useEffect()
使用WebSocket.addEventListener('message', listerer)
監聽當有訊息送來時呼叫setMessages()
更新Message.state.message
的狀態。useEffect()
第二個參數為dependency array,使用一個空陣列避免因狀態改變造成的無窮迴圈。
測試
啟動Go及React程式,在瀏覽器輸入http://localhost:3000
開啟頁面,在欄位輸入訊息按Send會將訊息送至Go WebSocket server,然後同樣的訊息會再由Go WebSocket server寫出至React的WebSocket client並顯示在輸入欄位下方。
沒有留言:
張貼留言