[譯] 使用 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 中文網 榮譽推出