Xin chào bạn
Bạn đã setup hết cho server trong part 1 ở bài viết Laravel react websocket này chưa, nếu chưa thì quay lại nhé
Hôm nay, mình xin chia sẻ đến bạn phần client, ở đây mình sẽ sử dụng react js để làm ví dụ.
Đầu tiên, mình sẽ tạo một project tên là ' client-app'
npx create-react-app client-app
Cài đặt một số thư viện liên quan:
cd client-app
npm i pusher-js laravel-echo
Tại file App.js
import React from 'react';
import Chat from "./Chat";
function App () {
return (
<div className="App">
<Chat/>
</div>
);
}
export default App;
Tại folder src tạo một component tên là 'Chat.js'
import React, {useEffect} from 'react';
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
const Chat = () => {
useEffect(() => {
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'khaitk',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
cluster : "mt1"
});
window.Echo.channel('chat-listen').subscribed(() => {
console.log('subscribe');
}).listen('ChatEvents', (e) => {
console.log(e);
})
}, []);
async function handleSendMessage(e) {
const data = {
"id": "1",
"channel_id": 1678337641615,
"message" : 'Hey girl'
}
e.preventDefault();
const socket = new WebSocket(`ws://localhost:6001/app/khaitk/chat`)
socket.onopen = (e) => {
socket.send(JSON.stringify({
...data
}))
console.log('open');
}
}
return (
<div>
<button onClick={(e) => handleSendMessage(e)}>Send</button>
</div>
);
}
export default Chat;
Thế là phía client đã setup xong, bắt đầu test kết quả thôi nào.
Let's go.....! Run lệnh : npm start
Khi màn hình đã hiển thị lên ấn phím f12 và click button Send để check kết quả dưới console nhé...
Yeah..... Thế là có chút gì đó realtime rùi phải không nào.
Hãy lên ý tưởng code một ứng dụng realtime sử dụng Laravel vs React để phát triển thôi.
Good luck....!
Lưu ý: Nếu có lỗi gì hãy cmt ở bài viết này.
