php自学中心 2019-11-08 10:25:30

文章来自:laravel学院WebSocket 概述
在此之前,有必要对 WebSocket 的原理做简单的说明,WebSocket 复用了 HTTP 协议来实现握手,然后通过请求报文中的 Upgrade 字段将 HTTP 协议升级到 WebSocket 协议来建立 WebSocket 通信连接,一旦 WebSocket 连接建立之后,就可以在这个长连接上通过 WebSocket 数据帧进行双向通信,客户端和服务端可以在任何时候向对方发送报文,而不是 HTTP 协议那种服务端只有在客户端发起请求后才能响应,从而解决了在 Web 页面实时显示最新资源的问题。
与 HTTP 类似,WebSocket 协议对应的 scheme 是 ws,如果是加密的 WebSocket 对应的 scheme 是 wss。
在这篇教程中,我们将在服务端基于 Swoole 实现简单的 WebSocket 服务器,然后在客户端基于 JavaScript 实现 WebSocket 客户端。WebSocket 服务器
PHP 异步网络通信引擎 Swoole 内置了对 WebSocket 的支持,通过几行 PHP 代码就可以写出一个异步非阻塞多进程的 WebSocket 服务器:
on('open', function (SwooleWebSocketServer $server, $request) {
echo "server: handshake success with fd{$request->fd}n";
});
// 收到消息时触发推送
$server->on('message', function (SwooleWebSocketServer $server, $frame) {
echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}n";
$server->push($frame->fd, "this is server");
});
// 关闭 WebSocket 连接时触发
$server->on('close', function ($ser, $fd) {
echo "client {$fd} closedn";
});
// 启动 WebSocket 服务器
$server->start();
编写完成后,将这段 PHP 代码保存到本地 websocket_server.php 文件。WebSocket 客户端
在客户端,可以通过 JavaScript 调用浏览器内置的 WebSocket API 实现 WebSocket 客户端,实现代码和服务端差不多,无论服务端还是客户端 WebSocket 都是通过事件驱动的,我们在一个 HTML 文档中引入相应的 JavaScript 代码:
Chat Client
将这个 HTML 文档命名为 websocket_client.html
WebSocket 通信演示
接下来,我们在命令行启动 WebSocket 服务器:
php websocket.php
然后在浏览器中访问 websocket_client.html,首先会提示我们输入昵称:

输入之后点击确定,JavaScript 代码会继续往下执行,让输入框获取焦点,然后初始化 WebSocket 客户端并连接到服务器,这个时候通过开发者工具可以看到 Console 标签页已经输出了连接已建立日志:

在 Network 里面也可以看到 WebSocket 握手请求和响应:

这个时候我们在输入框中输入「你好,WebSocket!」并回车,即可触发客户端发送该数据到服务器,服务器接收到消息后会将其显示出来:

同时将「This is server」消息推送给客户端,客户端通过 onmessage 回调函数将获取到的数据显示出来。在开发者工具的 Network->WS 标签页可以查看 WebSocket 通信细节:

看起来,这个过程还是客户端触发服务器执行推送操作,但实际上,在建立连接并获取到这个客户端的唯一标识后,后续服务端资源有更新的情况下,仍然可以通过这个标识主动将更新推送给客户端,而不需要客户端发起拉取请求。WebSocket 服务器和客户端在实际项目中的实现可能会更加复杂,但是基本原理是一致的。

websocket 更新点位 浏览器卡顿_我们来看看Swoole是如何实现WebSocket服务器及客户端的...相关推荐

  1. javascript 函数节流 throttle 解决函数被频繁调用、浏览器卡顿的问题

    * 使用setTimeout index.html <html> <head><meta charset="UTF-8"><title&g ...

  2. 前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题

    前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题 经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...

  3. linux firefox严重卡顿,火狐浏览器卡顿怎么办 卡顿解决方法一览

    Firefox火狐浏览器也是小编感觉非常好用的浏览器,极少出现卡顿的情况,但遇上卡顿的情况也是比较难以解决的,因为造成卡顿的原因比较多,所以解决起来也比较棘手,但是根据Firefox火狐浏览器官网发布 ...

  4. Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图(气泡图)渐变色效果

    目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...

  5. Element-ui 使用el-tabs发生浏览器卡顿现象

    最近使用el-tabs组件发生了一件不可思议的事情,浏览器卡顿到崩溃~ 之前将el-tabs放在for循环里面出现过该情况,一直以为是循环数据量过大导致,于是没有采用el-tabs组件,后来在< ...

  6. vue Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)

    最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...

  7. vue + Echarts 填坑记(Echarts数据量大,导致浏览器卡顿)

    最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,发现随着组件的增多,组件里Echarts绘图的增多,页面操作越来越卡顿,点击数据比较大的组件时,Echarts绘图渲染页面的速 ...

  8. HP电脑上Edge浏览器卡顿问题解决

    这段时间因为需要写论文,所以频繁使用Edge浏览器进行文献检索和科学上网,多开网页的时候发现Edge浏览器卡顿得令人发疯. 一般解决方法 一个normal的解决办法就是关闭Edge浏览器设置中的硬件加 ...

  9. vue+cesium cesium数据量太大导致浏览器卡顿解决办法

    vue+cesium cesium数据量太大 导致浏览器卡顿 解决办法 解决方案 : 不要把任何的cesium对象 放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...

最新文章

  1. TP、TN、FP、FN
  2. $.ajax返回的JSON格式的数据后无法执行success的解决方法
  3. 廖雪峰js教程笔记 2
  4. 01LaTeX学习系列之---TeX的介绍与认识
  5. Python稳基修炼之计算机等级考试易错细节题4(含答案)
  6. Bootstrap+Angularjs自制弹框
  7. Java层Binder使用(ServiceManager)
  8. [转] 丢了自己,要记得找回了~~我们80后的那些忧伤
  9. 移动端页面rem布局出现横向滚动条的修复
  10. [招聘]期待您的加盟,与博客园一起成长
  11. 拓端tecdat|R语言时间序列:ARIMA / GARCH模型的交易策略在外汇市场预测应用
  12. 腾讯测试王者荣耀网速的软件,4G用户怎么体验5G速度 腾讯手机管家5G测速帮你一键搞定...
  13. 常用的几种图片无损压缩工具
  14. 被华策、欢瑞等甩下,唐人影视往日荣光已成回忆?
  15. HIVE SQL分位数percentile使用方法案例
  16. CDH问题汇总之——ERROR main:com.cloudera.server.cmf.bootstrap.EntityManagerFactoryBean: Tables have unsuppo
  17. php无极分类的效果,php 无极分类(递归)的简单示例
  18. 腾讯云部署Hebe节点教程
  19. 【干货长文】诺亚财富解读市场信息心理学
  20. 目前主流的app开发方式

热门文章

  1. “悬空指针”和“野指针”究竟是什么意思?有什么区别
  2. Matlab去掉数组中0
  3. [云炬创业基础笔记]第一章创业环境测试8
  4. [C++调试笔记]执行声明的读写文件操作
  5. matlab中tic,toc的用法
  6. 怎么检测mysql卸载完全_怎么检查mysql有没有删干净
  7. PIC单片机精通_A/D转换异步串口通讯实例与详解
  8. PIC单片机入门_8位AD转换器
  9. VTK修炼之道1_初识VTK
  10. FFmpeg中实现对多媒体信息的获取与打印av_dump_format