本篇內(nèi)容主要講解“Laravel8/LaravelS如何實(shí)現(xiàn)彈幕功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Laravel8/LaravelS如何實(shí)現(xiàn)彈幕功能”吧!

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供烈山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為烈山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

第一步：安裝Laravel8

composer create-project laravel/laravel labarrage

第二步：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

第四步：安裝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);

第五步：編寫文彈幕組件

位置：resources/js/components/DanmuComponent.vue

第六步：視圖中使用組件

位置：resources/views/danmu.blade.php

@extends('layouts.app')

@section('content')
   
@endsection

第七步：注冊(cè)路由

Route::get('/danmu', function() {
   return view('danmu');
});

執(zhí)行 npm run dev

第八步：編寫websocket服務(wù)器

文件：App\Handlers\WebSocketHandler.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

到此，相信大家對(duì)“Laravel8/LaravelS如何實(shí)現(xiàn)彈幕功能”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！