[譯] 使用 Go 和 ReactJS 構建聊天系統 (五)

本節完整程式碼：GitHub

本文是關於使用 ReactJS 和 Go 構建聊天應用程式的系列文章的第 5 部分。你可以在這裡找到第 4 部分 - 處理多個客戶端

歡迎來到本系列的第 5 部分！如果你已經學到這兒了，那麼我希望你享受學習 Go 的樂趣並運用 Go 和 React 建立自己的聊天系統！

在本節中，我們將再次關注前端，並對其進行優化，以便可以輸入自定義的聊天訊息，並且以更好的方式顯示新的聊天訊息。

聊天輸入元件

我們需要建立一個新的元件。該元件基本上只渲染 <input /> 的內容，然後監聽 onKeyDown 事件（譯者注：onkeydown 事件會在使用者按下鍵盤按鍵時觸發）。當使用者在 <input /> 元素內按鍵時，它將觸發 onKeyDown 事件的函式。

import React, { Component } from "react";
import "./ChatInput.scss";

class ChatInput extends Component {
  render() {
    return (
      <div className="ChatInput">
        <input onKeyDown={this.props.send} />
      </div>
    );
  }
}

export default ChatInput;
複製程式碼

然後，我們將為新的輸入元件定義一些樣式：

.ChatInput {
  width: 95%;
  display: block;
  margin: auto;

  input {
    padding: 10px;
    margin: 0;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 98%;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
  }
}
複製程式碼

定義了元件和樣式，現在只需要匯出它。

import ChatInput from "./ChatInput.jsx";

export default ChatInput;
複製程式碼

更新 App.js

我們建立了 ChatInput 元件，現在需要更新 App.js，以便它使用新元件並將已經定義的 send() 函式傳遞給該元件。

render() {
  return (
    <div className="App">
      <Header />
      <ChatHistory chatHistory={this.state.chatHistory} />
      <ChatInput send={this.send} />
    </div>
  );
}
複製程式碼

我們已經傳入了定義的 send() 函式，該函式現在只是向 WebSocket 端點傳送一個簡單的 “Hello” 字串。我們需要修改它，以便接收觸發它的事件的上下文。

通過傳遞這個事件，我們將能夠查詢按下的鍵是否是 Enter 鍵，如果是，我們將 <input /> 欄位的值傳送到 WebSocket 端點，然後清除 <input />：

send(event) {
  if(event.keyCode === 13) {
    sendMsg(event.target.value);
    event.target.value = "";
  }
}
複製程式碼

測試

現在已經建立了 ChatInput 元件，我們來執行 Go WebSocket 服務和前端，嘗試傳送一些自定義訊息，看看是否都按預期工作。

優化聊天記錄元件

現在，我們有一個相當醜陋但功能正常的聊天記錄介面，它顯示從 WebSocket 服務向連線的客戶端廣播的每一條訊息。

這條訊息只是以 JSON 格式顯示，沒有額外的樣式，所以現在讓我們看一下通過建立另一個 Message 元件來優化它。

Message 元件

我們先定義 Message.jsx 檔案。該元件將通過 prop 展示接收的訊息。然後它將解析成名為 message 的 prop，並將其儲存在元件狀態中，然後我們可以在 render 函式中使用它。

// src/components/Message/Message.jsx
import React, { Component } from "react";
import "./Message.scss";

class Message extends Component {
  constructor(props) {
    super(props);
    let temp = JSON.parse(this.props.message);
    this.state = {
      message: temp
    };
  }

  render() {
    return <div className="Message">{this.state.message.body}</div>;
  }
}

export default Message;
複製程式碼

跟之前一樣，我們還需要定義一個 index.js 檔案，以使其在專案的其餘部分中可匯出：

// src/components/Message/index.js
import Message from "./Message.jsx";

export default Message;
複製程式碼

到此為止，我們的元件樣式還是比較基本的，只是在一個框中顯示訊息，我們再設定一些 box-shadow，使聊天介面有點視覺深度。

.Message {
  display: block;
  background-color: white;
  margin: 10px auto;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
  border-radius: 5px;
  clear: both;

  &.me {
    color: white;
    float: right;
    background-color: #328ec4;
  }
}
複製程式碼

更新歷史聊天記錄元件

建立好了 Message 元件，我們現在可以在 ChatHistory 元件中使用它。我們需要更新 render() 函式，如下所示：

render() {
  console.log(this.props.chatHistory);
  const messages = this.props.chatHistory.map(msg => <Message message={msg.data} />);

  return (
    <div className='ChatHistory'>
      <h2>Chat History</h2>
      {messages}
    </div>
  );
};
複製程式碼

在第 3 行，可以看到已更新的 .map 函式返回 <Message />元件，並將訊息 prop 設定為 msg.data。隨後會將 JSON 字串傳遞給每個訊息元件，然後它將能夠按照自定義的格式解析和展示它。

現在我們可以看到，每當我們從 WebSocket 端點收到新訊息時，它就會在 ChatHistory 元件中很好地展示出來！

下一節：Part 6 - Docker 部署

---

原文：tutorialedge.net/projects/ch…

作者：Elliot Forbes 譯者：咔嘰咔嘰 校對：polaris1119

本文由 GCTT 原創編譯，Go 中文網 榮譽推出