WebSocket integration in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a WebSocket connection in a Remix loader.

Remix

export const loader = async () => {
  const socket = new WebSocket([1]);
  return null;
};

Drag options to blanks, or click blank then click option'

A'file://localhost:8080'

B'http://localhost:8080'

C'ws://localhost:8080'

D'ftp://localhost:8080'

Attempts:

3 left

💡 Hint

Common Mistakes

Using http:// instead of ws://

Using unsupported protocols like ftp://

The WebSocket URL must start with ws:// or wss:// for secure connections.

2fill in blank

medium

Complete the code to send a message after the WebSocket connection opens.

Remix

const socket = new WebSocket('ws://localhost:8080');
socket.[1] = () => {
  socket.send('Hello Server');
};

Drag options to blanks, or click blank then click option'

Aonmessage

Bonopen

Conclose

Donerror

Attempts:

3 left

💡 Hint

Common Mistakes

Using onmessage instead of onopen

Trying to send messages before connection opens

The onopen event fires when the WebSocket connection is established and ready to send messages.

3fill in blank

hard

Fix the error in the WebSocket message event handler to log received data.

Remix

socket.onmessage = (event) => {
  console.log(event.[1]);
};

Drag options to blanks, or click blank then click option'

Acontent

Bmessage

Cpayload

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using event.message instead of event.data

Trying to access event.content or event.payload which do not exist

The event.data property contains the message sent from the server.

4fill in blank

hard

Fill both blanks to correctly close the WebSocket connection with a code and reason.

Remix

socket.close([1], [2]);

Drag options to blanks, or click blank then click option'

A1000

B'Normal closure'

C2000

D'Error occurred'

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid close codes like 2000

Passing non-string reasons

Code 1000 means normal closure, and the reason should be a string explaining it.

5fill in blank

hard

Fill all three blanks to create a WebSocket event listener that updates state on message.

Remix

import { useState, useEffect } from 'react';

export default function SocketComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:8080');
    socket.[1] = (event) => {
      setMessage(event.[2]);
    };
    return () => {
      socket.[3]();
    };
  }, []);

  return <div>Received: {message}</div>;
}

Drag options to blanks, or click blank then click option'

Aonmessage

Bdata

Cclose

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using send instead of close in cleanup

Accessing wrong event properties

The onmessage event listens for messages, event.data holds the message, and close() closes the socket on cleanup.