Skip to content
Insights

Real-time chat with Laravel, React & Node.js

real time

For the odisee MyCompass project that we recently finished we created a real-time chat. For this we used Laravel, React and Laravel echo server

As a user, you can chat directly with your coach, and in today's world such things need to be synchronized: if your coach is available, you want to be able to chat directly with him without delays. These conversations are confidential, so of course we also have to make sure that this happens in a safe and reliable way.

That's why we've built in several layers of security.

The user presses send and this sends a POST request with the content of the message to the API. The API processes this message, stores it in the database and puts in a queue a message with this content:

1
{"user-id": "42", "sender": "9", "content": "new-message"}.

If the queue is then processed by supervisor (process that is always kept running), a message is sent to the NodeJS server.
This in turn sends a push message trough a websocket to the browser of just this one user (42). When that has arrived, that user's browser asks the API to retrieve "new-message" messages in the conversation with user 9.

Because only a new-message is forwarded, and the content of that message itself has to be retrieved separately, all this remains secure. So the socket only gets information about new messages and the content of that message remains behind the regular API.

By using already existing packages, this is easy to implement. We did not have to write our own code for the NodeJS part, but were able to build completely on the existing package. For the part in Laravel we wrote a custom broadcast service and a custom notification class.

On the React side of the application we can use an already existing socket.io implementation, so also for this we could rely on an already existing code.

Want to know more about the project?

Would you like to read more about how we made this case a successful platform?

More insights

  • SymfonyCon 2024: code in harmony

    The 2024 edition took place in beautiful Vienna, so one of our experts went to check it out. A quick night train journey and some culture later, they were ready to focus on two days packed with Symfony. What insights did we bring back as souvenirs? You can read all about it in this report! 

    SymfonyCon 2024: code in harmony
  • Stepping into something new: Lore’s journey at Codana

    Lore Vanderlinden tells you all about her journey at Codana. She combines her technical background as a frontend developer with a passion for entrepreneurship in her role as project manager. Find out how by reading the blog!

    Stepping into something new: Lore’s journey at Codana
  • Qodo: an AI-copiloot for coding and testing

    We recently came across Qodo: a tool that uses Artificial Intelligence (AI) to help us code and test. In this blog post, you can read all about our initial experiences. 

    Qodo: an AI-copiloot for coding and testing
  • Lunar and Codana merge into one brand

    Lunar and Codana join hands and from today will continue together under the Codana brand name. This merger creates a digital product studio with more than 30 experts and a clear ambition: to become a leading player in the Belgian and European market.

    Lunar and Codana merge into one brand
  • From Intern to Digital Project Manager: My Journey at Codana

    Jelmer Krux tells you all about his journey at Codana. He joined our team fresh out of university and combines the roles of digital project manager and UX/UI Designer. How? Find out by reading his story in this blog! 

    From Intern to Digital Project Manager: My Journey at Codana
  • Cross-platform applicaties with React Native

    Never before has developing native mobile applications been as accessible as it is today. At Codana, we do this by using the React Native, an open-source framework developed by Meta.

    Cross-platform applicaties with React Native