close

สร้าง Real-Time แอปพลิเคชันแชทด้วย Laravel WebSocket

แอ real-time ปพลิเคชันแชทเป็นตัวอย่างที่ยอดเยี่ยมของ WebSocket การปฏิวัติ real-time การสื่อสารแบบโต้ตอบบนเว็บ ในบทความนี้ เราจะอธิบายเกี่ยวกับการสร้างแอปพลิเคชันแชทอย่างง่ายโดยใช้ Laravel และการผสานรวม WebSocket โดยใช้ the laravel-websockets package เพื่อมอบประสบการณ์การสื่อสารที่ตอบสนองและโต้ตอบแก่ผู้ใช้

วัตถุประสงค์ของการสมัคร

เราจะสร้าง real-time แอปพลิเคชันแชทที่มีคุณสมบัติดังต่อไปนี้:

ส่งและรับข้อความทันที: ผู้ใช้สามารถส่งและรับข้อความได้ทันทีโดยไม่จำเป็นต้องรีเฟรชหน้านี้

รายชื่อผู้ใช้ออนไลน์: แอปพลิเคชันจะแสดงรายชื่อผู้ใช้ออนไลน์และสถานะการแชทของพวกเขา

ส่งรูปภาพและไฟล์: ผู้ใช้สามารถแชร์รูปภาพและไฟล์ภายในแชทได้

เริ่มต้นใช้งานการติดตั้งและการกำหนดค่า

ในการเริ่มต้น เราจำเป็นต้องติดตั้ง และ laravel-websockets package กำหนดค่าเพื่อรวมเข้า WebSocket กับ Laravel ทำตามขั้นตอนเหล่านี้:

ติดตั้ง laravel-websockets package: เริ่มต้นด้วยการติดตั้ง package โดยใช้ Composer.

composer require pusher/pusher-php-server

เผยแพร่ไฟล์การกำหนดค่า: หลังจากการติดตั้ง ให้เผยแพร่ไฟล์การกำหนดค่าเพื่อกำหนดการตั้งค่าเอง

 

php artisan vendor:publish --tag=websockets-config

Run migration: สร้างตารางฐานข้อมูลที่จำเป็นสำหรับ WebSocket.

php artisan migrate

เริ่ม WebSocket เซิร์ฟเวอร์: เปิด WebSocket เซิร์ฟเวอร์เพื่อจัดการ real-time การเชื่อมต่อ 

php artisan websockets:serve

สร้างส่วนติดต่อผู้ใช้

เราจะสร้างอินเทอร์เฟซผู้ใช้อย่างง่ายโดยใช้ HTML, CSS และ JavaScript เพื่อแสดงรายการข้อความ กล่องป้อนข้อมูล และรายชื่อผู้ใช้ออนไลน์ 

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>

การบูรณาการ WebSocket และ Broadcasting

เราจะใช้ Laravel Broadcasting เพื่อรวมเข้า WebSocket กับแอปพลิเคชัน

ติดตั้ง Pusher: ติดตั้ง pusher/pusher-php-server package เพื่อใช้ Pusher เป็น Broadcasting ไดรเวอร์ 

composer require pusher/pusher-php-server

กำหนดค่า Broadcasting: ใน config/broadcasting.php ไฟล์ กำหนดค่าไดรเวอร์และระบุ Pusher ข้อมูลประจำตัว ของคุณ 

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],

สร้างกิจกรรมและออกอากาศ: สร้างกิจกรรม ChatMessageSent และออกอากาศเมื่อผู้ใช้ส่งข้อความ 

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}

สคริปต์ JavaScript: ใช้ JavaScript เพื่อฟังเหตุการณ์จากเซิร์ฟเวอร์และอัปเดตอินเทอร์เฟซผู้ใช้ 

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});

บทสรุป

เมื่อจบบทช่วยสอนนี้ แสดงว่าคุณสร้างแอปพลิเคชันแชทสำเร็จ โดย real-time ใช้ WebSocket ใน Laravel ผู้ใช้สามารถส่งและรับข้อความได้ทันที และคุณคงเห็นแล้วว่า WebSocket มอบประสบการณ์การสื่อสารที่ตอบสนองและโต้ตอบ ได้อย่างไร