一个基于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

file

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

PUSHER_APP_ID=
PUSHER_KEY=
PUSHER_SECRET=

打开网址 http://yourdomain.app

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

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

发现出现一个错误

file

进入 bootstrap,js 添加

import Pusher from 'pusher-js'

运行


yarn run dev

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

file

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

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

});

运行


yarn run dev

错误消失

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

发送消息一直报这个错
file

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

进入 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!

file

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

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

你可能感兴趣的文章

载入中...
Planets
jc91715 jc91715

14 声望