基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能

一.前端页面完成

1.安装准备

安装前必须保证系统已经安装了下列软件

PHP >= 7.1.3

PHP OpenSSL 扩展

PHP PDO 扩展

PHP Mbstring 扩展

PHP Tokenizer 扩展

PHP XML 扩展

PHP Ctype 扩展

PHP JSON 扩展

PHP BCMath 扩展

2.下载安装node.js

http://nodejs.cn/download/

3.laravel初始化前端依赖

npm install

4.安装 Vue 弹幕组件 vue-baberrage

npm install vue-baberrage –save

5.引入 vue-baberrage

在 resources/js/app.js 中引入 vue-baberrage 组件

window.Vue = require(‘vue’);

import {vueBaberrage} from ‘vue-baberrage’;

Vue.use(vueBaberrage);

…

Vue.component(‘tasks-component’, require('./components/TasksComponent.vue').default);

Vue.component(‘danmu-component’, require('./components/DanmuComponent.vue').default);

6.编写 DanmuComponent.vue

resources/js/components/DanmuComponent.vue

7.视图中引入 danmu-component

@extends(‘layouts.app’)

@section(‘content’)

@endsection

8.添加访问路由

routes/web.php

Route::get('/danmu', function() {

return view(‘danmu’);

});

9.命令编译前端资源

npm run dev

二.后端代码整合

1.创建websocket服务文件

创建文件:app/Handlers/WebSocketHandler.php

fd); } // 收到消息时触发 public function onMessage(Server $server, Frame $frame) { // $frame->fd 是客户端 id，$frame->data 是客户端发送的数据 Log::info("从 {$frame->fd} 接收到的数据: {$frame->data}"); foreach($server->connections as $fd){ if (!$server->isEstablished($fd)) { // 如果连接不可用则忽略 continue; } $server->push($fd , $frame->data); // 服务端通过 push 方法向所有连接的客户端发送数据 } } // 连接关闭时触发 public function onClose(Server $server, $fd, $reactorId) { Log::info('WebSocket 连接关闭:' . $fd); } } ### **2.配置websocket服务端文件生效** config/laravels.php中配置这个 WebSocketHandler 'websocket' => [ 'enable' => true, 'handler' => \App\Handlers\WebSocketHandler::class, ], ### **3.在 Nginx 中配置支持 WebSocket 通信** 详情查看laravelS ### **4.Vue 组件与 WebSocket 服务器通信** ### **5.命令编译前端资源** npm run dev ### **6.访问url查看效果** http://laravelsk.dy2.cn/danmu

[laravel]基于 Laravel + Swoole + Vue 组件实现支持高并发的实时弹幕功能

文章目录