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

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/realtime-notifications
感谢作者再附上 GitHub

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

本作品采用《CC 协议》，转载必须注明作者和本文链接

Make everything simple instead of making difficulties as simple as possible

本帖由 Summer 于 7年前加精

讨论数量: 11

Rekkles

课程读者 109 声望

7年前评论

Gundy

课程读者 316 声望

使用Pusher 跟websocket相比有啥优势

jcc123

课程读者 451 声望 / developer @ wintercms

@igo9go Pusher 是基于 websocket 的。是对 websocket 的封装，提供了简单的API

davidzhang

0 声望

workerman swoole 都挺好用的扩展性也很强。。

zionhuang

1 声望

博主泥嚎，我按照 5.4 的文档，做到把事件发送到 pusher上这一步了，但是我对npm 不了解，后面做不下去了，然后来看您这个例子。但是做到安装 yarn 和 yarn run dev 这一步还是报了很多错误
比如：

@ development /home/vagrant/Code/laravel-realtime-chat-demo

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: 1: cross-env: not found

npm ERR! file sh

pm ERR! code ELIFECYCLE

npm ERR! errno ENOENT

npm ERR! syscall spawn

npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

npm ERR! spawn ENOENT

npm ERR!

npm ERR! Failed at the @ development script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /home/vagrant/.npm/_logs/2017-08-27T05_09_57_437Z-debug.log

vagrant@homestead:~/Code/laravel-realtime-chat-demo$ ls

直接导致的就是我好像不能加载到js和css文件
我环境是是win10+vagrant+homestead

@zionhuang
没有安装 cross-env 安装 cross-env

yarn add cross-env

或者

npm install cross-env

我之前google查到这个answer 也试了一下
报了一个警告

warning fsevents@1.1.2: The platform "linux" is incompatible with this module.

info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.

和一个错误

error
An unexpected error occurred: "EPROTO: protocol error, symlink '../acorn/bin/acorn'- >'/home/vagrant/Code/chatdemo/node
_modules/acorn-dynamic-import/node_modules/.bin/acorn'".

info If you think this is a bug, please open a bug report with the information provided in "/home/vagrant/Code/chatdemo/yarn-error.log".

info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

事实上我在node_modules下是看到 cross-env 这个组件了的，只是感觉好像是 yarn run dev 或 npm run dev 找不到它，感觉很多坑要趟啊 :flushed: :flushed:，是因为环境或者系统的问题吗？官方还推荐homestead，怎么会这么多麻烦~~

颠倒的玉石

课程读者 166 声望 / 技术小垃圾 @ 山西证券

file 我这里加了，但是

file 仍然在报错

6年前评论

@scenery 500是服务器内部错误，看下报错信息

@jcc123 和环境关系不大吧，我在本地windows下运行的么。

file 报错原因谷歌也老是没配置config下的。

这个值没设置错吧，是设置成你自己申请时的值。
file

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录