HTTP协议的特性：属于“请求-响应”模型，只有客户端发起了请求消息，服务器才能给出响应消息，没有请求，就没有响应；一个请求消息，服务器只能返回一个响应消息。有些特殊应用场景中，如“在线股票”、“聊天室”等，需要模拟呈现出“客户端不发请求，服务器也在不停的给出响应”效果，若使用HTTP协议，只能使用“AJAX+定时器”来近似的实现——心跳请求，问题：心跳过慢则信息的实效性差，心跳过快则服务器压力太大！

WebSocket协议的特性：属于“广播-收听”模型，只要客户端连接到服务器上，就不再断开（永久连接），一方可以不停的给对方发消息，对方可以不给出响应。使用WS协议代替心跳请求，可以非常好的解决HTTP协议在某些应用中的不足。WS协议的服务器也有不足：永久连接限制了客户端的数量。

WebSocket应用程序必需两个程序：

WS服务器端程序：

(1)、可以使用Java、PHP、C#、Node.js编写，修改PHP解释器配置文件(php.ini)来启用socket相关函数：extension=php_sockets.dll    去掉此行前的分号（此例子采用xampp本地服务） 重启本地服务（记得配置xampp的php变量环境，不懂百度）

(2)、在xampp\\htdocs 下新建一个文件websocket,里面新建两个文件如下：

socket_client.html

socket_server.php

socket_client.html文件代码如下：

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head lang="en">
  4.  
    <meta charset="UTF-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <h3>WebSocket协议的客户端程序</h3>
  9.  
    <button id="btConnect">连接到WS服务器</button>
  10.  
    <button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
  11.  
    <button id="btClose">断开与WS服务器的连接</button>
  12.  
    <div id="val"></div>
  13.  
    <script>
  14.  
    var wsClient = null; //WS客户端对象
  15.  
     
  16.  
    btConnect.onclick = function(){
  17.  
    //连接到WS服务器，注意：协议名不是http！
  18.  
    wsClient = new WebSocket('ws://127.0.0.1:9999');
  19.  
    wsClient.onopen = function(){
  20.  
    console.log('WS客户端已经成功连接到服务器上')
  21.  
    }
  22.  
    }
  23.  
     
  24.  
    btSendAndReceive.onclick = function(){
  25.  
    //向WS服务器发送一个消息
  26.  
    wsClient.send('Hello Server');
  27.  
    //接收WS服务器返回的消息
  28.  
    wsClient.onmessage = function(e){
  29.  
    console.log('WS客户端接收到一个服务器的消息：'+ e.data);
  30.  
    val.innerHTML=e.data;
  31.  
    }
  32.  
     
  33.  
     
  34.  
    }
  35.  
     
  36.  
    btClose.onclick = function(){
  37.  
    //断开到WS服务器的连接
  38.  
    wsClient.close(); //向服务器发消息，主动断开连接
  39.  
    wsClient.onclose = function(){
  40.  
    //经过客户端和服务器的四次挥手后，二者的连接断开了
  41.  
    console.log('到服务器的连接已经断开')
  42.  
    }
  43.  
    }
  44.  
    </script>
  45.  
    </body>
  46.  
    </html>

socket_server.php代码如下：

  1.  
    <?php
  2.  
    $address = "127.0.0.1";
  3.  
    $port = 9999; //调试的时候，可以多换端口来测试程序！
  4.  
     
  5.  
    set_time_limit(0);
  6.  
    $sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
  7.  
    socket_set_block($sock);
  8.  
    socket_bind($sock, $address, $port);
  9.  
    socket_listen($sock, 4);
  10.  
     
  11.  
     
  12.  
    do
  13.  
    {
  14.  
    echo "Waiting for Connection...\n";
  15.  
    $msgsock = socket_accept($sock);
  16.  
    echo "Waiting for Request...\n";
  17.  
    $buf = socket_read($msgsock, 8192); //读取请求
  18.  
    echo "Request Received: $buf\n";
  19.  
    $response = hand_shake($buf);
  20.  
    socket_write($msgsock,$response,strlen($response)); //发送响应
  21.  
     
  22.  
    //正式开始通信...
  23.  
    $buf = socket_read($msgsock, 8192);
  24.  
     
  25.  
    for($i=0; $i<3; $i++){
  26.  
    $msg = "WELCOME $i\n";
  27.  
    $msg = code($msg);
  28.  
    sleep(1);
  29.  
    socket_write($msgsock, $msg, strlen($msg));
  30.  
    }
  31.  
     
  32.  
    socket_close($msgsock);
  33.  
    } while (true);
  34.  
    socket_close($sock);
  35.  
     
  36.  
    function hand_shake($buf){
  37.  
    $buf = substr($buf,strpos($buf,'Sec-WebSocket-Key:')+18);
  38.  
    $key = trim(substr($buf,0,strpos($buf,"\r\n")));
  39.  
     
  40.  
    $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));
  41.  
     
  42.  
    $new_message = "HTTP/1.1 101 Switching Protocols\r\n";
  43.  
    $new_message .= "Upgrade: websocket\r\n";
  44.  
    $new_message .= "Sec-WebSocket-Version: 13\r\n";
  45.  
    $new_message .= "Connection: Upgrade\r\n";
  46.  
    $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
  47.  
    return $new_message;
  48.  
    }
  49.  
    function code($msg){
  50.  
    $msg = preg_replace(array('/\r$/','/\n$/','/\r\n$/',), '', $msg);
  51.  
    $frame = array();
  52.  
    $frame[0] = '81';
  53.  
    $len = strlen($msg);
  54.  
    $frame[1] = $len<16?'0'.dechex($len):dechex($len);
  55.  
    $frame[2] = ord_hex($msg);
  56.  
    $data = implode('',$frame);
  57.  
    return pack("H*", $data);
  58.  
    }
  59.  
    function ord_hex($data) {
  60.  
    $msg = '';
  61.  
    $l = strlen($data);
  62.  
    for ($i= 0; $i<$l; $i++) {
  63.  
    $msg .= dechex(ord($data{$i}));
  64.  
    }
  65.  
    return $msg;
  66.  
    }

(3)、进入文件夹（xampp\htdocs\websocket）按住Shift +右键，（选择在此处打开令行窗口）执行调用PHP解释器，执行PHP语言编写的Socket服务器程序，输入如下代码：

php socket_server.php

运行完显示如下信息代表连接成功

(4)、访问socket_client.html (http://127.0.0.1/websocket/socket_client.html) 需要服务访问，点击按钮“连接到ws服务器”控制台上（console.log）能看到如下

点击按钮“向WS服务器发消息并接收消息”就能看到如下

这时就可以将信息填入html 标签上  就实现了  时时更新了

前端webSocket和后台php的更多相关文章

  1. 微信小程序----关于变量对象data 和 前端wxml取后台js变量值

    (一)页面变量对象data 对象data 有两个方面用途 第一,前端wxml的数据渲染是通过设置此对象中定义的变量进行关联展现的 第二,定义JS页面中的页面局部变量,使其整个页面中可使用或调用 对象d ...

  2. android支付宝app支付(原生态)-包括android前端与java后台

    本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...

  3. android 集成支付宝app支付(原生态)-包括android前端与java后台

    本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...

  4. SpringBoot集成websocket发送后台日志到前台页面

    业务需求 后台为一个采集系统,需要将采集过程中产生的日志实时发送到前台页面展示,以便了解采集过程. 技能点 SpringBoot 2.x websocket logback thymeleaf Rab ...

  5. 跨域问题，前端主动向后台发送cookie

    跨域是什么? 从一个域名的网页访问另一个域名的资源,就会出现跨域.只要协议.端口.域名有一个不同就会出现跨域 例如: 1.协议不同  http://www.baidu.com:80 和 https:/ ...

  6. Android前端人员与后台开发的撕逼（一）

    首先表明一下身份,本人是Android前端开发人员,本篇只做合理性探讨,不进行人身攻击: 其次希望各位大神进行点评!点评!点评! 我们讨论一下接口的两种返回方式,直接举例说明一下,假设书籍信息表有30 ...

  7. [转]为什么大型网站前端使用 PHP 后台逻辑用 Java？

    最近纠结了一下,如果开发一个大型的网站,我到底应该使用php还是jsp,后台到底使用php还是用java,我的选择要么是php要么是java,因为我喜欢linux.unix,当然window平台也必须 ...

  8. vue-cli 前端开发，后台接口跨域代理调试问题

    使用 webpack的方式开发的时候,前台开发过程中需要调用很多后台的数据接口,但是通常前后台分离的开发方式,后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的,也就出现了所谓的跨域问题. ...

  9. 前端js，后台python实现RSA非对称加密

    先熟悉使用 在后台使用RSA实现秘钥生产,加密,解密; # -*- encoding:utf-8 -*- import base64 from Crypto import Random from Cr ...

随机推荐

  1. BeatifulSoup在测试工作中的应用

    近期要做一个项目,重复性劳动比较多,小伙伴建议我用Jsoup,但是由于项目紧急,我直接选择了BeautifulSoup,关键原因是我Java语言不如Python掌握的熟练啊!所以,查了一圈它的中文文档 ...

  2. cephfs元数据池故障的恢复

    前言 cephfs 在L版本已经比较稳定了,这个稳定的意义个人觉得是在其故障恢复方面的成熟,一个文件系统可恢复是其稳定必须具备的属性,本篇就是根据官网的文档来实践下这个恢复的过程 实践过程 部署一个c ...

  3. git-新建git用户流程-1

    1.输入:https://git-scm.com/ 2.点击try git 4.注册git填写用户名和密码,邮箱,验证邮箱 5.选择免费的版本 6.创建仓库名称 创建成功见截图

  4. 每天一个linux命令之top

    每天一个linux命令之top 转  https://www.linuxprobe.com/chapter-02.html 在图2-6中,top命令执行结果的前5行为系统整体的统计信息,其所代表的含义 ...

  5. Struts2漏洞渗透笔记

    虽然这是一次失败的渗透,但是也学到不少新姿势. 目标机环境:①外网②win2012③360全家桶 一,利用Struts2终极利用工具上传一句话 jsp的一句话,有时候会出现兼容问题.比如Cknife的 ...

  6. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  7. 金九银十已到！Cookie 和 Session的这些知识你必须知道，面试必问！

    前言 会话:一次会话中包含多次请求和响应 注:一次会话表示浏览器第一次给服务器发送请求,会话建立,直到有一方断开为止 功能:在一次会话的多次请求间共享数据 方式: (1) 客户端会话技术:Cookie ...

  8. Zabbix监控笔记

    了解zabbix,有必要了聊一下监控系统相关内容 企业中常用的开源监视系统目前有 cacti.Nagios.Open-Falcon.zabbix.prometheus等 使用监控系统的目的在于 /1. ...

  9. word边框+底纹

    边框(段落和文字):先进行方框.阴影.三维等边框的选择,再进行样式.颜色.宽度设置,应用于:段落和文字:选项:距离正文上下左右距离. 页面边框(页.整篇文章等):先进行方框.阴影.三维等边框的选择,再 ...

  10. 怎么理解虚拟 DOM？

    一.前言 现在web前端的开发,对于MVVM框架的运用,那是信手拈来,用的飞起.一个xxx-cli工具,就能初始化一套模板,再填充业务代码,打包部署即可.但是会用,是一个方面,大家有没有底层深入思考一 ...