Architecture of the realtime chat app

React.js

Laravel

Ably

Chat app workflow architectureSetting up your Ably account
Private key from the Ably dashboardUpdating Ably settingsSetting up the environment

Prerequisites

Setting Up the Project

mkdir chat-app-react-laravel-ably

Setting up the backend

composer create-project laravel/laravel backend

cd backend
php artisan serve

Laravel app home pageSetting up broadcasting

'providers' => [
...
App\Providers\BroadcastServiceProvider::class,
...
]

composer require ably/ably-php

ABLY_KEY=your-ably-key

BROADCAST_DRIVER=ably

Broadcasting events in Laravel with WebSockets

php artisan make:event MessageEvent

<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Str;
// 1
class MessageEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
private $user, $message;
// 2
public function __construct($user, $message)
{
$this->user = $user;
$this->message = $message;
}
// 3
public function broadcastWith()
{
return [
'id' => Str::orderedUuid(),
'user' => $this->user,
'message' => $this->message,
'createdAt' => now()->toDateTimeString(),
];
}
// 4
public function broadcastAs()
{
return 'message.new';
}
// 5
public function broadcastOn()
{
return new Channel('public.room');
}
}

Receiving requests from the React.js frontend

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Events\MessageEvent;
// 1
Route::post('new-message', function (Request $request) {
// 2
event(new MessageEvent($request->user, $request->message));
return 'ok';
});

Setting up the React.js frontend

npx create-react-app frontend

cd frontend
npm start

React.js website home pageInstalling frontend packages

npm install axios laravel-echo pusher-js

REACT_APP_MIX_ABLY_PUBLIC_KEY=<your-ably-public-key>
REACT_APP_API_BASE_URL=http://localhost:8000/api

Setting up Laravel Echo

// 1
import PublicMessagesPage from './components/PublicMessagesPage';
// 2
export default function App() {
return <PublicMessagesPage />;
}

Building the frontend UI

Building the public chat home page

// 1
import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
import Messagebox from './Messagebox';
// 2
export default function PublicMessagesPage() {
// 3
const [user, setUser] = useState('');
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([]);
async function handleSendMessage(e) {
// TODO
}
// 4
return (
<div>
<div>
<div>
<h1>Public Space</h1>
<p>Post your random thoughts for the world to see</p>
</div>
<div>
{messages.map((message) => (
<Messagebox key={message.id} message={message} />
))}
</div>
<div>
<form onSubmit={(e) => handleSendMessage(e)}>
<input
type="text"
placeholder="Set your username"
value={user}
onChange={(e) => setUser(e.target.value)}
required
/>
<div>
<input
type="text"
placeholder="Type your message..."
value={message}
onChange={(e) => setMessage(e.target.value)}
required
/>
<button onClick={(e) => handleSendMessage(e)}>Send</button>
</div>
</form>
</div>
</div>
</div>
);
}

Creating the message box component

// 1
export default function Messagebox({ message }) {
const formatDate = (value) => {
if (!value) return '';
return new Date(value).toLocalTimeString();
};
// 2
return (
<div>
<div>
<p>
<b>{message.user}</b>
</p>
<p>{message.message}</p>
<p>{formatDate(message.createdAt)}</p>
</div>
</div>
);
}

npm start

Chat app home pageSending messages

async handleSendMessage(e) {
// 1
e.preventDefault();
// 2
if (!user) {
alert('Please add your username');
return;
}
// 3
if (!message) {
alert('Please add a message');
return;
}
try {
// 4
await Axios.post('/new-message', {
user: user,
message: message,
});
} catch (error) {
console.error(error);
}
}

Listening to events

// 1
useEffect(() => {
// 2
Axios.defaults.baseURL = process.env.REACT_APP_API_BASE_URL;
// 3
const echo = new Echo({
broadcaster: 'pusher',
key: process.env.REACT_APP_MIX_ABLY_PUBLIC_KEY,
wsHost: 'realtime-pusher.ably.io',
wsPort: 443,
disableStats: true,
encrypted: true,
});
// 4
echo
.channel('public.room')
.subscribed(() => {
console.log('You are subscribed');
})
// 5
.listen('.message.new', (data) => {
// 6
setMessages((oldMessages) => [...oldMessages, data]);
setMessage('');
});
}, []);

Sending messages in chat app‌‌Testing the app
Message sending between two usersConclusion