Go 框架与 Svelte: 前端框架的新生力量

func main() {
  messages := make([]Message, 0)

  http.HandleFunc("/messages", func(w http.ResponseWriter, r *http.Request) {
    switch r.Method {
    case http.MethodGet:
      json.NewEncoder(w).Encode(messages)
    case http.MethodPost:
      var message Message
      json.NewDecoder(r.Body).Decode(&message)
      messages = append(messages, message)
      io.WriteString(w, "Message received")
    default:
      http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
    }
  })

  fs := http.FileServer(http.Dir("./static"))
  http.Handle("/", fs)

  log.Fatal(http.ListenAndServe(":8080", nil))
}

<script>
  import io from "socket.io-client";

  let messages = [];
  let socket = io();

  socket.on("connect", () => {
    console.log("Connected to the server");
  });

  socket.on("message", (message) => {
    messages.push(message);
  });

  function sendMessage() {
    const message = document.getElementById("message").value;
    socket.emit("message", message);
    document.getElementById("message").value = "";
  }
</script>

<style>
  body {
    font-family: Arial, sans-serif;
  }

  ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
  }

  li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  #message-form {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
</style>

<div>
  <h1>Chat App</h1>

  <ul>
    {#each messages as message}
      <li>{message}</li>
    {/each}
  </ul>

  <form id="message-form">
    <input type="text" id="message" placeholder="Type a message" required>
    <button type="submit" onClick={sendMessage}>Send</button>
  </form>
</div>