The complete code for this section: GitHub

This article is part 5 of a series on building chat applications using ReactJS and Go. You can find part 4 – Handling multiple clients here

Welcome to part 5 of this series! If you’ve learned this, I hope you have fun learning Go and building your own chat system with Go and React!

In this section, we’ll look at the front end again and optimize it so that custom chat messages can be entered and new chat messages can be displayed in a better way.

Chat input component

We need to create a new component. This component basically just renders the content of and then listens for onKeyDown events. When the user presses a key within the element, it fires a function for the onKeyDown event.

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;
Copy the code

We will then define some styles for the new input component:

.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); }}Copy the code

The component and style are defined, now you just need to export it.

import ChatInput from "./ChatInput.jsx";

export default ChatInput;
Copy the code

Update the App. Js

We created the ChatInput component, and now we need to update app.js so that it uses the new component and passes the already defined send() function to the component.

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

We’ve passed in the defined send() function, which now just sends a simple “Hello” string to the WebSocket endpoint. We need to modify it to receive the context of the event that triggered it.

By passing this event, we will be able to query whether the key was pressed as Enter, if so, we send the value of the < INPUT /> field to the WebSocket endpoint, and then clear :

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

test

Now that the ChatInput component is created, let’s run the Go WebSocket service and the front end and try to send some custom messages to see if everything works as expected.

Optimize the chat log component

Now, we have a fairly ugly but functional chat log interface that displays every message broadcast from the WebSocket service to the connected client.

This Message is just displayed in JSON format with no additional styling, so now let’s take a look at optimizing it by creating another Message component.

The Message component

Let’s define the message.jsx file first. This component will display the received message through prop. It then parses the prop named Message and stores it in the component state, which we can then use in the Render function.

// 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;
Copy the code

As before, we also need to define an index.js file to make it exportable in the rest of the project:

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

export default Message;
Copy the code

So far, our component style is pretty basic, just displaying messages in a box, and we’ll set some box-shadows to give the chat interface some visual depth.

.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;
  }
}
Copy the code

Update the history chat component

With the Message component created, we can now use it in the ChatHistory component. We need to update the render() function as follows:

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>
  );
};
Copy the code

In line 3, you can see that the updated.map function returns the
component and sets the Message prop to msG.data. The JSON string is then passed to each message component, which will then be able to parse and display it in its own custom format.

Now we can see that whenever we receive a new message from the WebSocket endpoint, it shows up nicely in the ChatHistory component!

Next section: Part 6 – Docker deployment

Original text: tutorialedge.net/projects/ch…

Author: Elliot Forbes

This article is originally compiled by GCTT and published by Go Chinese