Writing the chat frontend
We have one tiny server-side piece to do before we write our chat client, and that is to write the static file-serving chat handler. It looks almost exactly like our index handler:
func APIChatHandler(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "chat.html")
}
Writing the HTML#
With that done, let's talk about writing chat.html. We are going to keep the HTML and CSS fairly minimal. It will be a list of messages, stored in a div, with a separate div and button for the chat box and send message button.
The base of it will look like this, and we will be filling in the <script> tag with all of the parts necessary to interact with our server.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.message {display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 0 10px 0 10px;
}
span {margin-left: 10px;
}
</style>
</head>
<body style="margin: 0;">
<div style="display: flex; flex-direction: column; height: 100vh;">
<h1 style="margin: 10px;">Chat Server</h1>
<div
style="display: flex; flex-direction: column-reverse; flex: 1 1 0%; width: 100vw; overflow-y: auto;"
><div id="messages" aria-live="polite">
<div class="message">
<button onclick="getOlderMessages()">Get Older Messages</button>
</div>
</div>
</div>
<form
method="post"
action="/api/messages"
style="display: flex; margin: 10px;"
><input
type="text"
name="message"
id="message-text"
style="flex-grow: 2; border: 1px solid #ccc; border-radius: 5px; padding: 10px;"
/><button
onclick="sendMessage()"
type="submit"
style="border-radius: 5px;"
> Send</button>
</form>
</div>
<script>
// We will be writing our frontend code here!</script>
</body>
</html>
Let's talk about the important parts of the above HTML and CSS before moving on to the JavaScript. There are a lot of important concepts here, and more than we will be able to mention, because we're not frontend specialists. But we did talk with one (Thank you Katie Sylor-Miller), to make sure we're not giving you an actively bad example, and in so doing learned quite a lot, and continue to be awed by this specialization within the programming diaspora. There is incredible technical depth on the frontend, and it is great to have excellent resources to help with this essential part of web programming.
Beyond thanking frontend specialists, there are a few key things to note with the above. We have two important HTML elements with ids; the messages div, which will contain all of our chat messages, and the message-text input which will hold the value for whatever message our user is sending. The messages div also has the aria-live="polite" attribute, which is important for the accessibility of screen readers. ARIA live regions are essential for any part of a page that will change dynamically. We are setting this one to "polite" to indicate that it should be shared with the reader so long as they are idle.
We use a form for our message submission to more closely match a normal data submission style within HTML. It also gives us a fallback for submitting messages if the user doesn't have JavaScript enabled. Unfortunately for them, we don't yet have a way to display messages without JavaScript, but that could be added, and our chat application would then be able to support that rare but possible case.
Writing the JavaScript#
We have two onclick handlers, getOlderMessages() and sendMessage(). We will be writing these in our JavaScript section to handle the concepts after which they are named.
On that note, we should talk about our requirements and then write our code.
Our frontend will need to send and retrieve messages. Retrieving messages has a few cases to handle:
There's the initial page load, where we fetch the ten most recent messages.
We also want to fetch messages older or newer than a given time.
Retrieved messages need to be either appended to our
messagesdiv if they are newer, or prepended if they are older.Finally, because we are using polling, we want to continually check to see if there are new messages.
Let's start with sending messages.
This page is a preview of Reliable Webservers with Go