Step 1: Set up the database

First, we need to set up the database we’ll use to store our chat messages. We’ll use SQLite, describe by its authors as “a small, fast, self-contained, high-reliability, full-featured, SQL database engine.” It also has first-class support from RStudio through the RSQLite package.

SQLite databases exist as regular files, so we’ll name ours messages.sqlite and keep it in a folder called data. Databases can contain many tables, so we’ll store our messages in a table named messages.

Then, to initialize our database, we’ll create a zero-row tibble to use as a template that we can add rows to later. To keep it simple, we’ll store each message’s username, date and time, and message, all as characters.

library(dplyr)
library(DBI)
library(RSQLite)

# create a zero-row tibble with the correct column names and data types
message_db_schema <- dplyr::tibble(username = character(0),
                                   datetime = character(0),
                                   message = character(0))

# make sure we have a data directory
if (!dir.exists("data")) dir.create("data")

# connect to SQLite database, or create one
con <- DBI::dbConnect(RSQLite::SQLite(), "data/messages.sqlite")

# if there is no message table, create one using our schema
if (!"messages" %in% DBI::dbListTables(con)){
  dplyr::copy_to(con, message_db_schema, name = "messages", overwrite = TRUE,  temporary = FALSE )
}

Now we have a connection object named con that points to our database.

To add a new message, we put our data in a one-row tibble and use DBI::dbAppendTable() to add it:

new_message <- dplyr::tibble(
  username = "Chris",
  datetime = Sys.time(),
  message = "Hi everyone!"
)

RSQLite::dbAppendTable(con, "messages", new_message)

And to read our message, we use dplyr::tbl() to get a connection to the messages table, and then call collect() to download the results.

chat_messages <- dplyr::tbl(con, "messages") %>%
  collect()

Until we call collect(), we’re actually operating on data that’s in the database, not stored in memory. We’re not taking advantage of here, but databases give the ability to do a lot of dplyr-esque operations remotely and then to call collect() to download the results once they’re processed.

This is really the entirety of the database stuff, and if you had a few friends running R on the same machine you could technically use this to chat with each other.

But, as is so often the case, putting this simple logic into a Shiny app makes it much more impressive!

Step 2: Make it Shiny

Let’s set up the UI for our basic Shiny app. We’ll use a sidebarLayout() structure with chat controls on the left, and chat messages on the right. We need two inputs: a text field for message text, and a button to send messages. For convenience we’ll also add a second button to clear the chat logs.

I’ll present the highlights here, and you can see the whole thing in the file app-basic.R on GitHub here.

Our entire UI code fits into just a few lines:

# Define UI for basic chat application
ui <- fluidPage(
  
  # Application title
  titlePanel("Simple SQL-Powered Chat in R Shiny!"),
  
  # Sidebar with user input and chat controls
  sidebarLayout(
    sidebarPanel(width = 3,
                 textInput("msg_text", "Message Text:"),
                 actionButton("msg_button", "Send Message"),
                 hr(),
                 actionButton("msg_clearchat", "Clear Chat Log")),
    
    # main chat panel
    mainPanel(tableOutput("messages_basic")))
)

Next, we define our server logic. To keep it simple we’ll assign users random names à la Firstname Bunchofnumbers¹, and assume we’ll set up a connection con to our database as described above.

Then we need:

• A button handler for when people click “Send Message”;
• A button handler for when people click “Clear Chat Log”;
• A way to regularly check for new messages; and,
• An output that displays new messages as they’re received.

To make this all work, we’re going to store the current set of messages locally in a reactiveValues object. This way our outputs will update automatically if we get new messages. We’ll also put the code to read messages into a function since we need to do it in a few different places:

# A separate function in case you want to do any data preparation (e.g. time zone stuff)
read_messages <- function(con){
  dplyr::tbl(con, "messages") %>%
    collect()
}

# read initial set of messages
messages_db <- reactiveValues(messages = read_messages(con))

The button handler for sending a message is straightforward but long. If there is a valid message to send, then create a one-row tibble with the username/date-time/message, append it to the table messages in the database, read the new values from the database, and empty the message-text input area.

# Button handler for sending a message
observeEvent(input$msg_button, {
  
  # only do anything if there's a message
  if (!(input$msg_text == "" | is.null(input$msg_text))) {
    
    msg_time <- Sys.time() %>%
      as.character()
    
    new_message <- dplyr::tibble(username = msg_username,
                                 message = input$msg_text,
                                 datetime = msg_time)
    
    RSQLite::dbAppendTable(con, "messages", new_message)
    
    messages_db$messages <- read_messages(con)
    
    # clear the message text
    shiny::updateTextInput(inputId = "msg_text",
                           value = "")
  }
})

The button handler for clearing the chat is even simpler: just overwrite the messages table in the database with our empty schema:

# Button handler for clearing the chat
observeEvent(input$msg_clearchat, {
  dplyr::copy_to(con, message_db_schema, name = "messages", overwrite = TRUE,  temporary = FALSE )
  messages_db <- reactiveValues(messages = read_messages(con))
})

The last major piece is to regularly poll the database for new messages. Here we’ll use a reactiveTimer() that fires once ever 1000 milliseconds and checks the database.

  # create a reactive timer to check the database regularly
  db_check_timer <- shiny::reactiveTimer(intervalMs = 1000)

  # check the table for updates each second
  observe({
    db_check_timer()
    messages_db$messages <- read_messages(con)
  })

And, for completeness, we have a simple renderTable() to render our output.

# Display our messages using a basic table output
output$messages_basic <- shiny::renderTable(messages_db$messages)

If we put this all together, we get a functional chat app!

A basic chat application.

It may not be pretty, but it works! If you run the app and load it in two different browser tabs, you’ll see messages from one appear in the other a second later.

See the full code here!

Step 3: Polish it with CSS and Javascript

Now that we have our basic app, let’s make it fancy by reorganizing our UI, styling it with CSS, and adding some Javascript. I’m just going to hit the highlights here, but you can see the whole app here on GitHub.

ui <- fluidPage(
  id = "chatbox-container",

  # Application title
  titlePanel("Simple SQL-Powered Chat in R Shiny!"),

  uiOutput("messages_fancy"),

  tags$div(textInput("msg_text", label = NULL),
           actionButton("msg_button", "Send", height="30px"),
           style="display:flex"),
  hr(),
  textInput("msg_username", "User Name:", value = "Chat Enthusiast"),
  actionButton("msg_clearchat", "Clear Chat Log")
)

render_msg_fancy <- function(messages, self_username) {
  div(id = "chat-container",
      class = "chat-container",
      messages %>%
        purrrlyr::by_row(~ div(class =  dplyr::if_else(
          .$username == self_username,
          "chat-message-left", "chat-message-right"),
          a(class = "username", .$username),
          div(class = "message", .$message),
          div(class = "datetime", .$datetime)
        ))
      %>% {.$.out}
  )
}

<div id="chat-container" class="chat-container">
  <div class="chat-message-right">
    <a class="username">Chat Enthusiast5917836</a>
    <div class="message">I sure do love to chat!</div>
    <div class="datetime">2022-10-17 10:19:24</div>
  </div>
</div>

.chat-container .chat-message-left {
  // format messages from the current user one way
}

.chat-container .chat-message-right {
  // format messages from other users differently
}

  tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "styling.css"))

jQuery(document).ready(function(){
  jQuery('#msg_text').keypress(function(evt){
    if (evt.keyCode == 13){
      // Enter, simulate clicking send
      jQuery('#msg_button').click();
    }
  });
})

The result!

Putting it all together, we now have a fancy chat application:

A fancy chat application written in R with Shiny!

You can try out a completely unmoderated (!! please be respectful !!) version here, which will remain up for an indeterminate amount of time.

Step 4: Next steps?

A chat app is fun, but at the core we’ve built an engine for centralized multi-user message exchanges, and the same logic could be applied to cases with real-world value. For example:

• Enabling real-time communication and collaboration between concurrent users in a Shiny analytics app;
• Enabling users to complete and submit applications, which could be reviewed and processed by users with administrative privileges, and sending the results back to applicants; or,
• Enabling multi-user discrete-time simulations where commands are sent to a central server for processing, and results are sent back to users.

As always, reach out if you have any questions or if you’d like to talk about how R and Shiny can help you achieve your goals.