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. Git仓库的提交记录乱成一团，怎么办？

    大家好,今天和大家聊聊git当中一个非常好用的功能--区间选择,它可以帮我们处理看起来非常复杂的提交记录.从而帮助我们很快找到我们需要的内容. 如果大家有参与过多人协同的项目开发,比如十几个人甚至更多 ...

  2. tcp timewait 问题 转载

    TIME WAIT 带来的问题 先引用一个名言: The TIME_WAIT state is our friend and is there to help us (i.e., to let old ...

  3. 老板让只懂Java基本语法的我，基于AQS实现一个锁

    10 点整,我到了公司,又成为全组最后一个到的员工. 正准备刷刷手机摸摸鱼,看见老板神秘兮兮地走了过来. 老板:闪客呀,你写个工具,基于 AQS 实现一个锁,给咱们组其他开发用 我:哦好的 老板:你多 ...

  4. 使用IDEA推送项目至gitee平台或github平台

    IDEA项目推送至gitee平台或github平台 1.首先在gitee平台上创建项目 在gitee平台上创建仓库应该很简单,依据下图所示填写相应信息,即可完成创建. 需要说明的一点是,现在java开 ...

  5. [LeetCode题解]109. 有序链表转换二叉搜索树 | 快慢指针 + 递归

    题目描述 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定的有序链表: ...

  6. kali 系列学习04 - 漏洞扫描

    一.比较三类漏洞扫描工具 1.Rapid7 Nexpose 适合较大网络 2.Nessus 更经济,可以申请个人版,搞之后硬盘占用达到20G 以上2个是商业软件,使用容易上手,输入IP地址就能完成所有 ...

  7. 关于steam平台“wallpaper engine”软件出现界面黑屏，但壁纸能播放的问题

    前阵子重装电脑后,在使用wallpaper engine这款软件时发现了以下令人疑惑的画面: 点击"设置"和"壁纸选择"界面全是黑的......这还没完,更气人 ...

  8. Kafka入门（安装及使用）

    Kafka是一种分布式的,基于发布/订阅的消息系统. Kafka的组成包括: Kafka将消息以topic为单位进行归纳. 将向Kafka topic发布消息的程序成为producers. 将预订to ...

  9. "三剑客"之awk心中无剑

    一.awk介绍 awk 是一种程序语言. 它具有一般程序语言常见的功能. 因awk语言具有某些特点, 如 : 使用直译器(Interpreter)不需先行编译; 变量无类型之分(Typeless), ...

  10. 全网最全！这份深入讲解jdk和jvm原理的笔记，刷新了我对JVM的认知

    前言 前两天和朋友探讨技术的时候有聊到JVM和JDK这一块,聊到这里两个人就像高山流水遇知音那是根本停不下来,事后我想着趁现在印象还比较深刻就把这些东西整理起来分享给大家来帮助更多的人吧.话不多说,满 ...