Create a simple chat

[brunocroh]

Sometimes is important write something to solve a miss understanding of something, or to share some link like twitter/linkedin/github.

So will be good if we have a chat using WebRTC.

[joaoreider]

I would like to implement this feature. I am relatively new to the open source. Could you help me create an action plan to implement this feature? I have already started studying webRTC

[brunocroh]

I would like to implement this feature. I am relatively new to the open source. Could you help me create an action plan to implement this feature? I have already started studying webRTC

Sure!

The first thing to do, you've already done, is to show interest and say that you're working on it. Here we can discuss what the technological approach will be to create this feature.

Looking at the project code, do you have an idea how to do this?

[brunocroh]

You need understand the code bellow to start to working on it

https://github.com/brunocroh/bolhadev.chat/blob/main/apps/web/app/room/%5Bslug%5D/page.tsx

And if you never create a real-time chat before, probably you will see a lot of ways to do it. But for our project the right one, is to build a real-time chat with WebRTC.

We already have WebRTC implemented on the project using the simple-peer library to make video/audio chat works.

So knowing it, what you need to do is create a real-time text chat through WebRTC with simple-peer, using the connection that we already have.

[brunocroh]

Any question or problem, text me here or direct message on Twitter if you prefer.

I really appreciate your interest, thank you.

[joaoreider]

Sure! I will review the suggested code and come back here soon with my feedback.

[birobirobiro]

Maybe this component can be useful to create the chat

https://github.com/jakobhoeg/shadcn-chat

[joaoreider]

How do you test it locally? When I try to enter the room queue, I receive the error: SyntaxError: Failed to construct 'WebSocket': The URL 'undefined' is invalid. *My .env file is the same as .env.example

[brunocroh]

Your system is not loading the envs, I use a plugin here on my zsh, to do it.

Try export envs before run the project, or just check if it is really loaded.

I will create a new issue, to check these envs on windows

[joaoreider]

Alright! I'll take a look at that here ps: I'm using Ubuntu 20.04

[trappivan]

Hey @joaoreider , how far are you into this feature ? Im currently finishing implementing the basics communication and the chat component, still got to refactor some css and make it look god.

Do you want to connect on discord so we can discuss ways to do it ? My discord is trappivan

[joaoreider]

I'd love to chat on Discord @trappivan. Do you have a group? My ID is joao_paulo14

[joaoreider]

hey @brunocroh, I've made some progress here, I already have a functioning chat! :)

• I would like to discuss updating the state of the chat messages. I have done this by adding a useEffect that listens to the "data" event and updates:

  useEffect(() => {
  peerRef.current?.on('data', (data) => {
  setMessages([...messages, JSON.parse(data)]);
  });
  }, [messages]);

I believe there is room for improvement in this, as the first message does not update for the second peer until they type something, then everything flows normally. Should I use the websocket instance (useWebSocket) to listen to this event?

Some other questions and considerations:

• I would like to identify the message from the user who typed it. It is possible to display it by uuid, but the experience is not as smooth. Do you have any suggestions?
• I want to add a chat icon when there are no messages and an icon on the button to send. What do you think? Any recommendations for an icon library?
• Is there a Discord channel available?

Apologies if these are very basic questions, I only have experience working with backend most of the time.

[brunocroh]

Awesome mate, I really appreciate your contribution.

useEffect can be avoided here, you can subscribe to data event from peer inside WebSocket hook, like the other events are sub.

https://github.com/brunocroh/bolhadev.chat/blob/a5e8eda4bb764c8190ed1939b4e7d2d4e46576f9/apps/web/app/room/%5Bslug%5D/page.tsx#L86-L105

Identify sender

uuid is not necessary here, something like that can works fine

type Message = {
  sender: 'me' | 'other'
  content: string
}

const component = () => {
  const [messages, setMessage] = useState<Message[]>([])

  peer.on('data', (message) => {
    setMessage((_message) => {
      return _messages.concat({sender: 'other', content: _message})
    })
  })

  const onSendMessage = () => {
    // send message to other user

    setMessage((_message) => {
      return _messages.concat({sender: 'me', content: _message})
    })
  }
}

Icons

We already have lucide-icons installed on project, search inside of the project how it used, and feel free to pick any icon here to used it as jsx

PR

As you already have something functional, please create a PR, so I can see your code, and it will be easier to help you.

---

I sent an invitation to you on discord.