本篇文章給大家?guī)砹岁P(guān)于Laravel8/LaravelS的相關(guān)知識(shí),其中主要介紹了Laravel8基于LaravelS實(shí)現(xiàn)彈幕功能的方法步驟,感興趣的朋友,下面一起來看一下,希望對(duì)大家有幫助。
Laravel8基于LaravelS實(shí)現(xiàn)彈幕彈幕功能
簡介
Laravel8基于LaravelS實(shí)現(xiàn)彈幕彈幕功能。前面學(xué)了基于Swoole實(shí)現(xiàn)視頻彈幕功能,這篇文章就來實(shí)現(xiàn)一個(gè)基于Laravel8的視頻彈幕功能。如果對(duì)webpack不熟悉,那么在安裝vue-baberrage組件時(shí)可能會(huì)報(bào)錯(cuò)卻不知如何解決。下面開始一步一步實(shí)現(xiàn)。
前面學(xué)了基于Swoole實(shí)現(xiàn)視頻彈幕功能,這篇文章就來實(shí)現(xiàn)一個(gè)基于Laravel8的視頻彈幕功能。如果對(duì)webpack不熟悉,那么在安裝vue-baberrage
組件時(shí)可能會(huì)報(bào)錯(cuò)卻不知如何解決。下面開始一步一步實(shí)現(xiàn)。
第一步:安裝Laravel8
composer create-project laravel/laravel labarrage
第二步:Laravel8中使用vue
Laravel8如何使用vue,請(qǐng)參考 Laravel8中使用vue。
注意:安裝vue時(shí)請(qǐng)使用 php artisan ui vue --auth
第三步:安裝及安裝vue-baberrage
安裝vue及bootstrap
npm install
安裝彈幕組件
npm install vue-baberrage --save
運(yùn)行
npm run dev
如果遇到BREAKING CHANGE: webpack < 5 used to include
錯(cuò)誤,請(qǐng)參考 Laravel8使用webpack報(bào)錯(cuò)的解決方法。
后續(xù)只要文件改動(dòng)就需要重新編譯,后續(xù)將不再復(fù)述。
第四步:安裝LaravelS實(shí)現(xiàn)Websocket服務(wù)器
請(qǐng)參考 Laravel8使用laravel-s實(shí)現(xiàn)WebSocket服務(wù)器
第五步:項(xiàng)目中引入vue-baberrage組件
文件:resources/js/app.js 新增如下內(nèi)容
import { vueBaberrage } from 'vue-baberrage' Vue.use(vueBaberrage) Vue.component('danmu-component', require('./components/DanmuComponent.vue').default);
第五步:編寫文彈幕組件
后續(xù)實(shí)現(xiàn)代碼根據(jù) 學(xué)院君 文章改動(dòng)
位置:resources/js/components/DanmuComponent.vue
<template> <div id="danmu"> <div> <vue-baberrage :isShow = "barrageIsShow" :barrageList = "barrageList" :loop = "barrageLoop" :maxWordCount = "60" > </vue-baberrage> </div> <div> <div> <select v-model="position"> <option value="top">從上</option> <option value="abc">從右</option> </select> <input type="text" style="float:left" v-model="msg"/> <button type="button" style="float:left" @click="addToList">發(fā)送</button> </div> </div> </div> </template> <script> import { MESSAGE_TYPE } from 'vue-baberrage' export default { name: 'danmu', data () { return { msg: 'hello 自如初!', position: 'top', barrageIsShow: true, currentId: 0, barrageLoop: false, barrageList: [] } }, methods: { removeList () { this.barrageList = [] }, addToList () { if (this.position === 'top') { this.barrageList.push({ id: ++this.currentId, msg: this.msg + this.currentId, barrageStyle: 'top', time: 8, type: MESSAGE_TYPE.FROM_TOP, position: 'top' }) } else { this.barrageList.push({ id: ++this.currentId, msg: this.msg, time: 15, type: MESSAGE_TYPE.NORMAL }) } } } } </script> <style scoped> #danmu { text-align: center; color: #2c3e50; } .stage { height: 300px; width: 100%; background: #025d63; margin: 0; position: relative; overflow: hidden; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } .baberrage-stage { z-index: 5; } .baberrage-stage .baberrage-item.normal{ color:#FFF; } .top{ border:1px solid #66aabb; } .danmu-control{ position: absolute; margin: 0 auto; width: 100%; bottom: 300px; top: 70%; height: 69px; box-sizing: border-box; text-align: center; display: flex; justify-content: center; div { width: 300px; background: rgba(0, 0, 0, 0.6); padding: 15px; border-radius: 5px; border: 2px solid #8ad9ff; } input,button,select{ height:35px; padding:0; float:left; background:#027fbb; border:1px solid #CCC; color:#FFF; border-radius:0; width:18%; box-sizing: border-box; } select{ height:33px; margin-top:1px; border: 0px; outline: 1px solid rgb(204,204,204); } input{ width:64%; height:35px; background:rgba(0,0,0,.7); border:1px solid #8ad9ff; padding-left:5px; color:#FFF; } } </style>
第六步:視圖中使用組件
位置:resources/views/danmu.blade.php
@extends('layouts.app') @section('content') <danmu-component></danmu-component> @endsection
第七步:注冊(cè)路由
Route::get('/danmu', function() { return view('danmu'); });
執(zhí)行 npm run dev
第八步:編寫websocket服務(wù)器
文件:App\Handlers\WebSocketHandler.php
<?php namespace App\Handlers; use Hhxsv5\LaravelS\Swoole\WebSocketHandlerInterface; use Illuminate\Support\Facades\Log; use Swoole\Http\Request; use Swoole\WebSocket\Frame; use Swoole\WebSocket\Server; class WebSocketHandler implements WebSocketHandlerInterface { public function __construct() { } // 連接建立時(shí)觸發(fā) public function onOpen(Server $server, Request $request) { Log::info('WebSocket 連接建立:' . $request->fd); } // 收到消息時(shí)觸發(fā) public function onMessage(Server $server, Frame $frame) { // $frame->fd 是客戶端 id,$frame->data 是客戶端發(fā)送的數(shù)據(jù) Log::info("從 {$frame->fd} 接收到的數(shù)據(jù): {$frame->data}"); foreach($server->connections as $fd){ if (!$server->isEstablished($fd)) { // 如果連接不可用則忽略 continue; } $server->push($fd , $frame->data); // 服務(wù)端通過 push 方法向所有連接的客戶端發(fā)送數(shù)據(jù) } } // 連接關(guān)閉時(shí)觸發(fā) public function onClose(Server $server, $fd, $reactorId) { Log::info('WebSocket 連接關(guān)閉:' . $fd); } }
第九步:laravels.php注冊(cè)
文件:config/laravels.php
'websocket' => [ 'enable' => true, 'handler' => \App\Handlers\WebSocketHandler::class, ],
第十步:啟動(dòng)
php bin/laravels start
這樣就完成啦