React從Go的WebSocket獲取訊息範例。
範例環境:
- Go 1.19
- React 18
Go
參考Golang WebSocket hello world建立WebSocket server,WebSocket URL為http:localhost:8080/echo
。
在echoHandler
建立WebSocket連線並寫出訊息至client。
main.go
package main
import (
"net/http"
"github.com/gorilla/websocket"
)
var upgrader = websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool {
return true // allow CORS request's Origin header
},
}
func main() {
http.HandleFunc("/echo", ehcoHandler)
http.ListenAndServe(":8080", nil)
}
func ehcoHandler(w http.ResponseWriter, r *http.Request) {
conn, err := upgrader.Upgrade(w, r, nil) // get a websocket connettion
if err != nil {
panic(err)
}
defer conn.Close()
message := "show me the money"
err = conn.WriteMessage(websocket.TextMessage, []byte(message)) // write a message to client
if err != nil {
panic(err)
}
}
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');
const Message = () => {
const [message, setMessage] = useState([])
useEffect(() => {
ws.addEventListener('message', (event) => {
setMessage(event.data)
})
},[])
return (<div>{message}</div>)
}
export default App;
使用new WebSocket('ws://localhost:8080/echo')
建立連線物件WebSocket
。
Message
component中的useEffect()
使用WebSocket.addEventListener('message', listerer)
監聽當有訊息送來時呼叫setMessage()
更新Message.state.message
的狀態。useEffect()
第二個參數為dependency array,使用一個空陣列避免因狀態改變造成的無窮迴圈。
測試
啟動Go專案後再啟動React專案在瀏覽器輸入http://localhost:3000
回傳HTML內容如下。
<div>show me the money</div>
沒有留言:
張貼留言