mgsmus Bu şekilde Chat.js isimli dosyamda bağlantı kurdum. Henüz bir mesajlaşma sağlayamıyorum.
import React, { useState, useEffect } from 'react';
import Pusher from 'pusher-js';
import axios from 'axios';
import ChatInput from "@/Components/Chat/ChatInput";
import ChatMessages from "@/Components/Chat/ChatMessages";
import ChatSidebar from "@/Components/Chat/ChatSidebar";
import ChatUserInfoHeader from "@/Components/Chat/ChatUserInfoHeader";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
export default function Chat(props) {
const { auth, errors, receiver } = props;
const [messages, setMessages] = useState([]);
const [selectedUser, setSelectedUser] = useState(null);
useEffect(() => {
// Pusher ile bağlantıyı kur
const pusher = new Pusher('a15eee403944ea3dd74a', {
cluster: 'eu',
encrypted: true,
});
// Pusher üzerindeki belirli bir kanalı dinle
const channel = pusher.subscribe('chat-channel');
// Yeni mesajları dinle
channel.bind('new-message', (data) => {
setMessages([...messages, data.message]);
});
// Temizlik için bileşenin çözüldüğünde Pusher bağlantısını kapat
return () => {
pusher.unsubscribe('chat-channel');
pusher.disconnect();
};
}, [messages]);
const handleSendMessage = (message) => {
// Mesajı sunucuya gönder
axios.post('/api/send-message', { receiverId: receiver.id, message })
.then(response => {
// Mesajı yerel state'e ekle
setMessages([...messages, response.data.message]);
})
.catch(error => {
console.error('Error sending message:', error);
});
};
const handleUserSelect = (user) => {
setSelectedUser(user);
};
return (
<AuthenticatedLayout auth={props.auth} errors={props.errors}>
<div className="">
<div className="messanger h-screen overflow-hidden p-4">
<div className="flex">
<div className="basis-2/6 border-r border-slate-100 bg-white pt-3">
<ChatSidebar onSelectUser={handleUserSelect} />
</div>
<div className="basis-4/6">
{selectedUser ? (
<>
<ChatUserInfoHeader
receiver={selectedUser}
/>
<div className="messanger mt-4">
<div className="px-4">
<ChatMessages
messages={messages}
auth_id={props.auth?.user?.id}
/>
</div>
<ChatInput
receiver={selectedUser}
onSendMessage={handleSendMessage}
/>
</div>
</>
) : (
<div className="flex justify-center items-center bg-slate-100 h-screen">
<p className="font-bold text-3xl text-gray-500">
Please select a User to start chatting...
</p>
</div>
)}
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}