Chat application in a single HTML file

This is the most simple example of making an RTI-enabled web application.

All you need is the RTI installed on your computer, a text editor (like Notepad on Windows, or TextEdit on macOS), a web browser, and a few minutes to complete ~40 lines of code.

TL;DR final version chat.html

Create a chat UI

Let’s start with an extremely basic chat UI in HTML - a form with two input fields for name, message and a send button, and finally a div to display received messages.

Create a file in your favorite text editor, let’s call it chat.html, with the following HTML content:

<html>
    <head>
        <title>RTI Chat</title>
    </head>
    <body>
        <form>
            <input type="text" id="name" placeholder="Name" size="10" autofocus />
            <input type="text" id="message" placeholder="Type message here..." size="40" />
            <button type="submit">Send</button>
        </form>
        <div id="messages"></div>
    </body>
</html>

Open the file in your web browser. It should look something like this:

Result 1

Add the RTI client and wire it up with JavaScript

Now let’s add some functionality.

First, include the RTI JavaScript client in the head section at the top of the HTML file, by adding this line right before the line that has </head> in it:

<script src="https://get.inhumatesystems.com/js/rti.js"></script>

Then, add a <script> tag near the bottom of the file, right before the line with </body> in it. First thing the script needs to do is get a hold of the UI elements so that we can interact with them:

<script>
    const form = document.querySelector("form")
    const nameInput = document.getElementById("name")
    const messageInput = document.getElementById("message")
    const messagesDiv = document.getElementById("messages")
</script>

Next, let’s create an RTI client for our application and display a message when connected, or when errors occur. Add these lines at the bottom, before the </script> line:

const rti = new RTI.Client({ application: "Chat RTI Tutorial" })
rti.on("connect", () => (messagesDiv.innerText += `Connected to RTI at ${rti.url}\n`))
rti.on("error", (error) => (messagesDiv.innerText += `RTI error: ${error}\n`))

In your web browser, reload the file (F5 or Cmd-R), and it should say Connected to RTI. If you open the RTI control panel or Viewer, you should also see a little client box that says Chat RTI Tutorial. That means your client is connected to the RTI.

Result 2

Last thing to do is actually send and receive chat messages. Let’s make it so that when we submit the form, we prevent the default action (which is to reload the page) and instead, if we typed a message, publish our name (or Anonymous if we didn’t type any) and our message on the chat channel of the RTI. For a proper user experience, we also want to clear the message input field and re-focus it so that we can keep typing messages.

form.onsubmit = (event) => {
    event.preventDefault()
    if (messageInput.value) {
        const message = `${nameInput.value || "Anonymous"}: ${messageInput.value}`
        rti.publishText("chat", message)
    }
    messageInput.value = ""
    messageInput.focus()
}

To receive messages, we need to subscribe to the chat channel and add the received content to the div we created for that purpose:

rti.subscribeText("chat", (message) => {
    messagesDiv.innerText += message + "\n"
})

Et voilà! You now have a simple chat application. If you open the file in another browser window, you can chat with yourself.

Result 3

If you ran into some trouble or want to compare to our final version, grab it here: chat.html

With a few changes, you could even send this file to your friends and have insightful conversations with them through your RTI-powered chat app, but that requires deploying the RTI so that it’s accessible to your friends over the Internet, which we’ll save for another day.