Building a realtime chat app with React, Laravel, and WebSockets

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • chat-app-nextjs-laravel-ably

    A Real time chat app made in Next.js, Laravel and Ably.

    The entire code for the project is available in this GitHub repo.

  • ably-php

    PHP client library SDK for Ably realtime messaging service

    Next, since you want to broadcast your events using Ably, install the Ably PHP SDK by running the following command in your terminal:

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • axios

    Promise based HTTP client for the browser and node.js

    - axios: This package allows you to make HTTP requests in your client-side application.

  • postman-app-support

    Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

    Finally, to check if the code is working correctly so far, try sending a POST request to the localhost:8000/api/new-message endpoint using Postman or any other tool and sending the user and message as a payload. You should receive an ok response. If you do not receive an ok response, please carefully review the steps of the tutorial to ensure that you have followed them correctly.

  • React

    The library for web and native user interfaces.

    React.js is an open-source JavaScript library that is used for building reactive user interfaces and is often used for building client side rendered single-page applications. It is very easy to integrate it with TypeScript. Based on this tutorial, you can also perform the same set of actions in Next.js, which is a meta framework for developing universal React.js applications that are both client and server side rendered.

  • Next.js

    The React Framework

    React.js is an open-source JavaScript library that is used for building reactive user interfaces and is often used for building client side rendered single-page applications. It is very easy to integrate it with TypeScript. Based on this tutorial, you can also perform the same set of actions in Next.js, which is a meta framework for developing universal React.js applications that are both client and server side rendered.

  • Laravel

    Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation for your next big idea — freeing you to create without sweating the small things.

    Laravel is a PHP-based web application framework with expressive, elegant syntax. The web development community loves Laravel because it provides an amazing developer experience and supports advanced concepts, like queues, dependency injection, unit testing, and integration testing. Laravel is a great choice for building realtime apps, and it already comes with support for Ably to "broadcast" your server-side Laravel events over a WebSocket connection.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • create-react-app

    Set up a modern web app by running one command.

    Since your current terminal window is serving the Laravel project, open another terminal window and execute the following command from the project’s root directory (chat-app-react-laravel-ably) to create a React.js project using the famous create-react-app:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts