一个基于 Laravel5.4+Vue+Pusher 实时聊天的小 demo

一个基于Laravel+Vue+Pusher实时聊天的小demo

大神可以飘过了~~~

GitHub 直达

https://github.com/jplhomer/laravel-realtime-chat-demo

视频直达(应该需要翻墙吧，总共分5部分，幸运的是每一部分对应的有相应git代码，这是极好的)

https://jplhomer.org/2017/01/building-realtime-chat-app-laravel-5-4-vuejs/

git

git clone https://github.com/jplhomer/laravel-realtime-chat-demo project

composer 安装

cd project 

composer install

yarn 或 npm 安装

yarn 

npm

yarn 或者 npm 打包

yarn run dev

npm run dev

配置数据库及 key

cp .env.example .env

art key:generate

迁移

art migtate

注册pusher 直达 https://pusher.com/ 可以用 GitHub 和 Google登录,注册后创建一个app

进入.env 配置pusher 填写你申请的 app_id key 和secrey

PUSHER_APP_ID=
PUSHER_KEY=
PUSHER_SECRET=

打开网址 http://yourdomain.app

随便注册一个账号登录进去

登陆成功后 进入聊天页面 http://yourdomain.app/chat

发现出现一个错误

进入 bootstrap,js 添加

import Pusher from 'pusher-js'

运行

yarn run dev

刷新 出现这个错误 应该是客户端没有配置pusher的key

去 填写你申请的key bootstrap.js配置

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-key',
    cluster: '这里一定要和你申请的填写的一样',
    encrypted: true

});

运行

yarn run dev

错误消失

测试 再随便注册一个账号登录。(是为了测试实时聊天)

发送消息一直报这个错

找了好久发现服务端少了一个配置

进入 config/broadcasting.php

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_KEY'),
            'secret' => env('PUSHER_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => '你申请时自己命名的 和客户端的对应',
                'encrypted' => true
            ],
        ],

再进行测试 ok！

总结： 刚开始配置时对 pusher 还不太理解走了好多弯路。看了这篇简单的文章后豁然开朗https://pusher.com/tutorials/...
感谢作者 再附上 GitHub

https://github.com/jplhomer/laravel-realtime-chat-demo