使用 Go 和 ReactJS 構建聊天系統（五）：改善前端

SmauelL發表於2020-01-19
GoReactJS前端

歡迎來到本系列的第五節! 如果你已經走到了這，那麼我真誠地希望你喜歡學習新的 Go 概念並在 Go 和 React 中建立自己的聊天系統！

在本節中，我們將再次專注於前端，並對其進行改進，以便使用者自定義聊天訊息，並優化聊天訊息的顯式方式。

讓我們開始吧！

讓我們在  frontend/ 目錄下建立一個新  component 。這個元件本質上只會渲染一個 <input />，然後監聽 onKeyDown 的所有事件。如果在焦點位於 <input /> 元素內的狀態下注冊了按鍵，它將觸發我們稍後傳遞給這個元件的任何函式。

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.jsx 檔案開始。該元件將接收需要通過 prop 顯示的訊息。然後它將解析 prop 稱為 message 並將其儲存在元件 state 中，然後我們可以在 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>
  );
};

在第三行，您將看到我們已經更新了 .map 函式，以返回一個 <Message /> 元件，並將訊息 prop 設定為我們的 msg.data。隨後，它將 JSON 字串傳遞給每個訊息元件，然後解析並呈現它。

如果我們儲存了所有內容，那麼我們應該看到，只要我們從 WebSocket 端點收到新訊息，它就會在我們的 ChatHistory 元件中完美的呈現出來！

Chat Application Screenshot

在本節中，我們改進了現有的前端設計，並實現了將自定義訊息傳送回後端 WebSocket 伺服器的功能。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

最初的時候也是最苦的時候，最苦的時候也是最酷的時候。

相關文章