swoole实现视频弹幕效果

发布时间：2022-08-02 13:50:53 所属栏目：PHP教程来源：互联网

导读：概述这是关于 Swoole 学习的第三篇文章：Swoole WebSocket 的应用。第二篇：Swoole Task 的应用第一篇：Swoole Timer 的应用什么是 WebSocket ？ WebSocket 是一种在单个TCP连接上进行全双工通信的协议。 WebSocket 使得客户端和服务器之间的数据交换变

　　概述
　　这是关于 Swoole 学习的第三篇文章：Swoole WebSocket 的应用。

　　第二篇：Swoole Task 的应用
　　第一篇：Swoole Timer 的应用
　　什么是 WebSocket ？

　　WebSocket 是一种在单个TCP连接上进行全双工通信的协议。

　　WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

　　在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

　　我们利用 WebSocket 进行及时通讯，今天实现一个视频弹幕效果。

　　实现弹幕其实就和群聊类似，将消息推送给所有的客户端，只不过前端的展示所有不同。

　　本地版本：

　　后端 PHP 7.2.6、Swoole 4.3.1。
　　前端 HTML5 WebSocket、Canvas。
　　废话不多说，先看效果。

　　批量版：

　　手动版：

　　代码
　　server.php

　　<?php

　　class Server
　　{
　　    private $serv;

　　    public function __construct() {
　　        $this->serv = new swoole_websocket_server("0.0.0.0", 9501);
　　        $this->serv->set([
　　            'worker_num'      => 2, //开启2个worker进程
　　            'max_request'     => 4, //每个worker进程 max_request设置为4次
　　            'task_worker_num' => 4, //开启4个task进程
　　            'dispatch_mode'   => 4, //数据包分发策略 - IP分配
　　            'daemonize'       => false, //守护进程(true/false)
　　        ]);

　　        $this->serv->on('Start', [$this, 'onStart']);
　　        $this->serv->on('Open', [$this, 'onOpen']);
　　        $this->serv->on("Message", [$this, 'onMessage']);
　　        $this->serv->on("Close", [$this, 'onClose']);
　　        $this->serv->on("Task", [$this, 'onTask']);
　　        $this->serv->on("Finish", [$this, 'onFinish']);

　　        $this->serv->start();
　　    }

　　    public function onStart($serv) {
　　        echo "#### onStart ####".PHP_EOL;
　　        echo "SWOOLE ".SWOOLE_VERSION . " 服务已启动".PHP_EOL;
　　        echo "master_pid: {$serv->master_pid}".PHP_EOL;
　　        echo "manager_pid: {$serv->manager_pid}".PHP_EOL;
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }

　　    public function onOpen($serv, $request) {
　　        echo "#### onOpen ####".PHP_EOL;
　　        echo "server: handshake success with fd{$request->fd}".PHP_EOL;
　　        $serv->task([
　　            'type' => 'login'
　　        ]);
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }

　　    public function onTask($serv, $task_id, $from_id, $data) {
　　        echo "#### onTask ####".PHP_EOL;
　　        echo "#{$serv->worker_id} onTask: [PID={$serv->worker_pid}]: task_id={$task_id}".PHP_EOL;
　　        $msg = '';
　　        switch ($data['type']) {
　　            case 'login':
　　                $msg = '我来了...';
　　                break;
　　            case 'speak':
　　                $msg = $data['msg'];
　　                break;
　　        }
　　        foreach ($serv->connections as $fd) {
　　            $connectionInfo = $serv->connection_info($fd);
　　            if ($connectionInfo['websocket_status'] == 3) {
　　                $serv->push($fd, $msg); //长度最大不得超过2M
　　            }
　　        }
　　        $serv->finish($data);
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }

　　    public function onMessage($serv, $frame) {
　　        echo "#### onMessage ####".PHP_EOL;
　　        echo "receive from fd{$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}".PHP_EOL;
　　        $serv->task(['type' => 'speak', 'msg' => $frame->data]);
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }

　　    public function onFinish($serv,$task_id, $data) {
　　        echo "#### onFinish ####".PHP_EOL;
　　        echo "Task {$task_id} 已完成".PHP_EOL;
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }

　　    public function onClose($serv, $fd) {
　　        echo "#### onClose ####".PHP_EOL;
　　        echo "client {$fd} closed".PHP_EOL;
　　        echo "########".PHP_EOL.PHP_EOL;
　　    }
　　}

　　$server = new Server();
　　index.php

　　<!DOCTYPE html>
　　<html lang="zh-CN">
　　 <head>
　　     <meta charset="utf-8">
　　 <meta http-equiv="X-UA-Compatible" content="IE=edge">
　　 <meta name="viewport" content="width=device-width, initial-scale=1">
　　 <meta name="description" content="">
　　 <meta name="keywords" content="">
　　 <script src="js/canvasBarrage.js?v=17"></script>
　　 <title>视频弹幕Demo</title>
　　        <style>
　　            .canvas-barrage {
　　                position: absolute;
　　                width: 960px;
　　                height: 540px;
　　                pointer-events: none;
　　                z-index: 1;
　　            }
　　            .ui-input {
　　                height: 20px;
　　                width: 856px;
　　                line-height: 20px;
　　                border: 1px solid #d0d0d5;
　　                border-radius: 4px;
　　                padding: 9px 8px;
　　            }
　　            .ui-button {
　　                display: inline-block;
　　                background-color: #2486ff;
　　                line-height: 28px;
　　                text-align: center;
　　                border-radius: 4px;
　　                color: #fff;
　　                font-size: 14px;
　　            }
　　        </style>
　　 </head>
　　 <body>
　　        <canvas id="canvasBarrage" class="canvas-barrage"></canvas>
　　        <video id="videoBarrage" width="960" height="540" src="./video/video.mp4" controls></video>
　　            <p>
　　                <input class="ui-input" id="msg" name="value" value="发送弹幕" required>
　　                <input class="ui-button" type="button" id="sendBtn" value="发送弹幕">
　　            </p>
　　        <script>
　　            if ("WebSocket" in window) {
　　                // 弹幕数据
　　                var dataBarrage = [{
　　                    value: '',
　　                    time: 0, // 单位秒
　　                    speed: 0,
　　                    fontSize: 0
　　                }];

　　                var itemsColor = ['#FFA54F','#FF4040','#EE1289', '#8E8E38', '#3A5FCD', '#00EE76', '#388E8E', '#76EEC6', '#87CEFF', '#7FFFD4'];

　　                var eleCanvas = document.getElementById('canvasBarrage');
　　                var eleVideo = document.getElementById('videoBarrage');

　　                var barrage = new CanvasBarrage(eleCanvas, eleVideo, {
　　                    data: dataBarrage
　　                });

　　                var wsServer = 'ws://10.211.55.3:9501';
　　                var ws = new WebSocket(wsServer);

　　                ws.onopen = function (evt) {
　　                    if (ws.readyState == 1) {
　　                        console.log('WebSocket 连接成功...');
　　                    } else {
　　                        console.log('WebSocket 连接失败...');
　　                    }
　　                };

　　                ws.onmessage = function (evt) {

　　                    barrage.add({
　　                        value: evt.data,
　　                        time: eleVideo.currentTime,
　　                        speed: 5,
　　                        color: itemsColor[Math.floor(Math.random()*itemsColor.length)]
　　                        // 其它如 fontSize, opacity等可选
　　                    });
　　                    console.log('Retrieved data from server: ' + evt.data);
　　                };

　　                ws.onerror = function (evt) {
　　                    alert('WebSocket 发生错误');
　　                    console.log(evt);
　　                };

　　                ws.onclose = function() {
　　                    alert('WebSocket 连接关闭');
　　                    console.log('WebSocket 连接关闭...');
　　                };

　　                var msg;
　　                var sendBtn = document.getElementById('sendBtn');
　　                sendBtn.onclick = function(){
　　                    if (ws.readyState == 1) {
　　                        msg = document.getElementById('msg').value;
　　                        ws.send(msg);
　　                    } else {
　　                        alert('WebSocket 连接失败');
　　                    }
　　                };
　　            } else {
　　                alert("您的浏览器不支持 WebSocket!");
　　            }
　　            </script>
　　 </body>
　　</html>
　　小结
　　一、单聊提供了方法，群聊提供方法了吗？

　　官方没有提供群聊的方法，使用循环实现的。

　　单聊：

　　$serv->push($fd, $msg);
　　群聊：

　　foreach ($serv->connections as $fd) {
　　    $serv->push($fd, $msg);
　　}
　　二、发送消息为什么要放到Task中，封装一个普通方法不行吗？

　　不能封装成一个普通的方法，要放在Task中使用多进程执行。

　　如果想了解 Swoole Task 的知识，请看：第二篇：Swoole Timer 的应用。

　　三、如何模拟批量弹幕效果？

　　可以使用 swoole_timer_tick ，比如：

　　swoole_timer_tick(50, function () use($serv){
　　    $serv->task([
　　        'type' => 'login'
　　    ]);
　　});
　　四、前端使用的哪个弹幕插件？还有没有其他的？

　　canvasBarrage.js：

　　http://www.zhangxinxu.com/wordpress/?p=6386

　　有其他的，比如：

　　Jquery.barrager.js
　　Jquery.danmu.js
　　DanMuer.js
　　根据自己喜欢风格，进行尝试吧。

（编辑：梧州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

php简单复制文件的技巧	php json_encode中文乱
php网页出现乱码	php使用CURL伪造IP和来