管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器6 R5 i1 G" u* \( W
- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1);
J7 ~2 n4 y; O: c" ?8 |$ Q3 C - //创建socket服务
2 h! Y$ p k$ x. j. v3 a* u - $ws = new swoole_websocket_server("0.0.0.0", 9502);
9 u% S9 M0 P# x: @# Q" i - //监听WebSocket连接打开事件
5 Q, n$ ^: s/ C - $ws->on('open', function ($ws, $request) {
7 m) @* S5 W4 ] - var_dump($request->fd, $request->get, $request->server); r& Z% ^$ N! `
- $ws->push($request->fd, "hello, welcome\n");
. n' l0 e% ?" k7 q+ K - });
9 ?, q; A$ `% ^8 }( k - + x0 v" h$ D y2 S( v) G
- //监听WebSocket消息事件/ Z1 H) L0 C( f8 J3 M0 v
- $ws->on('message', function ($ws, $frame) {
1 j+ u, A9 z5 v v5 ?% N - //推送消息给所有用户2 ?: O& [6 G1 M/ g1 _" q: d/ H" o
- foreach($ws->connections as $fd){& R, ?5 J' V/ R: Q1 b1 [, F
- $ws->push($fd, $frame->data);* l/ c( c0 D+ I) o" ~3 g: w
- }4 ]3 i# }$ n; e
- });
* B' e. O* ?" n' e! d
" x& Y9 m' Y4 j: u) q& Y& q! g- //监听WebSocket连接关闭事件# X8 N6 W. Q% ~3 Y0 l
- $ws->on('close', function ($ws, $fd) {
3 x( p* y& {8 t+ C1 Y) K& S - echo "client-{$fd} is closed\n";2 Q9 Y4 O8 j& {7 L& r
- });
1 v& T' q3 i! y5 k. C# p; \+ S - //启动服务 V: D+ P8 [' D0 J E9 r _: e
- $ws->start();
1 V$ h# P5 E! { - 6 M: g2 W1 S; q
复制代码 " S0 h9 }# V5 e
Websocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端
3 h) ` C+ r, S2 ~, Y' u5 O: x w代码如下 - //连接服务器) L+ K( G2 k- E0 M/ k. x z
- const socket = new WebSocket('ws://lm.com:9502');& @( t0 M+ `7 W7 ~ k' r+ M
- //Connection opened
% ?& n& D6 t z$ N - socket.addEventListener('open', function (event) {) B# Z; ^1 I8 @, i9 i
- //发送消息给服务器+ J$ A: H1 ^9 c, z+ N1 l
- socket.send('Hello Server! im websockt');
( F/ v5 J+ Y9 n& F0 P/ P3 n - });9 {, A2 G2 w$ [7 z, @$ m Q. l
- // Listen for messages
. a5 d2 b: g: V# v% B/ i0 n6 l - socket.addEventListener('message', function (event) {
. F4 t$ F# X; V- Y& o0 S - //接收服务器返回信息3 [6 Y8 c! g2 [: l# M
- console.log('Message from server ', event.data);0 y4 X4 i, n3 T/ o/ s' g# [6 b) F
- });+ [5 i% `& N; O% W" o
. M. ^9 ?) o4 b
复制代码 伪直播主播页面
" W8 G5 X2 U$ O/ J/ F3 jhtml - <body>& s8 E7 t& M0 ]8 C
- <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
: e3 x6 ^8 Q) E4 T7 K - <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">! g9 U. k- C) o. a; i
- 画布
1 k F& g1 n' B7 [ - </canvas>8 c* P) X3 e; Z' D# Y; r( m4 t2 D" K
- <img src="" id="videoImage" width="350" height="700">
# I+ X* |4 o; e; U - <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>3 s0 }8 P3 s$ B3 Y2 \6 }- I! J% |
- <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>) }3 |* m. o+ l7 ^
- </body>. q4 v! C+ {# ?
复制代码javascript - var v = document.getElementById("myVideo");
|# u# M3 q/ ?* i- _ - var c = document.getElementById("myCanvas");
) [/ h! Z1 |6 T1 [" P6 M - // var c = document.createElement("canvas");- N3 o0 j& i5 N
- var img = document.getElementById("videoImage");3 E# _: t4 B7 Q- R) f4 a7 p
- ctx = c.getContext('2d');$ A: A$ o. G8 Z2 O( `0 w
- var dataUrl;% J0 C8 b) y3 m; k
- const socket = new WebSocket('ws://xxxx.com:9502');/ i! F& b8 x2 p) C
- //Connection opened
: \' X1 k0 r; s% ]# ]) | - socket.addEventListener('open', function (event) {1 t/ O& N3 P/ Q
- // socket.send('Hello Server! im websockt');
% J* c1 n9 b% B) P u2 { - });6 |% `# h) v4 w3 N4 F* h$ o' }
- // Listen for messages
0 g0 ~, X* h0 o8 Z/ U8 r9 ?2 n, p - socket.addEventListener('message', function (event) {
0 t. N2 \; t, S* b$ h5 p D - console.log('Message from server ', event.data);
$ F, x8 ]" c$ c. K! a8 b$ y - img.src = event.data;
/ j: L2 c, |8 m( G9 J. I - });
4 ^! X6 v* p4 i - ! ]6 l! H: E5 P5 L; w% h
- function playVideo() {
6 a6 }9 W9 e! g4 f - ctx.drawImage(v, 0, 0, 350, 700);& e$ E/ l; \: l) @5 y- Z/ N% R9 f
- dataUrl = c.toDataURL("image/png");
; V( f- G D1 r# i/ V - // img.src = dataUrl;8 a- U' X! L# u9 a1 n/ v( ]0 T, {
- socket.send(dataUrl);
/ p6 v8 t0 t9 F6 T - }8 {0 x+ A6 r o6 ^- j b
- var tick;0 L! x& `; V% a$ g2 b3 R' {$ P5 j
- function aphla() {
/ Q9 g% d) d. r/ I' z - tick = setInterval(function () {7 B2 E; g/ {3 x) ]) E% f
- playVideo();
# s* R" ]9 E# g - }, 1);
3 L0 d, v5 y# e D, c2 k( x - }
5 w8 x( n+ ?2 ^) j' u+ M - function vdStop() {
9 H& _9 m; d$ O' Y - clearInterval(tick);1 O- i3 m$ X2 d# ?' s# R6 d$ R
- }7 A# W; _% I* Z8 s, h
复制代码 用户页面
, x4 l" K0 }, c2 L3 z, k6 W$ \html - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");5 F; l' Z: ^/ }
- const socket = new WebSocket("ws://lm.com:9502");
+ R! {4 m" `/ `6 |% M. a) \+ ?" n - //
. T8 e2 V- N& O; { G" K - socket.addEventListener('open',function(){
5 H9 J( `0 f0 v- l - socket.send('Hello Server! Im live.html');
4 s& y! w# w0 i7 p) l0 m - });! _8 }( l" J. o: _( d0 Y6 G1 v: Z
- // Listen for messages
2 X; u p/ _- }8 W - socket.addEventListener('message', function (event) {
% @1 z# L0 d; V+ } - //图片地址5 m' ~0 y! C' S5 p( w7 z5 K- v
- img.src = event.data;
4 o9 O* B" \6 @, t0 @# e - });
0 Y% Y8 e T- \( @
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法
( ^5 a4 b0 [) Z& t" U5 B7 S
/ A) ?+ C5 i/ x |
|