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. W3C中不同标准的含义

    学习CSS/HTML的过程中,当出现释义冲突时,W3C(万维网联盟)官网所陈列的技术标准是最核心的判断参考.但是新手在查阅W3C标准索引页面时,会发现同一个属性或者模型会出现多个不同的阶段规范展示结果 ...

  2. JS函数命名规范

    语法规范: 任何合法的javascript标识符都可以作为函数的名称. 约定俗成的内容:(非ECMAScript语法,但是为了便于开发者理解和识别,约定的函数命名规范.) 命名方法: 小驼峰式命名法 ...

  3. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  4. linux文件增删拷(touch/mkdir/cp/mv/rm)

    touch或>命令创建普通文件: [root@localhost test]# touch a  ---创建单个文件 [root@localhost test]# ls a [root@loca ...

  5. com.aliyun.oss.ClientException: Connection error due to: Connection pool shut down

    com.aliyun.oss.ClientException: Connection error due to: Connection pool shut down[ErrorCode]: Unkno ...

  6. 查看 /var/log目录下文件个数 命令tree 、cut

    查看 /var/log目录下文件个数 方法1. [root@oldboy learn_shell]# tree -L 1 /var/log/ |tail -1 5 directories, 42 fi ...

  7. 详解CorelDRAW中刻刀工具的具体运用

    通过CorelDRAW,我们可以将一个对象拆分为两个对象,使用刻刀工具就可以将对象一分为二,保存为一个由两个或者多个子路径组成的对象,可以指定是否要自动闭合路径,或者是否一直将它们打开. CDR刻刀工 ...

  8. 教你用Vegas Pro制作视频的遮罩转场特效

    很多小伙伴在接触了Vegas之后,都想利用Vegas制作出各种酷炫的特效.小编也是一样. 今天,小编就和大家分享一下,小编近期学会的遮罩转场特效. 首先想要制作遮罩转场效果,需要的素材有:至少两个图片 ...

  9. css3系列之过渡transition

    transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...

  10. zabbix 监控文件夹

    安装inotify wget http://github.com/downloads/rvoicilas/inotify-tools/inotify-tools-3.14.tar.gz tar -zx ...