微信关注
微信
移动客户端
您当前的位置 ：首页 > 学习资料 > PHP大道至简之Swoole伪直播功能
投稿

PHP大道至简之Swoole伪直播功能

2021-03-21 21:01:32 来源： 作者： 责任编辑：cncml

伪直播功能Websocket服务器
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  
  2. //创建socket服务
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);
  4. //监听WebSocket连接打开事件
  5. $ws->on('open', function ($ws, $request) {
  6.      var_dump($request->fd, $request->get, $request->server);
  7.      $ws->push($request->fd, "hello, welcome\\n");
  8. });
  9.  
  10. //监听WebSocket消息事件
  11. $ws->on('message', function ($ws, $frame) {
  12.     //推送消息给所有用户
  13.     foreach($ws->connections as $fd){
  14.         $ws->push($fd, $frame->data);
  15.     }
  16. });
  17.  
  18. //监听WebSocket连接关闭事件
  19. $ws->on('close', function ($ws, $fd) {
  20.     echo "client-{$fd} is closed\\n";
  21. });
  22. //启动服务
  23. $ws->start();
  24.  
  25.  
复制代码

Websocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端

代码如下

  1. //连接服务器
  2.     const socket = new WebSocket('ws://lm.com:9502');
  3.     //Connection opened
  4.     socket.addEventListener('open', function (event) {
  5.             //发送消息给服务器
  6.         socket.send('Hello Server! im websockt');
  7.     });
  8.     // Listen for messages
  9.     socket.addEventListener('message', function (event) {
  10.             //接收服务器返回信息
  11.         console.log('Message from server ', event.data);
  12.     });
  13.  
  14.  
复制代码
伪直播主播页面

html

  1. <body>
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
  4.         画布
  5.     </canvas>
  6.     <img src="" id="videoImage" width="350" height="700">
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
  9. </body>
  10.  
复制代码

javascript

  1.     var v = document.getElementById("myVideo");
  2.     var c = document.getElementById("myCanvas");
  3.     // var c = document.createElement("canvas");
  4.     var img = document.getElementById("videoImage");
  5.     ctx = c.getContext('2d');
  6.     var dataUrl;
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
  8.     //Connection opened
  9.     socket.addEventListener('open', function (event) {
  10.         // socket.send('Hello Server! im websockt');
  11.     });
  12.     // Listen for messages
  13.     socket.addEventListener('message', function (event) {
  14.         console.log('Message from server ', event.data);
  15.         img.src = event.data;
  16.     });
  17.  
  18.     function playVideo() {
  19.         ctx.drawImage(v, 0, 0, 350, 700);
  20.         dataUrl = c.toDataURL("image/png");
  21.         // img.src = dataUrl;
  22.         socket.send(dataUrl);
  23.     }
  24.     var tick;
  25.     function aphla() {
  26.         tick = setInterval(function () {
  27.             playVideo();
  28.         }, 1);
  29.     }
  30.     function vdStop() {
  31.         clearInterval(tick);
  32.     }
  33.  
复制代码
用户页面

html

  1. <img src="" id="liveImg">
复制代码

javascript

  1. var img = document.getElementById("liveImg");
  2.     const socket = new WebSocket("ws://lm.com:9502");
  3.     //
  4.     socket.addEventListener('open',function(){
  5.      socket.send('Hello Server! Im live.html');
  6.     });
  7.      // Listen for messages
  8.     socket.addEventListener('message', function (event) {
  9.         //图片地址
  10.         img.src = event.data;
  11.     });
  12.  
复制代码

真直播应是通过rtmp推流实现的，本次功能仅作为swoole框架的一个案例用法


 
文章来源： 责任编辑：cncml

更多
版权声明：
1、本主题所有言论和图片纯属会员个人意见，与本网站立场无关
2、本站所有主题由该文章作者发表，该文章作者与享有文章相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该文章作者和的同意
4、文章作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、管理员和版主有权不事先通知发贴者而删除本文
精彩置顶
绘画资料
独家推荐
软件推荐
不良信息举报信箱 新闻热线:18733599993 技术服务:18733599993 网上投稿
关于本站 | 广告服务 | 免责申明 | 招聘信息 | 联系我们
在线网 版权所有 Copyright(C)2005-2025