Devin Roché

room service chat room

Building an awesome chat room using room service

Today we are going to see how to build a chat room application (demo here) using room service, a new project that helps us enable real-time collaboration very easily.

What we use

  • Next.js
  • room service

Getting Started

First off, we are going to be building this using nextjs. To get started I used this starter from segment.

After you get that installed run

create-next-app chatroom && cd chatroom

Next, I did some basic cleanup, for this app we can delete the components folder and replace the our pages/index.js with the following

const Home = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>

    <div>
      <h1>hi</h1>
    </div>

    <style jsx>{`
      :global(body) {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir, Helvetica, sans-serif;
      }
    `}</style>
  </div>
)

Room Service

Now its time to enable room service. First, let’s install the necessary dependencies.

yarn add @roomservice/react @roomservice/browser

Then after that, we need to import them into our index file like this

import RoomService from "@roomservice/browser";
import { useRoomService } from "@roomservice/react";

And we need to initialize our client by doing the following

const client = new RoomService({
  authUrl: `https://api.roomservice.dev/public/proj_01E06NTXDESCZHZFXQHEEEHD4X`
});

And inside our Home component we need to connect to the room.

const [doc, setDoc] = useRoomService(client, "public", { chat: [] });

@roomservice/react allows us to use the useRoomService hook which helps make this that much easier! The useRoomService hook takes in two parameters and one optional parameter. The first being our client, second is our room and since our authUrl is public we need to use the public room. The final parameter is the initial state, since this is a chat app we need it to be an array.

Chat Input

Now that room service has been set up we need a way to send messages.

First lets initialize a hook that lets us handle the input. Hooks are super cool and if you want to learn more read about it here

const [value, handleChange] = React.useState("");
const handleInput = e => handleChange(e.target.value);

And add this HTML element to our return statement.

<div>
  <input
    type="text"
    name="chat"
    value={value}
    onChange={handleInput}
    placeholder="Chat here"
  />
  <button onClick={handleSubmit}>send</button>
</div>

This will update our state once the input fields change, however now we need to setup our handleSubmit function. Pushing to room service is fairly easy and straight forward.

const handleSubmit = () => {
  setDoc(prevDoc => prevDoc.chat.push({ text: value }));
  handleChange("");
};

Let’s focus on the first line, setDoc. We can modify our prevDoc which will update across all connected users. So in our case, we want to add to our chat array, so we do prevDoc.chat.push() to push to the end of our chat logs. After that, we reset our input value to an empty string.

This covers our input + upload to room service methods, next we will cover how to display these chat messages.

Above our input field html tags insert the following,

{doc.chat.map(el => <p>{el.text}</p>)}

So as you send in messages in the input field they should popup. If you open multiple windows you should be able to talk to yourself in this chat and it will update in real-time! This is a pretty basic setup chatroom with minimal styling. But feel free to expand on it!

Full code is available here


twitter |github