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

• chat-app-nextjs-laravel-ably

  1 19 0.0 PHP

  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

  1 48 1.5 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

  surveyjs.io featured

  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

  445 104,201 8.4 JavaScript

  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

  279 5,749 2.3

  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

  1,711 222,862 9.9 JavaScript

  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

  2,061 121,256 10.0 JavaScript

  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

  362 76,981 8.9 PHP

  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.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• create-react-app

  580 101,979 1.5 JavaScript

  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:

Suggest a related project