close

构建 Real-Time 聊天应用程序 Laravel WebSocket

聊天 real-time 应用程序是一个很好的例子，展示了如何 WebSocket 彻底改变 real-time 网络上的交互式通信。 在本文中，我们将逐步构建一个简单的聊天应用程序， Laravel 并 WebSocket 使用它进行集成 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

运行 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  
    }  
});

结论

通过完成本教程，您已经成功使用 in构建了一个 real-time 聊天应用程序 。 用户可以立即发送和接收消息，并且您已经见证了如何 提供响应式和交互式的通信体验。 WebSocket Laravel WebSocket