柳市做网站制作,网络营销与策划形考任务四答案,哈尔滨网页设计外包公司,平邑县门户网站WebSocket 是 HTML5 提供的一种网络通讯协议#xff0c;用于服务端与客户端实时数据传输。广泛用于浏览器与服务器的实时通讯#xff0c;APP与服务器的实时通讯等场景。
相比传统HTTP协议请求响应式通讯#xff0c;WebSocket协议可以做到实时的双向通讯#xff0c;服务端可…WebSocket 是 HTML5 提供的一种网络通讯协议用于服务端与客户端实时数据传输。广泛用于浏览器与服务器的实时通讯APP与服务器的实时通讯等场景。
相比传统HTTP协议请求响应式通讯WebSocket协议可以做到实时的双向通讯服务端可以在任何时候向客户端推送数据(HTTP协议需要客户端发起请求后才能推送)。
PHP作为世界上最好的语言自然支持WebSocket协议。以下是PHP使用WebSocket协议教程。
教程里使用workerman作为应用容器workerman具备非常高的性能它不仅支持WebSocket协议也支持HTTP协议、Text协议、Frame协议以及其它自定义协议等。
年会PHP WebSocket实时大屏
想象一下我们年会上需要一个大屏显示每一个公司成员对公司的祝福语。接下来我们就用workermanWebSocket来实现它。
WebSocket数据流转图
首先我们需要整理下它的数据流转图。
员工(手机浏览器) -------websocket------[服务器]------websocket------大屏(电脑浏览器投屏)
原理比较简单手机浏览器和电脑浏览器分别与服务器建立一个WebSocket连接。手机浏览器通过websocket发送文字祝福给服务器服务器将文字祝福通过websocket推送给电脑浏览器并显示。
新建目录
新建目录 php-websocket然后进入到 php-websocket 目录中
安装workerman
composer require workerman/workerman
新建一个start.php 文件
?php
require __DIR__ . /vendor/autoload.php;
use Workerman\Worker;
use Workerman\Connection\TcpConnection;// 使用websocket协议监听6161端口
$worker new Worker(websocket://0.0.0.0:6161);// 当浏览器(包括用户手机浏览器和电脑浏览器)发来消息时的处理逻辑
$worker-onMessage function(TcpConnection $connection, $data) {// 这个静态变量用来存储电脑浏览器的websocket连接方便推送使用static $daping_connection null;switch ($data) {// 发送 daping 字符串的是电脑浏览器将其连接保存到静态变量中case daping:$daping_connection $connection;break;// ping 是心跳数据用来维持连接只返回 pong 字符串无需做其它处理case ping:$connection-send(pong);break;// 用户手机浏览器发来的祝福语default:// 直接使用电脑浏览器的连接将祝福语推送给电脑if ($daping_connection) {$daping_connection-send($data);}}
};
Worker::runAll();
我们看到服务端代码很简洁电脑浏览器发起websocket连接后会发送一个字符串daping告诉服务端我是电脑浏览器服务端将这个连接保存到静态变量方便给它推送数据。手机浏览器发送的数据会直接用静态变量保存的电脑浏览器连接推送过去。
我们注意到有一个心跳数据ping pong的交互这是由于外网环境很复杂连接如果长时间不通讯(超过1分钟)连接就会被路由节点、防火墙等断开所以客户端与服务端需要在1分钟内至少通讯一次避免连接断开这个就是心跳的作用。
服务端开发完毕接下来是客户端。
电脑浏览器大屏
新建 daping.html
!doctype html
html langzh-cn
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnoscript srcjquery.min.js/scripttitleWebSocket大屏/title
/head
bodyul idcontent/ul
/body
scriptfunction connect() {// 与服务端建立WebSocket连接//(为了方便测试这里ip使用的是127.0.0.1正式环境请使用外网ip)ws new WebSocket(ws://127.0.0.1:6161);// 连接建立后发送daping表明自己是电脑浏览器ws.onopen function() {ws.send(daping);};// 收到服务端推送的数据后将数据显示在浏览器里(心跳数据pong除外)ws.onmessage function (e) {if (e.data ! pong) {$($(#content)).append(lie.data/li);}};// 没隔50秒发送一个心跳数据 ping 给服务器保持连接ws.timer setInterval(function () {ws.send(ping);}, 50000);// 当连接关闭时清除定时器并设置1秒后重连ws.onclose function () {clearTimeout(ws.timer);setTimeout(connect, 1000);};}// 执行连接connect();
/script
/html
虽然我们做了心跳保持连接但是仍然无法保证连接不被断开比如用户将浏览器切到后台、网络信号差、服务端重启等。所以断线重连是长连接应用必备的功能。所以我们需要在客户端监听连接断开事件 ws.onclose在这里执行一个定时器执行重连。
用户手机浏览器端
!doctype html
html langzh-cn
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitnotitleWebSocket大屏/titlescript srcjquery.min.js/script
/head
bodyinput typetext idcontent
input typebutton value发送 onclicksend()
scriptfunction connect() {ws new WebSocket(ws://127.0.0.1:6161);ws.onmessage function (e) {console.log(e.data);};ws.timer setInterval(function () {ws.send(ping);}, 50000);ws.onclose function () {clearTimeout(ws.timer);setTimeout(connect, 1000);};
}// 通过WebSocket连接将数据发送给服务端
function send() {ws.send($(#content).val());$(#content).val();
}connect();
/script
/body
/html
用户手机浏览器端和电脑浏览器端代码类似。多个一个send函数用来将数据发送给服务端。
快速测试 html代码里使用了jquery请自行下载放置到本地。 终端运行 php start.php start -d启动workerman的websocket服务。 终端运行 php -S 0.0.0.0:7171这样利用php cli启动了一个webserver监听7171端口。
浏览器访问 http://127.0.0.1:7171/daping.html 和 http://127.0.0.1:7171/user.html
这样在user.html发送的文字会展示在 daping.html 上 如果页面访问超时请在安全组或者防火墙没有放行6161 7171端口端口
