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. Android状态栏与布局重叠解决方案

    问题起因: 同组的同事将项目全局设置成了沉浸式,对于我这个半路过来开发的人 可真是头疼呵~ 没办法,那就我自己添加一个头吧.也可以在布局中取消沉浸式,不过我这个是在fragment中,为了不修改之前的 ...

  2. 2018.1.22 js

    1.JavaScrip运算符 [案例]a+=b 等价于 a=a+ba-=b 等价于 a=a-ba*=b 等价于 a=a*ba/=b 等价于 a=a/ba%=b 等价于 a%=b2.逻辑控制语句语法1: ...

  3. python+selenium+chromedriver抓取shodan搜索结果

    作用:免积分抓取shodan的搜索结果,并把IP保存为txt 前提: ①shodan会员(ps:黑色星期五打折) ②安装有python27 ③谷歌浏览器(ps:版本一定要跟chromedriver匹配 ...

  4. 匹配p后面不是h的单词

    $string = 'python perl pear php'; // 获取p后面不是h的单词 $preg = '/\bp(?!h)[a-z]+\b/'; $status = preg_match_ ...

  5. 差点跪了！阿里3面真题：CAP和BASE理论了解么？可以结合实际案例说下不？

    本文节选自我开源的 JavaGuide :https://github.com/Snailclimb/JavaGuide (Github标星92k+!一份涵盖大部分 Java 程序员所需要掌握的核心知 ...

  6. ABBYY FineReader 14如何查看PDF文档

    使用 ABBYY FineReader,您可以轻松查看和编辑任何类型的 PDF文档,就像是一款功能强大的PDF编辑转换器,不仅如此,它还能够允许您复制其中的文本.图片和表格.本文我们来看看如何从&qu ...

  7. 如何用MathType 7输入x的一阶导数

    物理学.几何学.经济学等学科中的一些重要概念都可以用导数来表示.如,导数可以表示运动物体的瞬时速度和加速度.可以表示曲线在一点的斜率.还可以表示经济学中的边际和弹性.那么作为专业的公式编辑器,如何输入 ...

  8. MindManager中主题间距/线条粗细的灵活调整

    在MindManager中,主题和线条是思维导图的基本元素,只有通过它们才能将要表达的思想呈现.并联系起来.因此,关于它们的属性设置就会多一点,如颜色.宽度.位置等.而调整主题之间的距离及线条的粗细, ...

  9. jQuery 小demo 热点排名

    效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...

  10. 小程序ui自动化（一），用uiAutormatorViewer定位元素失败，如何解决

    1.定位元素 用android ADT自带工具:uiAutormatorViewer,会报如下错误 可能是环境与手机不兼容 可以用以下方法解决:(参考:https://blog.csdn.net/qq ...