歡迎來到本系列的第五節! 如果你已經走到了這,那麼我真誠地希望你喜歡學習新的 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
元件中完美的呈現出來!
在本節中,我們改進了現有的前端設計,並實現了將自定義訊息傳送回後端 WebSocket 伺服器的功能。
本文譯自tutorialedge
本作品採用《CC 協議》,轉載必須註明作者和本文連結