前端websocket与php后台连接

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文件代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>WebSocket协议的客户端程序</h3>
  <button id="btConnect">连接到WS服务器</button>
  <button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
  <button id="btClose">断开与WS服务器的连接</button>
  <div id="val"></div>
  <script>
    var wsClient = null; //WS客户端对象

    btConnect.onclick = function(){
      //连接到WS服务器,注意:协议名不是http!
      wsClient = new WebSocket('ws://127.0.0.1:9999');
      wsClient.onopen = function(){
        console.log('WS客户端已经成功连接到服务器上')
      }
    }

    btSendAndReceive.onclick = function(){
      //向WS服务器发送一个消息
      wsClient.send('Hello Server');
      //接收WS服务器返回的消息
      wsClient.onmessage = function(e){
        console.log('WS客户端接收到一个服务器的消息:'+ e.data);
        val.innerHTML=e.data;
      }

      
    }

    btClose.onclick = function(){
      //断开到WS服务器的连接
      wsClient.close();  //向服务器发消息,主动断开连接
      wsClient.onclose = function(){
        //经过客户端和服务器的四次挥手后,二者的连接断开了
        console.log('到服务器的连接已经断开')
      }
    }
  </script>
</body>
</html>

socket_server.php代码如下:

<?php
$address = "127.0.0.1";
$port = 9999; //调试的时候,可以多换端口来测试程序!

set_time_limit(0); 
$sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_block($sock);
socket_bind($sock, $address, $port);
socket_listen($sock, 4);


do
{
    echo "Waiting for Connection...\n";
    $msgsock = socket_accept($sock);
    echo "Waiting for Request...\n";
    $buf = socket_read($msgsock, 8192);     //读取请求
    echo "Request Received: $buf\n";
    $response = hand_shake($buf);
    socket_write($msgsock,$response,strlen($response)); //发送响应

    //正式开始通信...
    $buf = socket_read($msgsock, 8192);

    for($i=0; $i<3; $i++){
        $msg = "WELCOME $i\n";
        $msg = code($msg);
        sleep(1);
        socket_write($msgsock, $msg, strlen($msg));
    }

    socket_close($msgsock);
} while (true);
socket_close($sock);

function hand_shake($buf){
    $buf  = substr($buf,strpos($buf,'Sec-WebSocket-Key:')+18);
    $key  = trim(substr($buf,0,strpos($buf,"\r\n")));

    $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));

    $new_message = "HTTP/1.1 101 Switching Protocols\r\n";
    $new_message .= "Upgrade: websocket\r\n";
    $new_message .= "Sec-WebSocket-Version: 13\r\n";
    $new_message .= "Connection: Upgrade\r\n";
    $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
    return $new_message;
}
function code($msg){
    $msg = preg_replace(array('/\r$/','/\n$/','/\r\n$/',), '', $msg);
    $frame = array();
    $frame[0] = '81';
    $len = strlen($msg);
    $frame[1] = $len<16?'0'.dechex($len):dechex($len);
    $frame[2] = ord_hex($msg);
    $data = implode('',$frame);
    return pack("H*", $data);
}
function ord_hex($data)  {
    $msg = '';
    $l = strlen($data);
    for ($i= 0; $i<$l; $i++) {
        $msg .= dechex(ord($data{$i}));
    }
    return $msg;
}

 

(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 标签上  就实现了  时时更新了

 

 

  • 10
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 15
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值