xparthxvorax / larachat
基于实时套接字的Laravel聊天应用程序
Requires
- php: >=7.0
- predis/predis: 1.1
This package is auto-updated.
Last update: 2024-09-22 01:47:13 UTC
README
先决条件
您必须在您的计算机上安装PHP > 7.0,Laravel > 5.0,Web服务器(Apache/Ngnix),Node.js和npm请按照以下步骤将软件包安装到新的或现有的Laravel网站:
-
运行
php artisan make:auth
以生成基本的登录和注册视图和路由 -
使用
composer require xparthxvorax/larachat
命令安装软件包 -
运行
php artisan larachat:install
命令 -
设置前端
- 运行
npm install -g laravel-echo-server
命令 - 将以下依赖项添加到
package.json
文件中
"dependencies": { "laravel-echo": "^1.4.1", "socket.io-client": "^2.1.1" }
- 运行
npm install
命令 - 将以下行添加到
resources/js/bootstrap.js
import Echo from "laravel-echo" window.io = require('socket.io-client'); window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001' });
- 将以下行添加到
resources/js/app.js
Vue.component('larachat-component', require('./components/LarachatComponent.vue'));
- 要显示用户列表,请将
<larachat-component></larachat-component>
添加到resources/views/home.blade.php
中,如下所示:
<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Dashboard</div> <div class="card-body"> @if (session('status')) <div class="alert alert-success" role="alert"> {{ session('status') }} </div> @endif You are logged in! </div> <larachat-component></larachat-component> </div> </div> </div> </div>
或者,您可以将
<larachat-component></larachat-component>
放置在网站设计布局最适合的任何视图中。您还可以根据需要修改Vue组件的默认HTML和CSS到resources\js\components\LarachatComponent.vue
。 - 运行
-
设置
BROADCAST_DRIVER=redis
并添加LARAVEL_ECHO_SERVER_AUTH_HOST=your-site-url
-
运行
npm run dev
命令编译前端资源 -
运行
laravel-echo-server start
启动套接字服务器。保持命令运行或使用supervisor来运行(https://laravel.net.cn/docs/master/queues#supervisor-configuration)
演示视频: https://www.youtube.com/watch?v=GKeMBxQWOyw
在线演示网站: http://52.66.210.249/larachat/public/
-
账户1
密码:secret
-
账户2
用户名:pfannerstill.eloise@example.org
密码:secret
-
账户3
用户名:tremaine.kiehn@example.com
密码:secret