Real Time with Remix

The web platform offers standards and capabilities to send data in real time. With real-time technologies, we can implement chat features and multiplayer UIs for real-time collaboration and interactions. We have seen several apps with real-time features grow in popularity and redefine their product categories, such as Google Docs and Figma. In this chapter, we will learn about real-time UIs with Remix.

This chapter is split into two sections:

• Working with real-time technologies
• Building real-time UIs with Remix

First, we will compare real-time technologies and discuss the requirements for hosting providers and server environments. Next, we will outline implementations with Remix. Finally, we will implement a simple real-time UI in BeeRich by utilizing Server-Sent Events (SSE).

After reading this chapter, you will understand the requirements for working with real-time technologies in Remix. You will also be able to name the differences between...

Technical requirements

You can find the code for this chapter here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/14-real-time-with-remix. No additional setup is required for this chapter.

Working with real-time technologies

The web platform offers different protocols and standards for real-time communication. In this section, we will review different technologies and techniques and discuss the requirements for utilizing them with Remix. We will discuss polling, learn about SSE, and review the WebSocket API. First, let’s have a look at polling techniques.

Understanding polling

Polling is a client-pull technique in which the client requests data from the server. Instead of relying on a server to push updates, polling utilizes intervals to check for the latest data from the server.

We can differentiate between short and long polling. Short polling sends requests in time-based intervals to the server. The server responds immediately, either with new data or indicating nothing has changed. With long polling, the server only responds once new data is available, keeping the request unanswered until then. The client sends a new request once the server responds...

Building real-time UIs with Remix

BeeRich uses Remix’s Express.js adapter and runs on a long-running server. As such, BeeRich can take advantage of polling, SSE, and the WebSocket API to implement real-time features.

Short polling is simple to set up. We can implement short polling in Remix by using Remix’s useRevalidator hook:

import { useEffect } from 'react';import { useRevalidator } from '@remix-run/react';
function Component() {
  const { revalidate } = useRevalidator();
  useEffect(() => {
    const interval = setInterval(revalidate, 4000);
    return () => {
      clearInterval(interval);
    };
  }, [revalidate]);
}

The revalidate function of the useRevalidator hook triggers a loader revalidation. This allows us to refetch all loader data, similar to how Remix refetches all loader data after executing an action...

Summary

In this chapter, you learned about real-time technologies and techniques and how to use them in Remix.

First, we discussed polling, SSE, and the WebSocket API and compared their advantages and disadvantages. Polling is the easiest to set up. A simple polling implementation does not require changes on the server. SSE provides a one-way communication line using the HTTP protocol, while WebSocket connections use TCP and are bi-directional.

Second, you learned about server requirements for SSE and WebSocket. You now understand that SSE requires support for streaming responses, while WebSocket servers can only run on long-running servers.

Finally, we implemented a real-time UI in BeeRich by utilizing SEE. We implemented a new endpoint and associated React hook using the EventSource API. Since Remix’s loader functions return HTTP Response objects, we can implement the server-sent event endpoint in Remix using a resource route.

In the next chapter, we will learn...

Further reading

You can read more about SSE and WebSocket in the MDN Web Docs:

• https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events
• https://developer.mozilla.org/en-US/docs/Web/API/Websockets_API

Here is a great talk from Remix Conf 2023 about SSE by Alex Anderson: https://www.youtube.com/watch?v=cAYHw_dP-Lc.

Sergio Xalambrí wrote an article on how to set up Remix with socket.io to create a WebSocket connection: https://sergiodxa.com/articles/use-remix-with-socket-io.