使用 Go 和 ReactJS 構(gòu)建聊天系統(tǒng)（五）：優(yōu)化前端

本節(jié)完整代碼：GitHub^[1]

本文是關(guān)于使用 ReactJS ?和 Go 構(gòu)建聊天應用程序的系列文章的第 5 部分。你可以在這里找到第 4 部分 - 處理多個客戶端^[2]

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

在本節(jié)中，我們將再次關(guān)注前端，并對其進行優(yōu)化，以便可以輸入自定義的聊天消息，并且以更好的方式顯示新的聊天消息。

聊天輸入組件

我們需要創(chuàng)建一個新的組件。該組件基本上只渲染 的內(nèi)容，然后監(jiān)聽 onKeyDown 事件（譯者注：onkeydown 事件會在用戶按下鍵盤按鍵時觸發(fā)）。當用戶在 元素內(nèi)按鍵時，它將觸發(fā) onKeyDown 事件的函數(shù)。

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

定義了組件和樣式，現(xiàn)在只需要導出它。

import?ChatInput?from?"./ChatInput.jsx";

export?default?ChatInput;

更新 App.js

我們創(chuàng)建了 ChatInput 組件，現(xiàn)在需要更新 App.js，以便它使用新組件并將已經(jīng)定義的 send() 函數(shù)傳遞給該組件。

render()?{
?return?(
??<div?className="App">
???<Header?/>
???<ChatHistory?chatHistory={this.state.chatHistory}?/>
???<ChatInput?send={this.send}?/>
??div>
?);
}

我們已經(jīng)傳入了定義的 send() 函數(shù)，該函數(shù)現(xiàn)在只是向 WebSocket 端點發(fā)送一個簡單的 “Hello” 字符串。我們需要修改它，以便接收觸發(fā)它的事件的上下文。

通過傳遞這個事件，我們將能夠查詢按下的鍵是否是 Enter 鍵，如果是，我們將 字段的值發(fā)送到 WebSocket 端點，然后清除 ：

send(event)?{
?if(event.keyCode?===?13)?{
??sendMsg(event.target.value);
??event.target.value?=?"";
?}
}

測試

現(xiàn)在已經(jīng)創(chuàng)建了 ChatInput 組件，我們來運行 Go WebSocket 服務和前端，嘗試發(fā)送一些自定義消息，看看是否都按預期工作。

優(yōu)化聊天記錄組件

現(xiàn)在，我們有一個相當丑陋但功能正常的聊天記錄界面，它顯示從 WebSocket 服務向連接的客戶端廣播的每一條消息。

這條消息只是以 JSON 格式顯示，沒有額外的樣式，所以現(xiàn)在讓我們看一下通過創(chuàng)建另一個 Message 組件來優(yōu)化它。

Message 組件

我們先定義 Message.jsx 文件。該組件將通過 ?prop 展示接收的消息。然后它將解析成名為 message 的 prop，并將其存儲在組件狀態(tài)中，然后我們可以在 render 函數(shù)中使用它。

//?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;
?}
}

更新歷史聊天記錄組件

創(chuàng)建好了 Message 組件，我們現(xiàn)在可以在 ChatHistory 組件中使用它。我們需要更新 render() 函數(shù)，如下所示：

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

?return?(
??<div?className='ChatHistory'>
???<h2>Chat?Historyh2>
???{messages}
??div>
?);
};

在第 3 行，可以看到已更新的 .map 函數(shù)返回 組件，并將消息 prop 設置為 msg.data。隨后會將 JSON 字符串傳遞給每個消息組件，然后它將能夠按照自定義的格式解析和展示它。

現(xiàn)在我們可以看到，每當我們從 WebSocket 端點收到新消息時，它就會在 ChatHistory 組件中很好地展示出來！

下一節(jié)：Part 6 - Docker 部署^[3]

via: https://tutorialedge.net/projects/chat-system-in-go-and-react/part-5-improved-frontend/

作者：Elliot Forbes^[4]譯者：咔嘰咔嘰^[5]校對：polaris1119^[6]

本文由 GCTT^[7] 原創(chuàng)編譯，Go 中文網(wǎng)^[8] 榮譽推出

參考資料