How to show Chat messages from Socket

[ls30378]

Hi, I'm subscribing to a socket server, but I can't figure out how to show the messages that I'm receiving in real time. I tried to use useState to add messages to array and map them, but it doesn't work. Any idea how to render real time messages that I'm receiving?

[sergiodxa]

Any approach you would have used in another React app regardless of Remix should work.

Setting the list to a state is the simples, and unless you’re not loading JS on the browser it should work without any issue in Remix.

[ls30378]

Here is my Socket file:

import SockJS from "sockjs-client";
import { Stomp } from "@stomp/stompjs";

const chatSocket = process.env.REACT_APP_CHATSOCKET;
class WebSocket {
  constructor() {
    // this.socket = sockJs;
    this.stompClient = Stomp.over(function () {
      return new SockJS(chatSocket)
    });
  }

  connect(studioCode) {
    this.stompClient.connect({}, (frame) => {
      this.subscribe(studioCode);
      this.stompClient.send("hiddenurl", {}, studioCode);
    });
  }

  subscribe(studioCode) {
    this.stompClient.subscribe(`hiddenurl`, (message) => {
      let jsonData = JSON.parse(message.body);
      if (!Object.keys(jsonData).length) return;
      if (jsonData.messageType === 'chat') {
        console.log('chat', jsonData)
      }
      if (jsonData.messageType === 'join') {
        console.log('onlineUsers', jsonData)
      }
      console.log(message)
      console.log('Test test test')
    })
  }
  disconnect() {
    this.stompClient.disconnect();
  }
}

export default new WebSocket();

and when I import it to any remix file:

import webSocket from '~/utils/Socket

the js stops working

[ls30378]

Yep, by importing webSocket file at Remix, it stops loading js, I don't know how to fix it

[ls30378]

I tried renaming Socket.client.js still the same issue