管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
伪直播功能Websocket服务器 k' E! v: {# a2 `6 Y! I
- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websockt服务代码如下 - error_reporting(-1);
1 b4 C: r' j+ g. C- T9 U8 r - //创建socket服务
6 e% b: U1 ?3 \: W4 z4 F3 O - $ws = new swoole_websocket_server("0.0.0.0", 9502);
3 f$ N6 S6 e6 }0 h8 r' o- o3 ^ - //监听WebSocket连接打开事件
5 u' y: @- L% V8 `( f$ S2 E5 G* ` - $ws->on('open', function ($ws, $request) {
/ s; D* I2 y( G9 T1 A( V& E5 P - var_dump($request->fd, $request->get, $request->server);
1 o1 n+ z6 u- F1 E" b2 p% R0 K - $ws->push($request->fd, "hello, welcome\n");
$ d! ]1 n* n1 P0 I - });0 k/ D# G" J7 |/ I! Y3 Q
- s# Z5 I" `* N7 x2 ~7 H2 D4 E- A
- //监听WebSocket消息事件
, n9 v5 g9 l$ N! k$ o( H0 w - $ws->on('message', function ($ws, $frame) {' f. E9 Z5 s# o
- //推送消息给所有用户
. w7 W& j' {; {# E# M2 A! ~! ]+ s5 j - foreach($ws->connections as $fd){
& K2 q# t* w% `* T2 o) M2 |' y/ `& l - $ws->push($fd, $frame->data);1 W7 c6 M0 Q' z( f1 S4 R$ e
- }
- d/ c3 W( w" l a+ T - });
0 P2 l) ~, J" N8 O - 5 f& r/ N! V) w: H) l) |
- //监听WebSocket连接关闭事件
& c, G) Q6 B8 A% X2 D& p - $ws->on('close', function ($ws, $fd) {
! O0 L' Y' l- l0 H! y8 N - echo "client-{$fd} is closed\n";
6 G; T$ V! O' h$ P; ^- ] - });% D7 m6 V( G) p. M1 S1 b2 u G
- //启动服务; O! F: j+ o5 ?$ m2 l+ C" P, J
- $ws->start();: W5 N& G7 i0 V& u* K* Q% @. o
0 U( i5 ~- g ?8 a2 _9 W, I
复制代码 ; r8 `( p) X3 K3 J, j6 z% o
Websocket客户端- socket 通信技术就是两台联网的计算机之间交换数据的技术,这就是 socket 的全部内容了吗?是的!socket 编程远比想象中的简单很多,阅读完这套简明的入门教程你就能胜任简单的 socket 编程了。
复制代码 创建websocket客户端6 j$ I" J# \ K
代码如下 - //连接服务器
7 _( b9 @" P! r) S8 D - const socket = new WebSocket('ws://lm.com:9502');1 P: [& F* y. h- m8 \
- //Connection opened" y4 I4 Z2 t$ f- a- R5 H' L9 Q
- socket.addEventListener('open', function (event) {( S. k( m! H' {+ O3 r$ Z. f g/ a5 W
- //发送消息给服务器
3 Z6 O9 |2 d h9 p6 U- X9 N - socket.send('Hello Server! im websockt');
. B }9 ~5 c0 h5 `8 ~6 h - });) e1 q. Q1 `* ~+ ~, v: W
- // Listen for messages
( O8 _; P& D y - socket.addEventListener('message', function (event) {$ I$ J% I3 ~2 _. e+ |; u
- //接收服务器返回信息
5 L1 t; U, K& L - console.log('Message from server ', event.data);. X: H6 z7 C5 c5 C
- });# N- j. k+ q1 r8 s! Z
- . \ i4 h& F" L/ \9 h& k; ]2 u
复制代码 伪直播主播页面
: X2 n; x {: Q2 e) L. F) K/ K* J9 c- Dhtml - <body>2 ~% `) `& U, O" @7 u$ X
- <video id="myVideo" src="./video/tikto.mp4" style="height:auto;width: 350px;" controls=true muted=true></video>
4 d5 `0 M; M3 }4 r) i8 M$ J - <canvas id="myCanvas" width="350" height="700" style="border:1px solid #d3d3d3;">9 M# n8 k# c/ }" G: w9 K
- 画布' w+ v9 T$ n; y1 O0 @: [
- </canvas>
( m& E5 W1 m# M- o* U# ]) j - <img src="" id="videoImage" width="350" height="700">
9 {) d4 L+ b0 Z3 H p - <button onclick="aphla()" style="height: 50px;width: 50px;">播放</button>) m4 d" k5 x4 P% ?; [
- <button onclick="vdStop()" style="height: 50px;width: 50px;">暂停</button>
6 R7 s' Q4 A4 z6 G+ W/ J - </body>
- d: _. l9 o/ t7 Q! Q
复制代码javascript - var v = document.getElementById("myVideo");
' _. ], E. A! o% u% M7 u: }5 q6 J - var c = document.getElementById("myCanvas");6 f( t5 h- f) X* B6 [# c- h
- // var c = document.createElement("canvas");
) P* H/ _7 s7 w, D - var img = document.getElementById("videoImage");- x$ Q# I ~7 Q j* G% F! [7 r6 A
- ctx = c.getContext('2d');
~+ I& O& `/ D0 X3 O) d; M, D - var dataUrl;
2 C; `" s2 r4 `5 Z( v/ J- g - const socket = new WebSocket('ws://xxxx.com:9502');/ L- Y- D- q4 i
- //Connection opened8 \- V5 D+ v4 J+ l- M
- socket.addEventListener('open', function (event) {
8 N# }, j5 |$ F6 g7 } - // socket.send('Hello Server! im websockt');# S+ s. z1 x: _, ^/ z
- });
! s4 C( D3 a6 y& {, B, Q9 t( v - // Listen for messages
; J4 p& c5 ^+ b - socket.addEventListener('message', function (event) {; p- i% H2 [( f$ i
- console.log('Message from server ', event.data);) i6 y+ O: W4 ^
- img.src = event.data;! Q7 N+ _" T" j7 Z1 t
- });
9 ] L) H* ^9 S* V9 q$ M8 Z
9 [0 |; r3 R5 a- function playVideo() {
" q9 `. d9 W9 w- b3 m5 c" | - ctx.drawImage(v, 0, 0, 350, 700);6 |% @. {. |4 K' l5 t
- dataUrl = c.toDataURL("image/png");) @& o# S* q& D& x( f, Y8 k! c
- // img.src = dataUrl;
) M+ D3 ?: x( M% h& } [ - socket.send(dataUrl);5 S! m& J. e7 E% z
- }
) `% q% Y1 m) n* h$ ] - var tick;
8 }5 o/ Q8 |1 Q* w" Q, F7 c - function aphla() {/ a( O. Y& N* Q/ {& X, g
- tick = setInterval(function () {; x1 ~$ a r5 i" b& V/ ^
- playVideo();
% V Q. ?9 V) U: | - }, 1);# l3 v. x9 w6 Z7 b4 p0 n9 g
- }
" g0 j) T0 |( y- J0 I - function vdStop() {3 e e" o; U) y
- clearInterval(tick);2 b; \( B/ V$ A8 y- e( X
- }; j3 e; ^5 Y5 @& p L# `7 J
复制代码 用户页面$ m3 [" a5 v7 q7 Q0 ^3 A
html - <img src="" id="liveImg">
复制代码javascript - var img = document.getElementById("liveImg");6 G" O$ e" `9 }9 N {) N
- const socket = new WebSocket("ws://lm.com:9502");/ @8 M" j5 f e7 J. t4 L
- //
. J+ @ e7 R; U5 i+ ~, A - socket.addEventListener('open',function(){
* P# w5 o# e" R, F - socket.send('Hello Server! Im live.html');
8 q7 Y0 v% D9 k, x7 A! G - });
+ i' {+ h# G; ^1 c# W - // Listen for messages
/ Z- V6 L+ h) y, q x6 ] - socket.addEventListener('message', function (event) {5 n5 W) q! ^, e* S6 G$ F" N3 m
- //图片地址6 g; b! }0 |; s; o' g9 N
- img.src = event.data;
; o! F+ Z5 e) S# f) G% C - });# z% V- y% g& A3 {( A' V! B/ m
复制代码真直播应是通过rtmp推流实现的,本次功能仅作为swoole框架的一个案例用法
. ~! ~4 b4 S7 G. F1 ^& k
0 z0 L0 B+ g; e4 I! ? |
|