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. 经典分治问题，平面N个点求最近点对

    大家好,我们今天来看一道非常非常经典的算法题--最近点对问题. 这个问题经常在各种面试当中出现,难度不低,很少有人能答上来.说实话,我也被问过,因为毫无准备,所以也没有答上来.是的,这道题有点神奇,没 ...

  2. 对图片进行Base64转码和解码

    Base64代码 base64.c #include <stdlib.h> #include <stdio.h> #include <string.h> #incl ...

  3. Android10_原理机制系列_AMS之AMS的启动

    概述 该篇基于AndroidQ,主要介绍系统启动中的 AMS(ActivityManagerService)的启动过程. AMS对四大组件(AndroidQ将activity移到了ActivityTa ...

  4. FTP漏洞利用复现

    目录 FTP弱口令漏洞 FTP后门漏洞利用 FTP弱口令漏洞 漏洞描述 FTP弱口令或匿名登录漏洞,一般指使用FTP的用户启用了匿名登录功能,或系统口令的长度太短.复杂度不够.仅包含数字.或仅包含字母 ...

  5. 需要登录才能下载的文件可以用Folx下载吗

    用苹果电脑的小伙伴有没有发现,有时候文件即时有下载链接也还是要先登录才能下载,那这样的文件用下载器Folx还能下载码?下面小编将在Mac系统平台上,通过一篇教程教大家利用Folx 5的密码管理来保存网 ...

  6. 下载并破解IntelliJ IDEA（2017）

    idea的下载:https://www.jetbrains.com/idea/download/#section=windows 破解链接:http://blog.csdn.net/nn_jbrs/a ...

  7. C++分支结构,求一元二次方程的根

    总时间限制:  1000ms 内存限制:  65536kB 描述 利用公式x1 = (-b + sqrt(b*b-4*a*c))/(2*a), x2 = (-b - sqrt(b*b-4*a*c))/ ...

  8. LeetCode 刷题总结

    LeetCode上的题很不错,都短小精悍. 先说说我自己.本科一直都是偏硬件,做些单片机.FPGA的东西.本科毕业设计写了个Android APP,控制外围电路(一个小车).可以通过Android手机 ...

  9. 题解 洛谷 P3396 【哈希冲突】（根号分治）

    根号分治 前言 本题是一道讲解根号分治思想的论文题(然鹅我并没有找到论文),正 如论文中所说,根号算法--不仅是分块,根号分治利用的思想和分块像 似却又不同,某一篇洛谷日报中说过,分块算法实质上是一种 ...

  10. python学习第五天 ----- 函数

    1. 内置函数 例如: print, round 2.自定义函数: 通过def来定义 def funcname(parameter_list): pass ⑴.参数parameter_list可以没有 ...