React 從Go WebSocket接收訊息

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)
    }

}

使用Simple WebSocket Client測試。

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;

github。

使用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>

• React Hook useState 簡單範例