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

lanffy 发布于2019-06-27 16:54 / 3560人阅读

摘要：我厚着脸皮向发出了呼唤。。向超神简单的描述一番后。底层的东西还是朦朦胧胧的。但对于刚入门的新手来说，这是比较有用的。

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

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

当然也可以独立出来,只需要把驱动换成 Redis 就可以了

GitHub 直达

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

git

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

由于 GitHub 是基于 Pusher 的所以安装之前需要一些修改

进入 composion.json

去掉 "pusher/pusher-php-server": "^2.6"

增加 "predis/predis": "^1.1"

然后 composer 安装

cd project 

composer install

配置数据库及 key

cp .env.example .env

art key:generate

配置驱动

BROADCAST_DRIVER=redis

迁移

art migtate

然后进入 package.json

去掉 "pusher-js": "^4.0.0"

yarn 或 npm 安装

yarn 

npm

yarn 或者 npm 打包

yarn run dev

npm run dev

由于 Redis 使用的 Socket.IO 因此需要配置客户端 Socket.io 和服务员端 Socket.io

客户端 Socket.IO

进入 bootstrap.js

window.Echo = new Echo({
    broadcaster: "socket.io",
    host: "http://yourdomain.app:6001"
});

进入 app.blade.php head 中增加

服务端 laravel-echo-server

yarn add laravel-echo-server

或者 npm install laravel-echo-server

安装完成后生成服务端的配置文件启动后会读取这个配置文件

laravel-echo-server init

我的配置文件

{
    "authHost": "http://delo.app",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": false,
    "host": "delo.app",
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": ""
}

如果不运行 laravel-echo-server init 的话可以新建一个 laravel-echo-server.json 的文件复制上面的内容进去修改成你的主机就可以了
最后在 app.blade.php 中引入

启动

            
            laravel-echo-server start

ok 最后注册两个账号开始实验吧

你可能发现在一个浏览器每刷新一次后，另一个浏览器的在线数都会加 1 ，但是用 pusher 的话就不会出现这个问题（这是为什么？）。奇怪

如何解决呢其中走了好多弯路

刚开始的时候想的是数组去重的方法

在 app.js 中你会发现

Echo.join("chatroom")
            .here((users) => {
                this.usersInRoom = users;
            })
            .joining((user) => {
                this.usersInRoom.push(user);
            })
            .leaving((user) => {
                this.usersInRoom = this.usersInRoom.filter(u => u != user)
            })
            .listen("MessagePosted", (e) => {
                this.messages.push({
                    message: e.message.message,
                    user: e.user
                });
            });

本来想着百度一个数组的去重方法像这样的

Array.prototype.unique = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,"你好",112,112,34,"你好","str","str1"];
alert(arr.unique());

但经过 leo 的指点有个插件非常好用 lodash 安装后

只需这样

this.usersInRoom=_.uniq(this.usersInRoom）

接下来又是一个奇怪的事情 console.log(this.usersInRoom) 发现新增加的竟然是一个对象。数组去重就不行了。

我厚着脸皮向 overtrue 发出了呼唤。。

向超神简单的描述一番后。超神说 "返回的应该是对象，可以考虑用 ID" 拨云见日

this.usersRoom=users

users 既然是对象的话，让它返回 id 就可以了

users 是在哪里返回的呢，在BroadcastServiceProvider发现

 require base_path("routes/channels.php");

进入 routes/channels.php

Broadcast::channel("chatroom", function ($user) {
    return $user;
});

修改为

Broadcast::channel("chatroom", function ($user) {
        return $user->id;
    });

ok 柳暗花明！

总结：虽然写了基于 pusher 和 redis 广播的两个小 demo，但还是游离于配置层面。底层的东西还是朦朦胧胧的。但对于刚入门的新手来说，这是比较有用的。因为我比较喜欢，先把东西呈现出来，然后再去深入。

一个 demo 爱好者

云服务器 idc机房托管环信语音聊天vue demo vue 集成webrtc实时音视频demo 即时聊天demo webrtc聊天demo

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/23168.html

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

摘要：我厚着脸皮向发出了呼唤。。向超神简单的描述一番后。底层的东西还是朦朦胧胧的。但对于刚入门的新手来说，这是比较有用的。一个基于Laravel+Vue+Redis 实时聊天的小demo 这篇是基于一个基于 Laravel5.4+Vue+Pusher 实时聊天的小 demo 当然也可以独立出来,只需要把驱动换成 Redis 就可以了 GitHub 直达 https://github.com...

chengjianhua 2019-08-20 17:40 评论0 收藏0
全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

摘要：经过琢磨，其实是要考虑安全性的。具体在以下几个方面跨域连接协议升级前握手拦截器消息信道拦截器对于跨域问题，我们可以通过方法来设置可连接的域名，防止跨站连接。前言大学的学习时光临近尾声，感叹时光匆匆，三年一晃而过。同学们都忙着找工作，我也在这里抛一份简历吧，欢迎各位老板和猎手诚邀。我们进入正题。直播行业是当前火热的行业，谁都想从中分得一杯羹，直播养活了一大批人，一个平台主播粗略估计就...

e10101 2019-07-25 13:57 评论0 收藏0
全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

摘要：经过琢磨，其实是要考虑安全性的。具体在以下几个方面跨域连接协议升级前握手拦截器消息信道拦截器对于跨域问题，我们可以通过方法来设置可连接的域名，防止跨站连接。前言大学的学习时光临近尾声，感叹时光匆匆，三年一晃而过。同学们都忙着找工作，我也在这里抛一份简历吧，欢迎各位老板和猎手诚邀。我们进入正题。直播行业是当前火热的行业，谁都想从中分得一杯羹，直播养活了一大批人，一个平台主播粗略估计就...

JerryZou 2019-07-16 16:18 评论0 收藏0
造个轮子，基于 Laravel5.4 的下一代 PHP 开发框架（API/SPA/Vue2/iVi

摘要：像操作系统一样，你可以通过安装软件，成为适用于你的电脑。先进的技术方案，使得你无需担心后期功能拓展与迭代问题，大大降低了维护成本。对于一个超过三年生命周期的项目来说，最适合不过。总之，是新的技术方向标，能让每个艺术家像构建工程一样构建程序。这是我们团队的一个非盈利项目，以Apache2.0协议开源...不限制商用 Notadd是什么 Notadd 是基于Laravel 和 Vue 的...

Rocture 2019-06-27 16:29 评论0 收藏0
VueSocial（vue+express+socket.io实现可聊天可发图片的社交平台）

摘要：仿微博微信的聊天社交平台前后端分离的练手项目前端代码在下，后端代码在下。如果你觉得这个项目还不错的话，你的是对我最好的鼓励。的名字直接用了。。。改名后会有问题。。。。 VueSocial VueSocial something like QQ、weibo、weixin（仿微博、微信的聊天社交平台）前后端分离的vue+express+socket.io练手项目前端代码在BlogPhon...

yzd 2019-08-05 15:35 评论0 收藏0