Closed brunocroh closed 2 months ago
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
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?
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.
Any question or problem, text me here or direct message on Twitter if you prefer.
I really appreciate your interest, thank you.
Sure! I will review the suggested code and come back here soon with my feedback.
Maybe this component can be useful to create the chat
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
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
Alright! I'll take a look at that here ps: I'm using Ubuntu 20.04
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
I'd love to chat on Discord @trappivan. Do you have a group? My ID is joao_paulo14
hey @brunocroh, I've made some progress here, I already have a functioning chat! :)
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?
Apologies if these are very basic questions, I only have experience working with backend most of the time.
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.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})
})
}
}
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
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.
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.