及时聊天室：基于Laravel+Pusher+Vue经由过程事宜播送完成【laravel框架】,实时聊天室

之前有说过要整理出一篇事宜播送的教程，本日终究有时间把这篇文章给写了出来，本次的教程是基于Laravel+Pusher+Vue，以事宜播送作为核心技术，让你能够疾速搭建起一个及时谈天室运用，话不多说，让我们来直接看看细致的内容吧。

运用初始化

装置设置

起首照样经由过程 Composer 装置一个全新的谈天室运用：

composer create-project laravel/laravel chatroom --prefer-dist

因为要用到事宜播送，所以须要作废 config/app.php 中播送效劳供应者前面的解释：

修正 .env 中 BROADCAST_DRIVER 设置项为 pusher：

BROADCAST_DRIVER=pusher

只管 Laravel 开箱支撑 Pusher，然则我们照样须要装置对应的 PHP SDK：

composer require pusher/pusher-php-server

设置 Pusher 凭据信息

接见 Pusher 官网，注册并登录到用户背景，建立一个新的 Channels App：

建立完成后即可在跳转页面中猎取到 App Keys 相干信息：

将对应字段填充到谈天室运用根目录下的 .env 响应设置项即可。

前端资本初始化

我们运用 Laravel Mix 来编译前端 CSS 和 JavaScript：

npm install

另外，Laravel 还供应了 JavaScript 库 Laravel Echo 来定阅和监听事宜：

npm install --save laravel-echo pusher-js

装置完成，还要示知 Laravel Echo 运用 Pusher，Laravel 已在 resources/assets/js/bootstrap.js 中为我们供应了该完成，只不过默许解释起来了，只须要作废这段解释即可：

import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

用户认证脚手架代码

我们设定只要登录用户才进入谈天室举行谈天，为了简化流程，我们运用 Laravel 默许的用户认证功用：

php artisan make:auth

上述敕令会为我们生成用户认证体系所必需的路由、视图、控制器等代码。在功用见效之前，还须要运转数据库迁徙敕令生成对应数据表，编辑 .env 中数据库相干设置项，保证能够准确连接上数据库，然后运转以下敕令：

php artisan migrate

至此，运用初始化准备事情已完成，下面最先编写营业代码。

营业代码完成

音讯模子

起首要为发送的音讯建立一个模子类及其对应数据库迁徙文件：

php artisan make:model Message -m

在新生成的 app/Messaage 模子类中新增下面这行代码以轻易批量赋值：

/**
 * Fields that are mass assignable
 *
 * @var array
 */
protected $fillable = ['message'];

然后在 databases/migrations 目录下编写刚生成的 messages 对应迁徙文件的 up 要领：

Schema::create('messages', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('user_id')->unsigned();
    $table->text('message');
    $table->timestamps();
});

末了实行迁徙敕令生成数据表 messages：

php artisan migrate

用户与音讯的关联关联

很显然，用户与音讯之间是一对多的关联，在 User 模子类中新增关联要领：

/**
 * A user can have many messages
 *
 * @return \Illuminate\Database\Eloquent\Relations\HasMany
 */
public function messages()
{
    return $this->hasMany(Message::class);
}

接下来在 Message 模子类中定义与之相对的关联关联：

/**
 * A message belong to a user
 *
 * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
 */
public function user()
{
    return $this->belongsTo(User::class);
}

控制器代码

建立控制器 ChatsController 完成细致营业逻辑：

php artisan make:controller ChatsController

编写刚生成的控制器类 app/Http/Controllers/ChatsController 代码以下：

<?php
namespace App\Http\Controllers;
use Auth;
use App\Message;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class ChatsController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');  // 登录用户才接见
    }
    /**
     * Show chats
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('chat');
    }
    /**
     * Fetch all messages
     *
     * @return Message
     */
    public function fetchMessages()
    {
        return Message::with('user')->get();
    }
    /**
     * Persist message to database
     *
     * @param  Request $request
     * @return Response
     */
    public function sendMessage(Request $request)
    {
        $user = Auth::user();
        $message = $user->messages()->create([
            'message' => $request->input('message')
        ]);
        return ['status' => 'Message Sent!'];
    }
}

该控制器供应了三个营业要领，index 用于显现谈天室视图，fetchMessages 用户猎取一切音讯，sendMessage 用于发送音讯。

注册运用路由

对应地，我们在 routes/web.php 中注册三个路由：

Route::get('/', 'ChatsController@index');
Route::get('messages', 'ChatsController@fetchMessages');
Route::post('messages', 'ChatsController@sendMessage');

从注册路由中移除 /home 路由，响应地，须要把 app/Http/Controllers/Auth/LoginController.php 和 app/Http/Controllers/Auth/RegisterController.php 中的 $redirectTo 属性举行调解：

protected $redirectTo = '/';

谈天室视图

关于谈天室视图代码，我们基于 Bootsnipp 谈天室代码片断 稍作调解。起首建立 resources/views/chat.blade.php：

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">谈天室</div>
                    <div class="panel-body">
                        <chat-messages :messages="messages"></chat-messages>
                    </div>
                    <div class="panel-footer">
                        <chat-form
                                v-on:messagesent="addMessage"
                                :user="{{ Auth::user() }}"
                        ></chat-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

该视图用于展现谈天室主体页面。注意到我们在视图中运用了一些 Vue 组件，chat-messages 组件用于显现一切谈天信息，chat-form 组件用于发送音讯，稍后会给出这些组件代码。

在编写 Vue 组件之前，我们在 resources/views/layouts/app.blade.php 模板中为 chat 视图增加一些款式代码（增加到 </head> 标签之前）：

<style>
  .chat {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .chat li {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
  }
  .chat li .chat-body p {
    margin: 0;
    color: #777777;
  }
  .panel-body {
    overflow-y: scroll;
    height: 350px;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
  }
  ::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
  }
  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  }
</style>

接下来在 resources/assets/js/components 中建立 ChatMessages.vue 组件：

<template>
    <ul class="chat">
        <li class="left clearfix" v-for="message in messages">
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">
                        {{ message.user.name }}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>
<script>
    export default {
        props: ['messages']
    };
</script>

然后在统一目录下建立 ChatForm.vue 组件：

<template>
    <div class="input-group">
        <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="在这里输入要发送的音讯..." v-model="newMessage" @keyup.enter="sendMessage">
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
                发送
            </button>
        </span>
    </div>
</template>
<script>
    export default {
        props: ['user'],
        data() {
            return {
                newMessage: ''
            }
        },
        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });
                this.newMessage = ''
            }
        }    
    }
</script>

末了我们须要将这两个组件注册到位于 resources/assets/js/app.js 中的 Vue 根实例中：

require('./bootstrap');
window.Vue = require('vue');
Vue.component('chat-messages', require('./components/ChatMessages.vue'));
Vue.component('chat-form', require('./components/ChatForm.vue'));
const app = new Vue({
    el: '#app',
    data: {
        messages: []
    },
    created() {
        this.fetchMessages();
    },
    methods: {
        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },
        addMessage(message) {
            this.messages.push(message);
            axios.post('/messages', message).then(response => {
                console.log(response.data);
            });
        }
    }
});

播送音讯发送事宜

为了在谈天室中举行及时交互，须要播送某些事宜，在本例中，我们会在用户发送音讯时触发 MessageSent 事宜：

php artisan make:event MessageSent

编写 app/Events/MessageSent 事宜类代码以下：

<?php
namespace App\Events;
use App\Message;
use App\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    /**
     * User that sent the message
     *
     * @var User
     */
    public $user;
    /**
     * Message details
     *
     * @var Message
     */
    public $message;
    /**
     * Create a new event instance.
     * @param User $user
     * @param Message $message
     * @return void
     */
    public function __construct(User $user, Message $message)
    {
        $this->user = $user;
        $this->message = $message;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

因为只要登录用户才接见我们的运用，所以我们定义了一个私有的频道 chat，只要登录用户才连接上它。

接下来，我们须要修正 ChatsController 的 sendMessage() 来播送 MessageSent 事宜：

public function sendMessage(Request $request)
{
    $user = Auth::user();
    $message = $user->messages()->create([
        'message' => $request->input('message')
    ]);
    broadcast(new MessageSent($user, $message))->toOthers();
    return ['status' => 'Message Sent!'];
}

然后在 routes/channels.php 中受权当前登录用户能够监听该私有频道：

Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

如今，当一条音讯发送后，MessageSent 事宜就会被播送到 Pusher，运用 toOthers() 是为了将音讯发送者从播送接收者中消除。

监听音讯发送事宜

MessageSent 事宜在效劳端被播送后，须要在客户端监听这个事宜以便将最新发送音讯更新到谈天室音讯流中，我们能够经由过程在 resources/assets/js/app.js 中定义的 created() 要领中增加以下代码片断来完成这一功用：

created() {
    this.fetchMessages();
    Echo.private('chat')
        .listen('MessageSent', (e) => {
            this.messages.push({
                message: e.message.message,
                user: e.user
            });
        });
},

我们经由过程 Laravel Echo 连接到 chat 频道监听 MessageSent 播送事宜，如果有新音讯则将其推送到当前谈天室音讯流中显现。

在正式测试谈天室运用之前，还须要运转以下敕令经由过程 Laravel Mix 来编译前面编写的 JavaScript 代码：

npm run dev

运用示例

完成上述一切营业代码编写事情后，接下来就是见证事情结果的时刻了，在项目根目录下运转以下敕令启动运用：

php artisan serve

然后在浏览器经由过程 http://127.0.0.1:8000/ 接见运用，因为体系须要登录后才接见，所以起首会跳转到登录页面，我们须要先注册一个新用户，注册胜利后页面即跳转到谈天室页面，我们发送一条测试音讯。

为了测试多个用户谈天的结果，翻开另一个浏览器或许在当前浏览器新开一个隐身窗口，照样反复上面的接见注册步骤（注册名差别），注册胜利后跳转到谈天室页面，看到的结果和上面一样，我们再发条音讯尝尝。

能够看到两个窗口音讯是同步的，所以已到达我们预期的及时谈天结果，完成了经由过程事宜播送构建及时谈天室的功用。

以上就是本篇文章的全部内容了，更多laravel内容请关注laravel框架入门教程。

相干文章引荐：

laravel框架中TokenMismatchException的非常处置惩罚内容

Laravel 5.1框架中的ACL用户受权和权限搜检功用的完成

相干课程引荐：

2017年最新的五个Laravel视频教程引荐

以上就是及时谈天室：基于Laravel+Pusher+Vue经由过程事宜播送完成的细致内容，更多请关注ki4网别的相干文章！

标签：实时聊天室