您尚未登录,请登录后浏览更多内容！ 登录 | 立即注册

QQ登录

只需一步，快速开始

 找回密码
 立即注册

QQ登录

只需一步，快速开始

返回列表 发新帖
查看: 14259|回复: 0
打印 上一主题 下一主题

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

[复制链接]
admin
跳转到指定楼层
楼主
发表于 2020-3-31 19:50:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
伪直播功能Websocket服务器+ ?4 |3 f2 l  I
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websockt服务

代码如下

  1. error_reporting(-1);  0 R8 u$ m  B* C" G0 R! K2 s( c, M
  2. //创建socket服务
    ( g6 q# p( J8 a0 O$ @
  3. $ws = new swoole_websocket_server("0.0.0.0", 9502);4 B" u0 X9 p" ?8 w
  4. //监听WebSocket连接打开事件& L4 O. x5 [$ E8 U4 a
  5. $ws->on('open', function ($ws, $request) {
    4 G# W, R0 c$ y0 s5 R
  6.      var_dump($request->fd, $request->get, $request->server);
    ! U" B4 ]7 t+ P" T
  7.      $ws->push($request->fd, "hello, welcome\n");
    - a& u, k& s+ e% t
  8. });5 I. o" h: W. m: Q+ v
  9. ( M! y5 [# T- s7 ]3 g
  10. //监听WebSocket消息事件6 a/ F; l0 U* k0 ~9 o, V
  11. $ws->on('message', function ($ws, $frame) {
    / A$ Q* ]! W# p  D' p! V0 S" Q
  12.     //推送消息给所有用户
    & h1 `' x; T; x* _& I1 a5 W: x
  13.     foreach($ws->connections as $fd){7 f# O$ T0 o1 V$ J& @' ^: N! {
  14.         $ws->push($fd, $frame->data);0 r9 M8 J/ `7 h/ K
  15.     }' d$ U2 g9 t  J7 A% M" v
  16. });" A9 }: i" |9 `. u0 D0 m
  17. - W6 v, ?  i) S+ D0 \
  18. //监听WebSocket连接关闭事件
    6 y) }$ W2 A; ]) N
  19. $ws->on('close', function ($ws, $fd) {
    : z2 J# K8 C) z
  20.     echo "client-{$fd} is closed\n";3 g. I" W% i$ N' P  Y
  21. });) B) e% Z' _7 ?- S: I0 Q
  22. //启动服务: F' R- f4 a( X
  23. $ws->start();
    2 b. u" A. {6 k. T& O  Z
  24. * T2 n; I% E, \1 H
复制代码

! g: s- X* ?' Y+ l8 G: DWebsocket客户端
  1. socket 通信技术就是两台联网的计算机之间交换数据的技术，这就是 socket 的全部内容了吗？是的！socket 编程远比想象中的简单很多，阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码
创建websocket客户端
& `: A* W& x6 w: P

代码如下

  1. //连接服务器0 {' c; A! I/ E2 F2 [& U0 ^
  2.     const socket = new WebSocket('ws://lm.com:9502');+ t+ o8 G4 e. b4 R) s
  3.     //Connection opened# u- [  i$ e7 F
  4.     socket.addEventListener('open', function (event) {- Z- }! @6 o+ g! d* h& Z. ?6 l, B
  5.             //发送消息给服务器
    - M2 H: t0 i  l* d$ U, @1 [7 h. J
  6.         socket.send('Hello Server! im websockt');
    ' D8 i" f/ |+ H% a+ Z" E+ p9 I
  7.     });" h# t6 e; W4 I2 N% f1 V
  8.     // Listen for messages% w$ S% M- Q  z$ |% A  f
  9.     socket.addEventListener('message', function (event) {$ N# T/ Z" e9 c# m( C0 b8 u; Z9 t
  10.             //接收服务器返回信息
    3 [" @$ S5 ?8 E
  11.         console.log('Message from server ', event.data);  M! K0 l! `3 `) E/ V
  12.     });
    , z. f4 J& |# }: p$ a. @

  13. " u4 A$ B! i/ H% h' L! t
复制代码
伪直播主播页面7 k% R5 ~1 s' j( o4 D0 o  e

html

  1. <body>( U+ D0 [& a9 |. r
  2.     <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>/ P! l" C  I" ^$ S7 v2 ~) A
  3.     <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">
    7 Z( j0 t/ |, _% T, @
  4.         画布
    . i& [' \3 \" ]) J+ G, B# _
  5.     </canvas>4 g; h' X+ O- n! n* @) n& O
  6.     <img src="" id="videoImage" width="350" height="700">
    % w$ Y9 [# `, H6 w! |/ d% h3 j
  7.     <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>
    ! Z/ e* L) O; W' D: i
  8.     <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>+ i. T3 L2 b8 X+ K' m' h7 ^5 i
  9. </body>" R9 {/ \7 h' F0 v' C$ A
复制代码

javascript

  1.     var v = document.getElementById("myVideo");3 n7 H3 j6 |8 n" P
  2.     var c = document.getElementById("myCanvas");
    2 i- B- K' [" V) r
  3.     // var c = document.createElement("canvas");. g. Z8 ?# Q, X/ m; ]$ x  l( S# _
  4.     var img = document.getElementById("videoImage");- ~9 B% l+ I5 {5 ?: n
  5.     ctx = c.getContext('2d');8 E5 u" |# e8 D5 C% y, q
  6.     var dataUrl;
    ; h, B3 i# @  ]7 y
  7.     const socket = new WebSocket('ws://xxxx.com:9502');
    . D1 L& c# J! a
  8.     //Connection opened. D7 i+ `7 G, {/ \
  9.     socket.addEventListener('open', function (event) {; @6 ~" i( `: t7 G) l
  10.         // socket.send('Hello Server! im websockt');7 g8 u5 _* X; V$ w
  11.     });( w/ o5 R( V9 r% j; [
  12.     // Listen for messages$ F& b! C% i  Z4 }$ c9 S5 c* |; q
  13.     socket.addEventListener('message', function (event) {6 U! S& ]+ B8 g( C( n3 v
  14.         console.log('Message from server ', event.data);: t2 r4 [- G& A( a6 V. f
  15.         img.src = event.data;
    5 _' r8 _, |$ j" Q1 E4 f
  16.     });6 V7 ^/ y7 s/ n# @; [/ G) o

  17. $ y  ~& `! y% X5 a9 a$ r# R
  18.     function playVideo() {! }; I( f7 p/ ~
  19.         ctx.drawImage(v, 0, 0, 350, 700);
    $ e& K- |5 O* D7 o" w, p# Z' S
  20.         dataUrl = c.toDataURL("image/png");
    ! H8 u. `4 b: w: I  p8 r5 g+ q* C
  21.         // img.src = dataUrl;
    7 Z5 d, S6 O7 y! ^
  22.         socket.send(dataUrl);
    $ y* S0 g! D4 h$ c
  23.     }
    : Z+ V. G3 K4 |$ ]: P% C
  24.     var tick;' Z7 s& j1 g5 H; P$ d
  25.     function aphla() {" n4 }2 Q) d) C& r1 {
  26.         tick = setInterval(function () {. H; q# M2 u* g  l0 N+ {! Y
  27.             playVideo();
    . A% {. C7 j$ H9 ]9 P3 V
  28.         }, 1);! p- s* N  q& K+ c4 ?
  29.     }
    3 G" X6 c1 G* H8 \+ {" L6 M
  30.     function vdStop() {: j' |* Q( f& I1 ~0 `
  31.         clearInterval(tick);" b; ~4 \8 z; b: d) Y6 W; \
  32.     }* I# g. r# `" {* ~: k' ?2 v% o
复制代码
用户页面, Z+ g$ t) a% ~( ?" B' P

html

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

javascript

  1. var img = document.getElementById("liveImg");
    ; X, d* h: l" h' ^
  2.     const socket = new WebSocket("ws://lm.com:9502");# B+ d% v% ]# o$ z4 W
  3.     //  u! R8 C' w  C$ D# `$ J
  4.     socket.addEventListener('open',function(){- z8 \- ^' V  \
  5.      socket.send('Hello Server! Im live.html');; ]7 Z3 `+ q" x, j
  6.     });$ z5 u9 _+ q7 f  G
  7.      // Listen for messages
    4 D% C0 B7 @- D/ q$ [. I) a
  8.     socket.addEventListener('message', function (event) {
    + h. h* s6 J6 Y! q3 j) o
  9.         //图片地址1 r" N. I& @9 b. n5 G
  10.         img.src = event.data;
    4 e  c5 i9 s. E  q, q
  11.     });- p1 V% Q1 d3 l5 m. I) x
复制代码

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


+ e& s$ x4 Y+ q
9 I1 w1 ~( Y6 L) J' M. G# J
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 18:10 , Processed in 0.052820 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!